Gutenberg（ブロックエディター）習得ガイド　初めてブロックエディターを使うあなたへ

2021年2月28日

Gutenberg（ブロックエディター）はワードプレスのデフォルトエディターとして登場した2018年末以来、確実に進歩を遂げ、今やワードプレスのコンテンツ制作に欠かせないものとなりました。

2018年末登場当時は、まだ機能的に使いにくく、それを補うプラグインや対応テーマも少なかったため、相変わらずクラシックエディターを使い続ける方が多数派でしたが、2020年現在は、むしろクラシックエディター使用者の方が少数派といえるでしょう。

でも、それでも初心者にとって、Gutenbergはとっつきにくいことには変わりありません。

そこで本記事では、これからGutenbergを習得したいあなたがどのように進めていったらよいかのガイドラインとしてお役立ち記事を紹介していきたいと思います。

まずはブロックエディターの編集画面を知ろう

ブロックエディターを開けたら、画面のどこがどのような機能を果たすのかを知りましょう。

この記事では、簡単にブロックエディターのブロックの構成について紹介したあと、画面の各パネル・ボタンの役割を紹介していきます。

記事を作成して画像の挿入方法、見出し・段落の設定方法を学ぶ

ブロックエディターの画面内の各機能が確認できたら、次の記事で具体的に記事を作成しながら、ブロックエディターの使い方の基本を学んでいきましょう。

画像ブロックの使い方や見出しブロック・段落ブロックを使うことで、記事を作成していきます。

文字装飾の方法を学ぶ

先の記事で記事の作成方法について解説しましたが、その中で、文字装飾の方法についてはあまり細かく触れていません。

実はブロックエディターが使いにくい！と不評であった第1位の原因が、この文字装飾のわかりにくさにあったのです。

そこで、文字装飾の方法については、特別に次の記事で解説しました。

ここまでで、ブロックエディターを使って記事の投稿はできるようになるでしょう。

ここから先は、クラシックエディターにはなかった、ブロックエディターならではのコンテンツの作成方法の解説となります。したがって、学ぶ順番は興味のあるところからで構いません。

段組レイアウトの作成

カラムブロックを使用すれば、2列や3列など複数カラムのレイアウトが作成できます。

各カラムの中に段落ブロックや画像ブロックなど複数のブロックを自由に配置することができるので、かなり自由度の高いレイアウトをつくることができるでしょう。

また、ブロックの中に別のブロックが複数入る、といった複雑なブロック構成を確認するためには、画面左上のブロックナビゲーターが意外に便利に使えることにも気づくでしょう。

なお応用編として、ブロックエディターの強化ブラグインのカラムブロックとデフォルトのカラムブロックとの違いについて検証した記事もありますので、余裕があれば確認してみましょう。

画像関係のブロックバリエーション

画像関係のバリエーションとなるブロックを紹介していきます。

カバーブロック

まずはカバーブロックです。カバーブロックを使えば、背景画像の上にテキストを重ねて表示させることができます。

カバーブロックで画像の縦横比を固定する

カバーブロックの画像は背景画像なので、表示するDisplayのサイズによって縦横比が変わり、表示される画像部が大きく変化します。

そこで、Displayのサイズに影響を受けずに、縦横比を固定したまま背景画像全体を表示させる方法をカスタムCSSを使って解説しました。

カバーブロックの使い方のバリエーションと考えてください。

メディアと文章

メディアと文章　のブロックを使えば、画像と画像以外のコンテンツ（見出しや段落、ボタンブロックなど）を横並びに表示させることができます。よくある広告バナー的なCTAを制作することができます。

この記事の中で同時にボタンブロックも使用します。

画像を全幅表示させる

これは本来、画像ブロックの解説の中で説明してもよかったのですが、クラシックエディターでは作れなかったコンテンツとして別に取り上げてみました。

この記事内で紹介していますが、テーマ側が全幅対応表示に対応していない場合は、簡単なカスタムCSSで対応することが可能です。

再利用ブロック

再利用ブロックは、ブロックエディターの特徴のなかでも、一番に取り上げるべき機能かもしれません。

あるコンテンツをブロックエディターで作成して、これを再利用ブロックとして登録しておけば、作成中の他の記事の中でいつもで呼び出せるという機能です。

しかも、元の登録画像を編集した場合、その変更内容は呼び出した他の記事にも自動反映されます。

テーマによっては、再利用ブロックをウィジェットとしても利用できます（テーマLuxeritasでは可能）。これは非常に便利な機能です。

再利用ブロックの使い方は次の記事を参照ください。

ワードプレスversion5.5での変更事項

ブロックエディターは、2020年8月のワードプレス5.5で、様々な変更が入りました。その中でブロックエディターも正常進化を遂げましたので、その点を解説しています。

※version5.5では操作画面が少し変わってしまったので、このブログ内の関連記事もリライトせざるを得なくなりました（苦笑）。ちなみにversion5.6も2020年12月にリリースされましたが、Gutenbergとしてはさほど大きく変わらず、ホッとしています。

Gutenbergが使いにくい理由と克服法

ここまでGutenbergのさまざまな使い方を紹介してきましたが、それでも使いにくい！という声はよく聞きます。そこで、Gutenbergはなぜ使いにくいのか？その理由と克服するコツについて以下の記事を書きました。ぜひ参照してみてください。

まとめ

まだまだGutenbergは発展途上です。新しく追加された機能や気づいた点があれば記事は増やしていく予定です。