ワードプレス Gutenberg（ブロックエディター）使い方ガイド　初めてブロックエディターを使うあなたへ

2022年6月1日

Gutenberg（ブロックエディター）はワードプレスの標準エディターですが、初心者にとってはとっつきにくいのは確かです。ベテランブロガーでもクラシックエディターを愛用している方もおられるでしょう。

でも食わず嫌いになっていませんか？

本記事ではそんな初心者の方や食わず嫌いのあなたにGutenbergの使い方をやさしく順番に解説していきます。

このように、基礎から始めてさまざまなブロックの応用方法や最新のワードプレスversionでの進化の内容まで盛りだくさんの内容になっています。

もしあなたがすでにGutenbergを使い始めていて、それでも使いにくいと感じているならば、こちらの記事の方が役立つかもしれません。

またブロックに慣れてきたからブロックの自作やカスタマイズをしてみたいという場合はこちらを参照ください。

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

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

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

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

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

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

また上記の記事のなかで、ブロックに余白を挿入するスペーサーブロックも紹介しています。

文字装飾の方法を学ぶ

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

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

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

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

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

ブロックをグループ化できるグループブロック

ブロックをまとめてグループ化できるグループブロックの使い方～応用の方法まで解説しています。

グループ化すれば、

・グループごとコピーや移動ができる
・グループごと文字色・背景色が設定できる
・パディング機能で余白を設定してレイアウト調整できる

など、さまざまなメリットがあるので、記事の作成幅がぐっと広がります。

おしゃれな装飾ボックス（囲み枠）の作成方法

文字の装飾ではなくボックスの装飾もよく使いますよね。例えば次のようなものです。

こういったボックスをGutenbergで作成する方法について次の記事で解説しています。

ページ内リンクを貼る方法

ページ間だけでなく、ページ内でもリンクを貼ることができます。

段組レイアウトの作成

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

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

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

なお応用編として、ブラグインで提供されているカラムブロックとデフォルトのカラムブロックとの違いについて検証した記事もありますので、余裕があれば確認してみてください。

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

画像関係のブロックを紹介していきます。

画像ブロックの詳細な使い方

画像ブロックは、単に画像を挿入するだけでなく、ズーム・縦横比指定・回転を取り込んだトリミング加工やデュオトーンフィルターなどの画像加工ができるようになっています。

カバーブロック

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

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

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

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

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

カバーブロックでずらしレイアウトを作成する

また、カバーブロックとグループブロックを利用して、横幅いっぱいの背景色にコンテンツを重ねたり、少しずらしたレイアウトも作成可能です。

こんな感じです。

メディアとテキスト

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

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

実はメディアとテキストブロックを使えば、画像の真横にテキストを置くだけでなく、画像の上にずらして配置することも可能です。

例えばこんなものも簡単なCSSでカスタマイズできちゃいます。

作成のCSSはこちらの記事を参照ください。

画像を全幅表示させる

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

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

テーブルブロックで表を作成する

テーブルブロックではシンプルな表を簡単に作成できます。こちらの記事ではテーブルブロックの使い方のほか、表を見やすくするおすすめのCSSも紹介しています。

さらにプラグインFlexible Table Blockを使えば、セルごとの結合や配色およびレシポンシブ対応など、標準のテーブルブロックではできない機能を使うことができるのでおすすめです。

アイコンでSNSへリンクを貼るソーシャルアイコンブロック

ソーシャルアイコンブロックを使えば、次のようにSNS用アイコンボタンを表示することができます。

• Facebook
• Twitter
• Instagram
• YouTube
• TikTok
• Spotify
• GitHub

もちろん各アイコンにはSNSへのリンクを貼ることができます。
（上記では便宜上このページへのリンクとしています）

具体的な使い方はこちらの記事を参照ください。

ブロックにアニメーションをつける

アニメーション専用のブロックを使わなくても、プラグイン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から、ブロックの構成を表示するリスト表示が、画面左に表示されるようになりました。

