ワードプレス Gutenberg（ブロックエディター）使い方ガイド 初めてブロックエディターを使うあなたへ
Gutenberg（ブロックエディター）はワードプレスの標準エディターですが、初心者にとってはとっつきにくいのは確かです。ベテランブロガーでもクラシックエディターを愛用している方もおられるでしょう。
でも食わず嫌いになっていませんか？
本記事ではそんな初心者の方や食わず嫌いのあなたにGutenbergの使い方をやさしく順番に解説していきます。
・Gutenbergの操作画面の基本的な使い方
・簡単な記事の作成と文字装飾の方法
・コンテンツをまとめるグループブロックの使い方
・グループブロックを使った装飾ボックスの作り方
・Gutenbergでページ内リンクを貼る方法
・カラムブロックを使った段組みレイアウトの作成方法
・画像関連のブロックあれこれ
（画像ブロック・カバーブロック・メディアとテキスト・画像の縦横比の固定方法・全幅表示の方法）
・テーブルブロックで表を作成
・ブロックにアニメーションを設定する便利なプラグイン
・再利用ブロックの使い方とブロックパターンへの変換方法
・Gutenbergが使いにくい理由と克服方法
・クラシックエディターの記事をブロックエディターで編集する
・ワードプレスversion5.5～5.8の新機能
・サイトエディターへの進化の方向性
このように、基礎から始めてさまざまなブロックの応用方法や最新のワードプレスversionでの進化の内容まで盛りだくさんの内容になっています。
もしあなたがすでにGutenbergを使い始めていて、それでも使いにくいと感じているならば、こちらの記事の方が役立つかもしれません。
https://web-children.com/2021/02/28/gutenberg-weak-point10/またブロックに慣れてきたからブロックの自作やカスタマイズをしてみたいという場合はこちらを参照ください。
https://web-children.com/category/wordpress/block-creation/- 1. まずはブロックエディターの編集画面を知ろう
- 2. 記事を作成して画像の挿入方法、見出し・段落の設定方法を学ぶ
- 3. 文字装飾の方法を学ぶ
- 4. ブロックをグループ化できるグループブロック
- 5. おしゃれな装飾ボックス（囲み枠）の作成方法
- 6. ページ内リンクを貼る方法
- 7. 段組レイアウトの作成
- 8. 画像関係のブロックバリエーション
- 9. カバーブロックでずらしレイアウトを作成する
- 10. テーブルブロックで表を作成する
- 11. ブロックにアニメーションをつける
- 12. 再利用ブロック
- 13. Gutenbergが使いにくい理由と克服法
- 14. クラシックエディターの記事をGutenberg化する方法
- 15. ワードプレスversion5.5での変更事項
- 16. ワードプレスversion5.7での変更事項
- 17. ワードプレス5.8で追加された新機能
- 18. サイトエディターへの進化
- 19. まとめ
まずはブロックエディターの編集画面を知ろう
ブロックエディターを開けたら、画面のどこがどのような機能を果たすのかを知りましょう。
この記事では、簡単にブロックエディターのブロックの構成について紹介したあと、画面の各パネル・ボタンの役割を紹介していきます。
記事を作成して画像の挿入方法、見出し・段落の設定方法を学ぶ
ブロックエディターの画面内の各機能が確認できたら、次の記事で具体的に記事を作成しながら、ブロックエディターの使い方の基本を学んでいきましょう。
画像ブロックの基本的な使い方や見出しブロック・段落ブロックを使うことで、記事を作成していきます。
文字装飾の方法を学ぶ
先の記事で記事の作成方法について解説しましたが、その中で、文字装飾の方法についてはあまり細かく触れていません。
実はブロックエディターが使いにくい！と不評であった第1位の原因が、この文字装飾のわかりにくさにあったのです。
そこで、文字装飾の方法については、特別に次の記事で解説しました。
ここまでで、ブロックエディターを使って記事の投稿はできるようになるでしょう。
ここから先は、クラシックエディターにはなかった、ブロックエディターならではのコンテンツの作成方法の解説となります。したがって、学ぶ順番は興味のあるところからで構いません。
ブロックをグループ化できるグループブロック
ブロックをまとめてグループ化できるグループブロックの使い方～応用の方法まで解説しています。
グループ化すれば、
・グループごとコピーや移動ができる
・グループごと文字色・背景色が設定できる
・パディング機能で余白を設定してレイアウト調整できる
など、さまざまなメリットがあるので、記事の作成幅がぐっと広がります。
おしゃれな装飾ボックス（囲み枠）の作成方法
文字の装飾ではなくボックスの装飾もよく使いますよね。例えば次のようなものです。
読みやすい記事では、必ず装飾ボックスで囲んでメリハリがついているものです。
こういったボックスをGutenbergで作成する方法について次の記事で解説しています。
ページ内リンクを貼る方法
ページ間だけでなく、ページ内でもリンクを貼ることができます。
段組レイアウトの作成
カラムブロックを使用すれば、2列や3列など複数カラムのレイアウトが作成できます。
各カラムの中に段落ブロックや画像ブロックなど複数のブロックを自由に配置することができるので、かなり自由度の高いレイアウトをつくることができるでしょう。
また、ブロックの中に別のブロックが複数入る、といった複雑なブロック構成を確認するためには、画面左上のブロックナビゲーター（リスト表示）が意外に便利に使えることにも気づくでしょう。
なお応用編として、ブラグインで提供されているカラムブロックとデフォルトのカラムブロックとの違いについて検証した記事もありますので、余裕があれば確認してみてください。
画像関係のブロックバリエーション
画像関係のブロックを紹介していきます。
画像ブロックの詳細な使い方
画像ブロックは、単に画像を挿入するだけでなく、ズーム・縦横比指定・回転を取り込んだトリミング加工やデュオトーンフィルターなどの画像加工ができるようになっています。
カバーブロック
カバーブロックを使えば、背景画像の上にテキストを重ねて表示させることができます。
カバーブロックで画像の縦横比を固定する
カバーブロックの画像は背景画像なので、表示するDisplayのサイズによって縦横比が変わり、表示される画像部が大きく変化します。
そこで、Displayのサイズに影響を受けずに、縦横比を固定したまま背景画像全体を表示させる方法をカスタムCSSを使って解説しました。
カバーブロックの使い方のバリエーションと考えてください。
カバーブロックでずらしレイアウトを作成する
また、カバーブロックとグループブロックを利用して、横幅いっぱいの背景色にコンテンツを重ねたり、少しずらしたレイアウトも作成可能です。
こんな感じです。
メディアと文章
メディアと文章 のブロックを使えば、画像と画像以外のコンテンツ（見出しや段落、ボタンブロックなど）を横並びに表示させることができます。よくある広告バナー的なCTAを制作することができます。
この記事の中で同時にボタンブロックも使用します。
画像を全幅表示させる
これは本来、画像ブロックの解説の中で説明してもよかったのですが、クラシックエディターでは作れなかったコンテンツとして別に取り上げてみました。
上記記事内で紹介していますが、テーマ側が全幅対応表示に対応していない場合は、簡単なカスタムCSSで対応することが可能です。
テーブルブロックで表を作成する
テーブルブロックではシンプルな表を簡単に作成できます。こちらの記事ではテーブルブロックの使い方のほか、表を見やすくするおすすめのCSSも紹介しています。
さらにプラグインFlexible Table Blockを使えば、セルごとの結合や配色およびレシポンシブ対応など、標準のテーブルブロックではできない機能を使うことができるのでおすすめです。
ブロックにアニメーションをつける
アニメーション専用のブロックを使わなくても、プラグインBlocks Animationを使えば既存のブロックに簡単にアニメーションをつけることができます。
再利用ブロック
再利用ブロックは、ブロックエディターの特徴のなかでも、一番に取り上げるべき機能かもしれません。
あるコンテンツをブロックエディターで作成して、これを再利用ブロックとして登録しておけば、作成中の他の記事の中でいつもで呼び出せるという機能です。
しかも、元の登録画像を編集した場合、その変更内容は呼び出した他の記事にも自動反映されます。
テーマによっては、再利用ブロックをウィジェットとしても利用できます（テーマLuxeritasでは可能）。これは非常に便利な機能なのでこのサイトでも多用しています。
再利用ブロックの使い方は次の記事を参照ください。ワードプレスversion5.6および5.7で若干挙動が変わりましたので2021年4月に全面的にリライトしています。
また次の記事では、パターンに変換することで再利用ブロックをより快適に使えるプラグインを紹介しています。
Gutenbergが使いにくい理由と克服法
ここまでGutenbergのさまざまな使い方を紹介してきましたが、それでも使いにくい！という声はよく聞きます。そこで、Gutenbergはなぜ使いにくいのか？その理由と克服するコツについて以下の記事を書きました。ぜひ参照してみてください。
クラシックエディターの記事をGutenberg化する方法
ブロックエディターに慣れてくると、過去にクラシックエディターで書いた記事もブロックエディターに変更したくなります。
そんなあなたには次の記事がおすすめです。
ワードプレスversion5.5での変更事項
ブロックエディターは、2020年8月のワードプレス5.5で、様々な変更が入りました。その中でブロックエディターも正常進化を遂げましたので、その点を解説しています。
※version5.5では操作画面が少し変わってしまったので、このブログ内の関連記事もリライトせざるを得なくなりました（苦笑）。ちなみにversion5.6も2020年12月にリリースされましたが、Gutenbergとしてはさほど大きく変わらず、ホッとしています。
ワードプレスversion5.7での変更事項
version5.5のときほど大きな変更ではありませんが、version5.7においてもいくつかの改善が入りましたので記事でまとめています。
ワードプレス5.8で追加された新機能
2021年7月にリリースされたversion5.8では、新機能が複数追加されました。
いずれもGutenbergがベースとなっています。
ブロックベースのウィジェット使用方法
ウィジェットとしてブロックを利用できるようになりました。
まだまだテーマ側の対応が追い付かず、あえて旧ウィジェットを使うテーマもありますが、新機能として知っておくとよいでしょう。
クエリーループで記事一覧を表示する
”クエリーループ”や”投稿コンテンツ”など、”テーマ”というグループの中にブロックが新設されました。
これにより従来はPHPを使う必要のあった記事一覧の表示がGutenbergエディター内でできるようになりました。
テンプレートエディターで独自のテンプレートを作成
独自のテンプレートを作成するためには、従来はPHPを使ってテンプレートファイルを作成する必要がありましたが、テンプレートエディターで管理画面内で可能となりました。
画像にデュオトーンフィルターを適用
画像ブロックおよびカバーブロックの画像にデュオトーンフィルターを適用できるようになりました。
デュオトーンとは画像などを2色でデザインしたもので、ポップな雰囲気を出すのに使われたりします。
デュオトーンフィルターについては、こちらの記事を参照ください。
リスト表示が画面左に表示されるようになった
version5.8から、ブロックの構成を表示するリスト表示が、画面左に表示されるようになりました。
カラムブロックなど複雑なブロック構造で作業を進めるときに便利です。
サイトエディターへの進化
Gutenbergの進化形として、近い将来、サイトエディターが導入される予定です。
サイトエディターとはその名のとおり、サイト表示の画面のままで編集できる機能です。
投稿や固定ページでは編集できなかった、ヘッダー・フッターや記事一覧表を編集できるようになります。
ヘッダーやフッターなんかは、従来もウィジェットでコンテンツを挿入できたりしましたが、記事一覧表を編集するにはPHPでテンプレートファイルを直接編集しないとできなかったことなので画期的です（ブロックとしてはバージョン5.8でクエリブロックがサイトエディターの布石として導入されました）。
サイトエディターはバージョン5.9からの導入となりますが、2021年末だったリリース予定が2022年1月25日に延期されています。
サイトエディターのベータ版を体験した内容を記事にしています。興味があればぜひご覧ください。
まとめ
まだまだGutenbergは発展していきます。
新しく追加された機能や気づいた点があれば記事は増やしていく予定です。
