そらのまなびぶろぐ

＼　 THE THOR で ブログを はじめる 初心者さん 向けに 簡単な言葉と 画像たっぷりで 手順を紹介 　／

THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介

  • ブロックエディタの「クラシック」でTHE　THORの機能使うの面倒
  • ブロックエディタで区切り線を使いたい！
  • ブロックエディタで装飾ってどうやるの？

ブロックエディタで自分が使いたいブロックの種類は足りていますか？

ブロックエディタで出来ることを増やしたいと拡張プラグインを入れても「英語表記でどうやって使うかわからないんだけど！」という状況になったので自分の覚書としてこの記事をかいています。

そら
この拡張プラグインの注意事項なのですが、通常ブロックスタイルとスタイル変換は出来ません。
変えたい時は、コピペして私は乗り切ってます(笑)
目次

ブロックエディタ拡張プラグイン/Gutentor – Gutenberg //Blocks – Page Builder for Gutenberg Editor

Gutentorで書いたブロックは、ブロックの変換が数種類しか出来ませんでした。

そら
これはちょっと残念でしたが、ブロックを作成して張り付ければ問題解消なので、私はそんなに気になりませんでした。

Gutentorで書いたブロックは、エンターキーをおしても改行されません。

グーテンベルクのための高度でありながら簡単なドラッグアンドドロップのWordPressページビルダー。最新のWordPressの方法を使用して、傑作のピクセルパーフェクトなWebサイトを作成します。任意のテーマで作業し、任意のデザインを作成します。

https://www.gutentor.com/

1. GUTENTOR ELEMENTS

ブロックエディタ拡張プラグイン１

Divider

区切り線です。直線、点線の他に絵もあります。サイズ、カラー変更できます。

Simple　Text

画面左側の「Basic　Option」でブロックのスタイルを変更することが出来ます。
Basic　Option
Tag: 見出し、段落、文章を選択できる
Alignment:左/中央/右の３種類からブロック内の文章の配置を選択
color：文字色/マウスがブロックに乗った時の文字色
Typography : フォントの種類
Margin/Padding : ブロック周りの空間指定

Advanced Text

Simple Textのオプション機能に機能が追加されます。
オプション機能
Link Options : リンク
Drop Cap : 段落の１文字目の詳細を指定
width : ブロック幅
border : ブロックの縁取り


Button

文字の通りボタンです(笑)
色々カスタマイズできるので説明の項目が長いです。

そら
設定が終わったお気に入りであろうボタンは再利用ブロックとして登録保存しておくことをオススメします。

Basic Option

  • Layout:線で囲った文字だけのボタン/塗りつぶしたボタンサイズの選択
  • URL : リンク先のアドレス
  • Size : 大/中/小の３種類から選択
  • Algnment : 左/中央/右の３種類からボタンの配置を選択

Link Option

  • Nomal Link : 新しいタブでリンクを開く/Nofollow を選択するかを選択
  • Popup　　　 : リンク先をポップアップで表示
  • Link Rel         : リンクの設定が表示される（自分で記入は出来ない）

Background Color ：背景色/マウスがブロックに乗った時のボタンの背景色
Text Color : ボタンの文字色/マウスがブロックに乗った時のボタンの文字色

Icon：558個もあるアイコンから選択して使用できます（サイズ・隙間の指定を＆PC/タブレット/スマホそれぞれ指定は出来なさそうです）

Icon Position : Hide:アイコンなし/Before:文字の前/After:文字の後に表示

Typography : ボタンの文字のフォントの種類
Margin/Padding : ボタンの空間指定
border　　　　 : ボタンの縁取り
Box Shadow

  • X: ボタンの影の横移動
  • Y: ボタンの影の縦移動
  • blur: ボタンの影のにじみ（1～）
  • Spread: ボタンの影の大きさ（1～）
  • Position:影をボタンの中に向かってか外に向かってかを指定

Responsive Width : ボタンの大きさを選択
Css Class : THE THORのカスタマイズの追加CSSで記入してあれば指定できます。

Counter

キッチンタイマーのような感じです。
が、ブログでどんな時に使用すればいいのかよくわかりません(￣▽￣;)

Counter Limit：タイマーで表示するカウンタの数字の最大を指定
Counter Duration (Number)：何秒でカウンタの数字を最大まで動かすか指定
Algnment : 左/中央/右の３種類からボタンの配置を選択

Google　Map

Google MapAPIを使用してウェブサイトにGoogleマップを表示します。
これも私はつかわないなぁ(￣▽￣;)

Icon

アイコン１つだけ指定できるブロックが出来上がります(笑)
複数カラムを選択すれば使用でます。

Image

画像を記事に使いたい時に使用します。
画像の枠線などの装飾もできるのでオススメ♪

Algnment : 左/中央/右の３種類からボタンの配置を選択
Display Options：ブロックの背景画像にするか指定
SIZE：Enable Image Height & Widthを「ON」
Over Color : 画像のブロックに色をつけれる
Background Repeat:画像を繰り返して表示させるか指定
Background Attachment:Fixed:スクロールしてもブロックの中の画像が動かない(笑)

初心者向けにTHE THOR（ザ・トール）の使い方のブログ記事を書いています

Advanced List

  • リスト項目行を装飾できるリストです。

  • アイコンも使用できます

そら
リスト項目の１行ずつを装飾する指定が出来ます。
私は使いません・・・・。
通常ブロックスタイルの時と同じく、グループ化してしまえば枠で囲むこともできます。

Pricing

価格表示したい時に使用します。
オプション機能も同じの物が多いので紹介は省略します。

￥1,000/ここに文字を入れることが出来ます

Progress Bar

水平または円形のアニメーションのバーです。％を指定して使用します。

50%

Rating

1〜5　or　1〜10　評価を星で表すことが出来ます。

Video Popup

YouTube、Vimeo、またはメディアライブラリのビデオをポップアップで表示してくれます。この下のボタンは、このプラグインを作った会社のプラグイン紹介のYouTubeです。

THE THOR(ザ・トール)ブロックエディタ拡張プラグインを紹介 つづく

このプラグインの４項目の内１項目終わったので、このページはここまでにします。
つづきは次回かきます(￣▽￣;

ランキングに参加しているのでクリックしてくださると嬉しいです♪

ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

１言でも良いのでコメント頂けると記事を書くモチベーションが上がりますのでよろしければお願いします(^^♪

在宅でちょこっと収入～♪

クラウドソーシング「ランサーズ」会員募集 (無料)

私は今の所、アンケートだけしています(￣▽￣;)
アンケートに答えて５円とか１１円とかから、４００文字位の感想を書いて百円とか。
アフィリエイトより小銭がたまりそうです(笑)

クラウドソーシング「ランサーズ」
THE THORで使用できるブロックエディタ拡張プラグイン
最新情報をチェックしよう！

THE THORの連携の最新記事8件