WordPressのブロックエディタ「Gutenberg（グーテンベルグ）」の使い方

WordPress5.0以上になるとGutenberg（グーテンベルグ）というブロックエディタが標準搭載されています。以前のクラシックエディタに慣れていた方からすると、UIと操作方法が大きく変更されていて、不便に感じる方も少なくないでしょう。弊社カスタマーサポートにもエディターの仕様に関する問い合わせを数多くいただきます。

最近ではクラシックエディタに戻したいという要望より、ブロックエディタの使い方に関するご質問が増えております。ということで、本項では、グーテンベルグの基本的な仕様や使い方を説明いたします。

※元のエディターに戻したい場合は下記のプラグインを導入してください。
→Classic Editor

Gutenberg（グーテンベルグ）とは

Gutenberg（グーテンベルグ）とは、WordPress5.0（2018年12月6日リリース）以降に搭載されたブロックエディタの名称です。活版印刷技術の発明者といわれたドイツ出身のヨハネス・グーテンベルクからとった名称で、パブリッシング体験の革命を目標として開発されています。

ブロックエディタですので、基本的に「ブロック」ごとにページをつくっていきます。見出し、本文、画像、HTMLコードなど様々なブロックを足したり引いたりして、組み合わせていく感じです。

これからGutenbergの解説をしていきますが、動画解説の方が良い場合はこちらをご覧ください。すべての機能を網羅したせいで1時間超えの長編となっています（コメント欄にタイムテーブルあり）。

Gutenberg（グーテンベルグ）の仕様とページ作成の流れ

編集画面

従来のエディターとは全く異なる編集画面になりますが、ブロックや文章を入力するエリア以外は、基本的に従来と同じ使い方が可能です。

※こちらの画面はTCDのテーマを例にしておりますので、その他のテーマを適用している場合、一部表示が異なる場合があります。なおGutenberg（グーテンベルグ）の仕様上、TCDオリジナルのクイックタグ機能は、ブロックエディタではご利用いただけなくなります。ご活用いただく場合は、Classic Editorを適用いただくか、ページビルダー内にてご利用くださいませ。

便利な設定

いくつか実用的な機能をご紹介いたします。

編集画面右上の図の箇所をクリックすると、メニューが表示されます。

ページビルダー機能

TCDオリジナルのページビルダーに切り替える際は、上記赤枠のエディターの箇所から変更いただけます。

スポットライトモード

編集しているブロックのみを目立たせることができる機能です。

フルスクリーンモード

テキストエディターの集中執筆モードのような機能で、余分なエリアを非表示にし、フルスクリーンで表示できる機能です。

1.ブロックの追加

Gutenberg（グーテンベルグ）では、ブロックを追加し、ブロックの種類を選び、作成したコンテンツを装飾するという流れを繰り返して一つのページを組み立てていきます。

編集画面の＋のマークをクリックし、新しいブロックを追加すると下記の6種類から任意の形式を選択可能です。各項目の説明は後述します。

• インライン要素
• 一般ブロック
• フォーマット
• レイアウト要素
• ウィジェット
• 埋め込み

2.ブロックの編集

デフォルトの画面に文章を入力すると、編集画面右側の項目が文書からブロックに変更されます。

新たな文章を別ブロックで作成する場合や、画像や見出しなどを挿入したい場合は、＋ボタンをクリックし新規のブロックを追加します。必要な項目があれば、その都度新しいブロックを追加していくイメージです。

また記事をしばらく書き進めた後に、箇条書きに変更したいときや、見出しに変更したい場合があると思います。Gutenberg（グーテンベルグ）では、後からでも互換性の高いブロックに関しては、ワンタッチで切り替えることが可能です。

3.ブロックの装飾

ブロックを選択するとそのブロックごとに文字サイズや文字色、背景色を任意に変更することが可能です。

基本的にブロックごとにしか装飾はできませんが、段落内では、太文字、イタリック、リンク、打ち消し線のみインラインで装飾可能です。

ブロックの種類と用途

インライン要素

インライン要素の項目には、インライン画像が唯一用意されています。文中に画像を挿入したい時に使います。

一般ブロック

一般ブロック内には10種類の項目が用意されています。

段落