カラムブロックなど複雑なブロック構造で作業を進めるときに便利です。

ワードプレス5.9で追加された新機能

ワードプレス5.9では、フルサイト編集が導入されましたが、これはブロックテーマと呼ばれるテーマを使用したときだけ可能な機能です。

したがって従来のテーマを使用する場合はフルサイト編集を特に意識することなく、version5.8までと同様に使用することができます。

とはいえ、フルサイト編集以外にブロックエディターにいくつか変更点がありました。

• 見出しブロックに自動的にid付与がされるようになった
• 新しいブロックの追加
  （行ブロックのほか、ナビゲーションブロックなどフルサイト編集に使うブロック）
• リスト表示の機能向上
  （リスト表示の中でブロックのコピーや移動・削除ができる）
• ブロックパターンが大きく表示される
• テキスト関連ブロック（段落・見出しなど）のタイポグラフィー機能強化
• ブロックのドラッグ＆ドロップ操作感の向上

以上について次の記事で詳しく紹介しています。

ただし見出しへのid自動付与機能については、version5.9.1では自動付与がなくなりました。functions.phpへのコード記述で使用可能となります。

ワードプレスversion6.0で追加された新機能

version6.0では、version5.9でリリースされたフルサイト編集の強化がメインとなっていますが、従来テーマにも関連する主な更新は以下の通りです。

• ブロックにロック機能が追加された
• [[ の入力で既存記事へのリンクを呼び出し可能となった
• リスト表示で複数ブロックの選択・移動が可能となった
• グループブロックで横並び・縦積みレイアウトへの変換が可能となった
• カバーブロックで背景画像にアイキャッチ画像を選択可能となった
• タグクラウドブロックで文字サイズを変更可能となった
• 色設定できるブロックでは透過率も設定可能となった
• ブロックスタイルのプレビュー仕様が変更となった

詳しくは以下の記事を参照ください。

フルサイト編集への進化

Gutenbergの進化形として、近い将来、サイトエディターが導入される予定です。

フルサイト編集がversion5.9で導入されました。フルサイト編集とは、サイトそのものを表示させながら編集することができるサイトエディターのことを指します。

投稿や固定ページでは編集できなかった、ヘッダー・フッターや記事一覧表を編集できるようになります。

ヘッダーやフッターなんかは、従来もウィジェットでコンテンツを挿入できましたが、記事一覧表を編集するにはPHPでテンプレートファイルを直接編集しないとできなかったことなので画期的です（ブロックとしてはバージョン5.8でクエリブロックがサイトエディターの布石として導入されました）。

また、ナビゲーションメニューもブロックで挿入可能となりました。

次の記事は、version5.9で導入される前段階のサイトエディターのベータ版を体験した内容を記事にしています。興味があればぜひご覧ください。

version5.9のフルサイト編集（ブロックテーマ）については、使いにくいこともあって私自身まだ使っていません。

動作が安定しないので使いにくい、ナビゲーションのデザインが微妙（結局自分でカスタマイズしないと使う気にならない）、パンくずリストはどうすればよいのか？などなど、不明な点が多く実用化はversion6.0以降かなと考えています。

と思いながらversion6.0がリリースされましたが、パンくずブロックはまだないようですね。あるいは従来のようにテーマ作成者が自作しなければならないのかな？

でもそろそれフルサイト編集（ブロックテーマ）のことも記事で取り上げていこうかな、と思う今日この頃です。

まとめ

このほか既存のブロックをカスタマイズして使いやすくする方法などを別のカテゴリーで紹介しています。ぜひ参考にしてみてください。

• グループブロックにスタイルを追加して枠線をつける方法
• ブロックバリエーションを使ってグループブロックでタイトル付ボックスを作成する方法
• スペーサーブロックに独自スタイルを追加【記事作成スピードアップ】
• ブロックエディターでカラーパレットをカスタマイズする方法【新規作成・色の追加】