【使い慣れると便利です】WordPressのGutenbergを徹底解説

wordpress

WordPressで記事を編集する際は、専用の編集画面を使います。WordPressではMicrosoftの「Word」のような文章編集画面を提供していましたが、最近画面デザインが大きく変化しました。
「Gutenberg」と呼ばれる新しい画面は、旧エディタに慣れている方から批判が出たりと賛否両論です。しかしGutenbergは今の時代に合わせた画期的な機能が追加されており、将来的に標準エディタとなるのでぜひ今の内に理解を深めておきたいところです。
今回はスムーズにWordPress編集をしたい方向けにGutenbergとは何か、そしてそのメリットや使い方、カスタマイズ方法などをご紹介していきます。

Gutenbergとは


Gutenbergとは、WordPressを5.0から提供開始された新しいエディタです。Gutenbergという名称は、活版印刷を発明し世に広めた「グーテンベルグ」がもとになっています。WordPress5.0からは、Gutenbergが自動で適用された状態になっています。
Gutenbergは、ブロックエディタというカテゴリ分けがされています。ブロックエディタとはブロックという構造で要素を分けながら、ブロックを積み重ねて編集ができるエディタです。「HTML」でも、<p>や<figure>などのブロック要素を積み重ねながらWebサイトを制作していきます。Gutenbergでは上記のブロックを組み合わせてWebサイトを制作する一連の流れが、誰でもできるように工夫がされています。

Gutenbergと旧エディタの違い


Gutenbergと旧エディタには、次のような違いがあります。

  • Gutenbergはブロック構造だが、旧エディタにはそのような概念がない
  • 旧エディタはHTMLタグ編集の際「テキストエディタ」画面に切り替えていたが、GutenbergではビジュアルエディタからHTMLタグを直接編集できる
  • 旧エディタは本文以外の項目にスペースを割いていたが、Gutenbergでは本文スペースを大きく取ったモダンな編集画面になっている

全体的に見ると、旧エディタより初心者に優しい作りになっている印象です。

Gutenbergのメリット


Gutenbergには、次のようなメリットがあります。

  • 初心者でも直感的に操作できる
  • エディタに装飾が反映されるので、プレビューに頼る場面が少なくて済む
  • ブロック構造により、編集作業が簡単になっている

初心者でも直感的に操作できる


旧エディタは、初心者が操作に慣れるのに時間が掛かりました。しかしGutenbergでは、初心者でも直感的に記事を編集できるよう調整がされています。
画面上部などにある「+」アイコンからブロックを追加し、画面指示に沿って設定を行うだけで

  • カラムを分ける
  • 文章背景に画像を追加する
  • ファイルダウンロードボタンを作成する

などさまざまな操作が可能です。

エディタに装飾が反映されるので、プレビューに頼る場面が少なくて済む


旧エディタでは編集画面と実際に表示されるページに大きな違いが出ることが多く、プレビューを都度見ながら作業を行う必要がありました。しかし細かい変更を行いながらプレビューを確認するのは意外と時間が掛かりますし、負担です。
Gutenbergでは、装飾内容が実際の表示に近い形で編集画面に反映されます。流石にまったく同じというわけにはいきませんが、プレビューをわざわざ確認しなくても編集内容を確認できるようになったので作業負担が減少します。

ブロック構造により、編集作業が簡単になっている


Gutenbergのブロック構造は、コンテンツ管理の面で大きなメリットを発揮します。たとえば旧エディタでは段落1と段落2を入れ替えたいとき、段落2の部分を切り取って段落1の上に貼りつける手間が掛かりました。Gutenbergの場合段落2を選択すると左に表示される矢印アイコンから、上を選ぶとすぐに段落が並び変わります。またブロックごとに装飾できるようになったので、必要な部分をドラッグ選択する手間も省けるようになりました。他にもブロックを複製したりと、コンテンツ管理に便利な機能が多数用意されています。

Gutenbergの各ブロックの詳細と使い方


ここからはGutenbergで特によく使うと思われる各ブロックの詳細と、使い方をご紹介していきます。

  • 段落ブロック
  • 見出しブロック
  • リストブロック
  • 画像ブロック
  • メディアと文章ブロック
  • カスタムHTMLブロック
  • ボタンブロック
  • 埋め込み系ブロック
  • 再利用ブロック

段落ブロック


記事内段落を記述するためのブロックです。Gutenbergの中で、最も多く利用するブロックになります。段落ブロックは段落を書き終えた後、Enterキーを押すと自動で新規作成されます。どうしても段落内で改行したいときは、「Shift+Enter」キーを押すと段落内改行が可能です。

見出しブロック


記事の各見出しを作成するためのブロックです。挿入するとボックスが出現し、H2、H3、H4の3つから見出し種類を選べます。デフォルトでは、見出し4(H4)までしか選択できません。H5以降を追加したいときは編集画面右上三本線メニューから「コードエディタ」にチェックを行い、手動で見出しタグ入力を行う必要があります。

リストブロック


箇条書きリストを追加できるブロックです。リスト内でインデントを下げて、構造を分かりやすくしたりといった操作も簡単にできます。リスト番号やマーク(・)に何も文字を入力せずにEnterキーを押すと、リストから抜けて段落ブロックが追加されます。

