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

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

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

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

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

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

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

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

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

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

https://www.gutentor.com/

1. GUTENTOR ELEMENTS

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

Divider

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

Simple Text

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

Advanced Text

Button

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

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

Basic Option

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

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 : 左/中央/右の3種類からボタンの配置を選択

Google Map

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

Icon

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

Image

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

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

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

Advanced List

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

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

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

Pricing

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

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

Progress Bar

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

50%

Rating

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

Video Popup

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

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

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

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

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

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

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

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

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

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

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。