ブロックエディタの使い方

2020-01-172020-04-18

2018年の暮れ、ワードプレス5.0がリリースされて標準エディタが変わりました。
1年4カ月で新エディタも進化して使いやすくなったみたいですね。
そろそろ本格的にブロックエディタを使おうと思い、その機能をまとめてみました。
通称Gutenberg(グーテンベルク)エディタの使い方を解説していきます。
まずは、各種ブロックの種類と役割を知ることが大事だと思います。

◆よく使うブロック
よく使うブロックは、見出しや文章、画像など一般的に使用頻度の高いブロックや過去利用したブロックが表示されます。

◆一般ブロック
段落：通常の文章を入力する際に利用します。最も使用頻度の多いブロックの一つです。
画像：画像を挿入する際に利用します。最も使用頻度の多いブロックの一つです。
見出し：見出しを挿入する際に利用します。最も使用頻度の多いブロックの一つです。
ギャラリー：横並びの画像を利用する際に利用するブロックです。
リスト：リスト(箇条書き)を作る際に利用します。使用頻度の高いブロックの一つです。
引用：引用blockquoteを挿入します。
音声：音声ファイルをアップロードできます。
カバー：画像の上に簡単にテキストを載せることができ、コンテンツの見た目を変えられるます。
ファイル：　PDFなどの任意のファイルをアップロードするためのブロックです。
動画： mp4などの動画ファイルをアップロードするためのブロックです。

◆フォーマット
ソースコード：何かのソースコードを利用したいときに挿入するブロックです。利用頻度は低いでしょう。
クラシック：従来のエディター(クラシックエディター)を利用したいときに挿入するブロックです。
カスタムHTML： HTMLで記述したいときに挿入するブロックです。
整形済み：整形済みテキスト(preタグ)を利用したいときに挿入するブロックです。利用頻度は低いでしょう。
ブルクオート：引用にさらに装飾をしたブロックです。利用頻度は低いでしょう。
テーブル：表を挿入したいときに利用するブロックです。

◆レイアウト要素
ボタン：ボタンリンクを入力する際に利用します。VK blocksのボタンと同じ？
カラム： 2カラム(2列横並び)のブロックを使用する際に利用します。3,4カラムも作れます。
メディアと文章： 2カラム(2列横並び)で左側を画像、右側を文章にしたい場合に利用します。
続きを読む：「続きを読む」の表示にしたい場合に利用します。
改ページ：改ページにする際に利用します。
区切り：区切り線hrタグを挿入します。
スペーサー：縦の余白(スペース)を作りたい場合に利用します。

◆ウィジェット
ショートコード：任意のショートコードを入力したい場合に利用するブロックです。
アーカイブ：日付別アーカイブを入力したい場合に利用するブロックです。
カレンダー：カレンダーを挿入したい場合に利用するブロックです。
カテゴリー：投稿のカテゴリーを挿入したい場合に利用するブロックです。
最新のコメント：最新のコメントを挿入したい場合に利用するブロックです。
最新の記事：最新の投稿記事を挿入したい場合に利用するブロックです。
RSS： RSSフィードを挿入したい場合に利用するブロックです。
検索：検索ボックスを挿入したい場合に利用するブロックです。

◆埋め込み
埋め込み：埋め込みを挿入する際に利用するブロックです。
Twitter：　Twitterの埋め込みを挿入する際に利用するブロックです。
Youtube： Youtubeの埋め込みを挿入する際に利用するブロックです。
Facebook： Facebookの埋め込みを挿入する際に利用するブロックです。
Instagram： Instagramの埋め込みを挿入する際に利用するブロックです。
WordPress： WordPressの埋め込みを挿入する際に利用するブロックです。

※以下は、テーマが「Lightning Pro」の場合に使用できるブロックです。
ブロックエディター利用時に利用できるLightning用ブロック。
Proは無料版以上の機能が提供されている。詳細は以下の通り

◆VK blocks
PR Blocks：　3列のPRボックスを表示します。丸の中は画像でもフォントオーサムの記号でもOK。
PR Content：画像と文章　左右の組み合わせ
スタッフ：自己紹介、スタッフ紹介
見出し：デザインが可能な見出し
アラート：各種背景色つきテキスト
フキダシ：吹き出しを表示します。
ボタン：ボタンにテキスト記入してリンクを張る。デザイン可能
質問と解答：よくあるご質問、Q-A
フロー：題目とその説明、画像を右側に表示できる。手順などをフローを示す際に使える
Share botton：フェイスブック、ツイッター、はてな、ポケットのシェアボタン表示
投稿リスト（Pro）：投稿をアイキャッチ画像と並べて縦3列に表示できます。
カード（Pro）：画像とそのタイトル、説明を3列でカード状に表示
子ページリスト（Pro）：固定ページの子ページで指定した記事をカード状に2列で表示
目次（Pro）：見出しを自動的に目次表示
ステップ（Pro）：丸の中の数字で、ステップ１、２，３と各行で順に表示。手順のようなステップ表示する際に便利
タイムライン（Pro）：時刻の数字で、6:00am、7:30am，8;00amと各行で順に表示、沿革などのような表示する際にも便利