画像ブロック


画像を挿入するためのブロックです。従来のエディタと同じく中央寄せなどの設定が可能なほか、キャプションを入力する機能も付いています。ブロック選択時に表示される青い丸をドラッグすると、画像リサイズが可能です。

メディアと文章ブロック


画像と文章ブロックを、同時に横並べするときに利用するブロックです。画像はデフォルトで左表示になっていますが、右寄せにすぐ変更できます。また文章内に他ブロックを入れ子状態にすることも可能で、たとえばメディアを左に置いた状態でタイトルと説明を右に追加するといった操作ができます。

カスタムHTMLブロック


HTMLコードを、その場で追加できるブロックです。このブロックを使うのは、HTMLコードをある程度理解している中級者以上が多くなるでしょう。HTMLコーディングとまったく同じように、さまざまなHTMLタグを追加できます。追加したHTMLはどのように表示されるか、その場でプレビュー可能です。HTMLという性質上、文章と間違えて文字を1つでも消すとエラーが出て適切に表示されなくなるので注意しましょう。

ボタンブロック


リンクボタンなどを追加できるブロックです。デフォルトでは、角丸と長方形からボタンデザインを選択できます。挿入すると、テキスト入力とURL入力欄が同時に表示されます。ボタンサイズやデザインなどを細かく変えたい際は、CSSで別途設定を行いましょう。

埋め込み系ブロック


外部サービスから、メディアを埋め込めるブロックです。埋め込める種類は多く、

  • Youtube
  • Twitter
  • Facebook
  • Instagram
  • Spotify

などのメディアを直接WordPress内に挿入可能です。たとえば「Youtube」から、動画を埋め込んで表示させたい場面は多いでしょう。その際は埋め込みブロックを使えば、簡単に動画が追加できます。

再利用ブロック


オリジナルのデザイン設定を使いまわしたい場合などに、役立つブロックです。選択したブロックに表示される三本線メニューをクリックし、「再利用ブロックに追加」をクリックすると名前入力欄が表示されます。名前を入力して保存すると、追加可能ブロック一覧に登録したブロックが表示されます。登録したブロックをクリックすると、まったく同じ表示でブロックが追加できるので便利です。ただし再利用ブロックは、そのままの状態では編集できません。編集したい場合は、ブロック選択時に表示される三本線メニューから「通常のブロックへ変換」を押しましょう。

Gutenbergのカスタマイズでより使いやすくしよう


Gutenbergをもっと使いやすくしたい場合は、別途プラグインをインストールすると便利です。ここでは、おすすめのカスタマイズツールをご紹介していきます。

  • Snow Monkey Blocks
  • Premium Blocks for Gutenberg

どちらもWordPressダッシュボード内から、簡単にインストール可能です。

Snow Monkey Blocks


「Snow Monkey Blocks」は、日本人が開発したGutenberg用プラグインです。

  • アラート
  • 吹き出し
  • スライダー

など複数のボックスを追加できます。日本人が開発している分、最新情報が分かりやすいのもメリットです(公式プラグイン説明などは英語です)。ただしこのプラグインは、有料テーマ「Snow Monkey」との連携を前提に制作されています。Snow Monkey以外でも利用できますが、不具合が出る可能性があるので注意してください。

Stackable


「Stackable」は、インストール数も多く評価の高い人気プラグインです。

  • アコーディオン
  • CTA(Call To Action)
  • カード

などのブロックを追加して利用可能です。凝ったデザインを追加しながら、編集ができます。有料版もありますが、無料版でも十分な機能を有しています。デザイン制作に徹底的にこだわりたい場合は、有料版の内容も確認してみましょう。
Gutenbergは、とりあえずまずは使ってみることが重要です。ぜひ先ほどご紹介したよく使う可能性が高いブロックや、ここでご紹介したプラグインでカスタマイズを行いながら、Gutenbergに慣れていってください。

どうしても旧エディタに戻したい場合


「Gutenbergより旧エディタのほうが扱いに慣れている」などの理由で、旧エディタをどうしても使いたい方もいらっしゃるでしょう。「Classic Editor」を使えば、旧WordPressと同じ編集画面で作業ができるようになります。
Classic Editorはダッシュボードから「プラグイン」→「新規追加」とたどり、表示されたプラグイン追加画面に「Classic Editor」と打てば表示されます(最上部に最初から表示される場合もあります)。ただしClassic Editorは2022年にサポートが終了する予定なので、いつまでも利用するわけにはいきません。Classic Editorはあくまで予備として考え、時間があるときにGutenbergの操作に慣れてメインで使えるよう学習することをおすすめします。

まとめ


今回はGutenbergとは何か、そしてそのメリットや使い方、カスタマイズ方法などをご紹介してきました。Gutenbergでは、初心者でも簡単に凝ったWebサイトが制作できるよう旧エディタからバージョンアップが図られています。最初は操作に戸惑うかもしれませんが、慣れていくと作業効率の点で大きなメリットがあるのに気付くでしょう。ぜひWordPress初心者もそうでない方も、Gutenbergを活用して楽しく編集作業をこなしてみてください。