文章を書く時に使用します。デフォルトの状態で、タイトルの下に文章を打つと自動的に段落ブロックが適用されます。

見出し

見出しタイトルをつける時に使用します。ブロックを選択した後に、H2〜H6から選択できます。テキストの配置も左右、中央から選択可能です。

リスト

箇条書きを作成できます。黒丸か数字を表示するかを選択可能です

画像

画像を挿入するためのブロックで、表示されている青い丸をドラッグするとリサイズすることができます。キャプションも入力可能です。

ギャラリー

複数の画像ギャラリーを直感的に作成できます。画像ごとにキャプションを入力可能で、レスポンシブ対応です。

カバー

背景画像を設定できます。テキストを入力可能で、画像自体に文字を入力するのではなく、テキストの背景に別で画像を設定できます。

引用

引用元を記載できます。引用内容と引用元のURLを入力できるエリアがデフォルトで用意されています。

音声

音声ファイルを挿入できるブロックです。自動再生や、ループ再生を設定可能です。

ファイル

メディアファイルをダウンロードするためのリンクを挿入できます。別ウィンドウで開く設定や、ダウンロードボタンの設置の有無、ボタンの文言の変更など自由に設定可能です。

動画

サーバーにアップロードされている動画を埋め込むことができます。キャプション、自動再生、ループ再生、ミュートに加えて、動画を再生するまで表示されるポスター画像を設定することも可能です。

フォーマット

フォーマットには7種類の項目が用意されています。

クラシック

以前のエディターを使用できるブロックです。

ソースコード

コードをテキストとして読み込んで表示するブロックです。コードをそのまま表示できるので、チュートリアル系の記事作成などに便利です。

カスタムHTML

HTMLを直接入力する際に使用します。

整形済みテキスト

改行や特殊文字をそのまま表示できるブロックです。

プルクオート

テキストの引用に視覚的強調を施すスタイルが自動で適用されているブロックです。通常の引用より目立たせる仕様になっています。

テーブル

テーブルを作成できるブロックです。通常の枠で囲うタイプと、行ごとに色分けするタイプが選択できます。

詩

文章を入力できるブロックです。verse（詩）というクラスが適用されます。

レイアウト要素

レイアウトを設定できる項目が7種類用意されています。

ボタン

ボタンを設置できるブロックです。丸型、四角、縁取りボタンの3種類から選択できます。

カラム

カラム数を設定できるブロックです。ブロックを選択した後に、編集画面右側で6カラムまで設定できます。

メディアと文章

画像と文章を並べて表示できるブロックです。左右変更可能。

改ページ

改ページするためのブロックです。

続きを読む

「続きを読む」のリンクを表示させるブロックです。

区切り

区切り線を表示するためのブロックです。短い線、カラム全体を区切る線、ドットで区切るタイプの3種類から設定可能です。

スペーサー

空白を入力するためのブロックです。空白の高さは直感的にも操作可能で、数値を入力して微調整することもできます。

ウィジェット

ウィジェットのブロックには下記5つの項目が用意されています。

ショートコード

ショートコードを挿入できます。

アーカイブ

投稿のアーカイブリストを表示できます。

カテゴリー

カテゴリー一覧リストを表示できます。

最新のコメント

最新のコメントを表示します。

最新の記事

最新の記事リストを表示できます。

埋め込み

外部リソースのコンテンツを埋め込むことができます。Twitter, Facebook, Instagram, Youtubeなど主要SNS以外にも、WordPressはもちろん、計34種類用意されています。

まとめ

WordPressのブロックエディタ「Gutenberg」の基本操作を解説しましたが、いかがでしたでしょうか。Gutenbergは高機能であることには間違いありません。使いこなすことで、これまで簡単にできなかったことが簡単になるエディタです。

WordPress公式によるとClassic Editorプラグインのサポートは今後も永続的に続けるそうです。どちらも優れたエディタですので、場面によって使い分けていきたいですね。

ちなみに、筆者はWordPressのブロックエディタ歴2年、クラシックエディタ歴11年ですが、Gutenbergの使いやすさもだんだんとわかってきました。ただ、どちらにもメリット・デメリットはあるので、記事の性質によって使い分けるようにしています。

最後に

こちらの記事も参考にご覧くださいませ。