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

WordPress（ワードプレス）のブロックエディタ（Gutenberg）とは、WordPress 5.0 以降で標準搭載されているエディタ（記事を編集する画面）です。ブロックエディタの最大の特徴は、コンテンツを「ブロック」単位で挿入することです。

ブロックエディタ（Gutenberg）とは

WordPress（ワードプレス）のブロックエディタとは、WordPress バージョン5.0 以降で標準搭載されているエディタ（記事を編集する画面）です。

ブロックエディタの特徴

ブロックエディタの最大の特徴は、コンテンツを「ブロック」単位で挿入することです。

ブロックエディタと旧エディタを比較

ここで、WordPress 5.0 よりも古いバージョンで搭載されていたエディタ（以下、旧エディタ）と、ブロックエディタとを見比べてみることにしましょう。

旧エディタは、記事本文中の見出しや段落、画像などのコンテンツを1つの大きな領域内で編集していました。

一方のブロックエディタでは、記事タイトル、見出し、段落、画像などを個別のブロックに分けて編集します。つまり、複数のブロックを組み合わせることによって1つの記事ページを完成させるわけです。

ブロック単位で編集するメリット

ブロックエディタでは、選択するブロックに応じて、設定に関する表示内容が切り替わるようになっています。

例えば「見出し」ブロックを選択した状態の画面と、「段落」ブロックを選択した状態の画面とを見比べてみましょう。明るく表示されている部分に注目してみてください。

選択するブロックごとに、設定に関する表示が変化していることがわかります。しかも、各ブロック近くには設定に必要なボタン類が表示されるため、効率的な編集が可能になりました。

旧エディタでは、設定用の表示が画面上部に固定されており、特にコンテンツ量が多い記事ではマウス操作に手間がかかるという欠点がありました。また、1か所にたくさんの設定ボタンがあるため、必要なボタンを見つけにくいという不便さもあったのです。

ブロックエディタの画面構成と使い方

あらためて、ブロックエディタの画面構成を見ていきましょう。下の図は、WordPress管理画面の[投稿]＞[新規追加]をクリックした直後の画像です。

ブロックエディタの画面は、次の4つの領域があります。

• ツール
• 保存／公開、各種設定
• コンテンツ編集
• 設定パネル

それぞれの領域で表示される内容は、記事の編集状況によって変化します。

さて、ブロックエディタで見出し、段落、画像などの各種コンテンツを記事内に挿入するためには、コンテンツ編集領域内でコンテンツの数だけブロックを追加する必要があります。

そこで、ブロックエディタの使い方をマスターする第一歩として、まずはブロックを追加する方法を紹介します。

ブロックを追加する

ブロックエディタでブロックを追加する方法として、次の5つを紹介します。

方法1～3では、ブロックの種類を指定した上で追加することができます。しかし方法4～5では、ブロックを追加した後で種類を変更しなければなりません。くわしくは、下記ページをご覧ください。

よく使うブロックの使い方

一般的なサイトを制作するうえで使用頻度が高いと思われるブロックの使い方を、下記ページで紹介しています。

ブロックを並べ替え／削除する

ブロックエディタでは、コンテンツの並べ替えや削除の操作も、ブロック単位で簡単に行うことができます。

くわしくは、下記をご覧ください。