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

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

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

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

「Gutenberg（グーテンベルク）」という名前は、活版印刷技術の発明者といわれるJohannes Gutenberg（ヨハネス・グーテンベルク）にあやかって付けられています。

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

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

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

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

旧エディタと新しいブロックエディタとでは使い勝手が全く異なるため、古くからのWordPress利用者にとっては、ブロックエディタは使いにくいという声もあるようです。そこでWordPressでは、旧エディタ環境に戻すためのプラグイン「Classic Editor」が用意されています。

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

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

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

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

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

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

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

使用しているテーマやプラグインによっては、表示内容が追加されることもあります。

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

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

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

新しいブロックを追加する5つの方法

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

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

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

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