Resource Centerリソースセンター

WordPressのブロックエディタ（Gutenberg）は、HTMLなどの専門知識がなくても、ブロックと呼ばれるパーツを組み合わせるだけでページのレイアウトを作成できる編集機能です。専門的な知識がなくても比較的直感的に操作しやすく、初心者でも利用しやすいのが特徴です。
ブロックエディタは豊富な機能を備えており、さまざまなレイアウトや表現を実現できます。一方で、利用できるブロックや設定項目も多いため、初めて触れる場合は何から使えばよいのか迷うこともあるでしょう。
しかし、最初からすべての機能を覚える必要はありません。まずは基本的な仕組みや画面構成を理解することで、必要な機能を迷わず使えるようになります。
本記事では、ブロックエディタを使うための第一歩として、仕組みや画面構成など基本的な部分について解説します。
※画面の表示や利用できる機能、ブロックの見た目は、ご利用のWordPress環境によって異なります。

ブロックエディタとは？

ブロックエディタ（Gutenberg）は、記事やページを「ブロック」という単位で組み立てていくWordPressの編集機能です。
記事は、見出し・段落・画像・箇条書き・ボタンなど、さまざまな要素で構成されています。

ブロックエディタでは、こうした要素をそれぞれ独立したブロックとして扱い、必要に応じて追加・編集しながらページを作成していきます。
従来のクラシックエディタが、1つの入力欄に文章や装飾をまとめて記述する方式だったのに対し、ブロックエディタでは要素ごとに管理できるため、レイアウトを視覚的に組み立てやすいのが特徴です。
また、実際の表示に近い形で内容を確認しながら編集できるため、HTMLやCSSの専門知識がなくてもレイアウトや装飾を調整しやすくなっています。ブロックの並び替えもドラッグ＆ドロップで行えるため、視覚的にコンテンツを編集できるのも特徴です。

画面構成

ブロックエディタの投稿画面は、いくつかのエリアに分かれています。
詳しい操作方法は次回以降で解説するため、ここでは各エリアの名称と役割を大まかに確認しておきましょう。

上部バー

画面上部に配置されているツールバーです。
左側にはブロックの追加や履歴操作、ブロック構造の確認など、編集を補助する機能があります。
中央にはコマンドパレット（検索機能）があり、設定や機能を検索できます。
右側には、下書き保存や公開、表示モードの切り替え、パネルの表示切り替え、各種オプション設定など、記事全体の状態管理や表示設定に関する機能がまとめられています。

左パネル

ブロックの追加やパターンの選択、ブロック構造の確認などを行うためのパネルです。
上部バーの対応するボタンをクリックすると表示されます。

右パネル

記事全体や選択中のブロックの設定を行うためのパネルです。
「投稿（または固定ページ）」タブでは記事全体の設定を、「ブロック」タブでは選択中のブロックの詳細設定ができます。
上部バーの対応するボタンをクリックすると表示されます。

コンテンツエリア

実際に記事を作成するエリアです。
段落や見出し、画像などのブロックを追加しながらコンテンツを作成していきます。

ブロックツールバー

ブロックを選択した際に表示されるツールバーです。
ブロックの移動や配置変更、よく使う設定など、編集時によく利用する操作がまとめられています。

まとめ

今回は、WordPressのブロックエディタについて、基本的な仕組みと画面構成を解説しました。
ブロックエディタは機能が豊富ですが、まずは各エリアの役割や全体の流れを把握しておくことで、今後の操作も理解しやすくなります。
次回は、ブロックの追加・移動・削除など、実際にコンテンツを作成するための基本操作について解説します。