WordPressエディタ「Gutenberg（グーテンベルグ）」の使い方を全解説

WordPressの「Gutenbergエディタ」とは、2018年にリリースされたWordPress5.0から、デフォルト搭載されているエディタの名前である。単に「ブロックエディタ」と呼ばれることも多い。

簡単に言うと、以下のように「ブロック」を配置していくことで、記事を完成させることができる。

それ以前のエディタ（クラシックエディタ）とは画面構成や操作感が大幅に変わったため、エディタ変更当初は「使いにくい」「従来のエディタに戻したい」という声が圧倒的に多かったように記憶している。

しかしGutenbergエディタはアップデートを繰り返し、現在ではかなり直感的に操作できる優秀で使いやすいエディタに進化している。

特に、今回3章で紹介している以下の「効率的に使う8つの方法」を駆使することで、Gutenbergエディタはかなり使いやすくなり、スピーディーな記事作成が可能となる。

Gutenbergエディタを効率的に使う8つの方法

❶ 半角スラッシュでのブロック挿入を活用する ❷ 画像はドラッグ＆ドロップで挿入する ❸ 見出しは＃で挿入できる ❹ アンカーリンクは右サイドバーで簡単に設定できる ❺ ブロックを把握し、使わないブロックは非表示にする ❻ キーボードショートカットを覚える ❼ 再利用ブロックを活用する ❽ エディタ拡張機能を備えたプログインやテーマを導入する

クラシックエディタでは高度なデザインをする際にHTMLやCSSの知識が必要であったが、Gutenbergエディタは拡張機能を駆使すれば、HTMLの知識がなくても優れたデザインのサイトを作成できる。

もし「まだクラシックエディタしか使ったことがない」という方がいたら、今回の記事を読んで、Gutenbergエディタを使ってみてほしい。ブロックエディタは使いにくい…というイメージが覆されるはずだ。

1. Gutenbergエディタの特徴と旧エディタとの違い

Gutenbergのブロックエディタには、3つの特徴がある。

• 専門知識がなくても、リッチなコンテンツ作成を可能にする
• インターフェースを改善し、画面全体を無駄なく活用する
• コンテンツ作成方法を統一する

それぞれについて、旧エディタと比較しながら、その特徴を解説していこう。

1-1. 専門知識がなくても、リッチなコンテンツ作成を可能にする

Gutenbergにはさまざまなブロックが用意されている。文章や画像をシンプルに配置するだけでなく、ブロックの種類と設定を使い分けることで、柔軟にコンテンツが作成できる。

たとえば「横並びのレイアウトを組む」「テキストの背景に画像を設定する」といった、これまではHTMLやCSSの知識が必要だったデザインも、ブロックによって簡単に実装できる。

1-2. インターフェースを改善し、画面全体を無駄なく活用する

編集画面でもっとも頻繁に使用するのは、コンテンツフィールド、つまり記事内容を入力するエリアだろう。

旧エディタでは、ページ上部に新規作成ボタン、タイトル入力ボックス、パーマリンクなどが置かれ、その下にようやくコンテンツフィールドがある。そして右サイドには、使用頻度の低い設定項目が常に表示されている。

種々の要素がコンテンツフィールドを圧迫するような、少しタイトな画面構成だ。

Gutenbergではインターフェースが全面的に見直され、記事作成に最適なレイアウトに改善された。画面左側にコンテンツフィールド、右側に文書設定＆ブロック設定エリアというシンプルな構成となっている。

1-3. コンテンツ作成方法を統一する

WordPressはとても柔軟なツールだ。コンテンツを作成する方法が豊富に用意されている。これまで多様化していた手段が整理され、基本的にはブロックを使えば対応できるということだ。

どのような方法で実装するかという選択に時間を使うことなく、最短で結果を得ることができる。

1-4. 今後のGutenbergエディタはと旧エディタの行方

現在、旧エディタを使うためには「Classic Editor」というWordPress公式プラグインを入れる必要がある。ちなみに、クラシックエディタのサポートは当初2021年末までとされていたが、現在は「2022年まで、さらに必要とあれば今後も」というアナウンスが出ている。そのため、まだ当面はクラシックエディタを使うこともできそうである。

しかしWordPressは、Gutenbergを単なるコンテンツエディタではなく「フルサイト編集」へ移行する長期目標を掲げている。つまり、投稿や固定ページだけでなく、サイトを全てブロックで編集できるようになる予定なのだ。

現時点で「旧エディタの方が使いやすい」と考えている方も、今のうちにGutenbergエディタに慣れておいた方が良いかもしれない。

2. Gutenbergエディタを使った基本的な記事作成方法

慣れてしまえば、Gutenbergエディタはとても簡単に直感的に操作することができる。基本的な記事作成の流れを順番に見ていこう。

2-1. WordPress管理画面から新規投稿画面を開く

まずはWordPressにログインし、管理画面から【投稿】➡【新規追加】を選ぼう。

デフォルトで、以下のようなGutenbergエディタ（ブロックエディタ）が開く。

2-2. 投稿のタイトルを追加

「タイトルを追加」の部分をクリックし、タイトルを入力しよう。

入力が完了すると、以下のように表示される。

2-3. 本文編集エリアでブロックを追加していく

本文編集エリアに「/」（半角スペース）を入力するか、右側にある「＋」アイコンをクリックする。

すると、以下のようにブロックメニューを開くので、追加したいブロックの種類を選択しよう。

例えばここでは、画像ブロックを挿入してみよう。「画像」を選択すると、画像をアップロードするかメディアライブラリから挿入するかなどを選べるので、ここではメディアライブラリから挿入しよう。

挿入したい画像を選んで「選択」を押すと、以下のように画像ブロックに画像を配置することができた。

次に、画像の下に表示させたい書き出し文を追加していこう。テキスト入力には「段落ブロック」を使うが、画面上に文章を入力するだけでも、自動的に段落ブロックとして扱われる。

2-4. ブロックの移動・並び替え

ブロックにカーソルを合わせると、上部に「移動アイコン」が表示される。「上に移動」を押せばブロックを上に移動でき、「下に移動」を押せば下に移動できる。

また、その左側にある、黒点が6つ並んだ「ドラッグアイコン」を使えば、ドラッグしてブロックを入れ替えることも可能だ。

2-5. ブロックのコピー・複製・挿入・削除

ブロックの詳細設定メニューから、ブロックのコピー・複製・挿入・削除が行える。

2-6. ブロック種類の変更

作成したブロックを、別の種類に変更することもできる。ブロック種類を変更するには、「ブロックタイプまたはスタイルを変更」アイコンをクリックし、変更したいブロックタイプを選択しよう。

2-7. 記事の情報を設定する

本文を編集し終わったら、投稿記事公開に向けて、記事の情報を設定していこう。

❶記事のパーマリンク（固有のURL）を設定する

パーマリンクは、投稿画面の右サイドバーから設定できる。右サイドバーが表示されていない場合は、歯車の「設定」アイコンをクリックして表示させよう。

すると、以下のように表示される。

少し面倒な仕様だが、新規投稿画面ではパーマリンクの入力欄が表示されないため、一度「下書き保存」を押して、記事を下書き保存する必要がある。

URLスラッグに、記事の内容を的確に表現する英単語とスラッシュの組み合わせを入力する。例えば今回の例では、「how-to-keep-cat」などを設定しよう。

※パーマリンクについては、「SEOに最適なWordPressパーマリンクの設定方法｜Googleの推奨条件に準拠しよう」を参考にしてほしい。

❷カテゴリーを設定する

カテゴリを設定するには、右サイドメニューのカテゴリーから該当するものを選ぼう。ここで新しいカテゴリーを追加することも可能だ。

❸アイキャッチ画像を設定する

アイキャッチ画像を設定するには、右サイドバーの「アイキャッチ画像」から設定しよう。

「アイキャッチ画像を設定」をクリックすると、画像選択画面が開くので、画像を選んで「アイキャッチ画像を設定」をクリックしよう。

すると、以下のように設定される。

2-8. 公開する

全ての設定が終わったら、右上の「公開する」ボタンをクリックしよう。

公開される前に、以下のような確認画面が表示されるので、内容を念のため確認しよう。

公開が完了すると、左下に「投稿を公開しました。」と表示され、URLアドレスが右側に表示される。これでGutenbergエディタを使った記事作成と投稿までが完了である。

3. Gutenbergエディタを効率的に使う8つの方法

2章で解説した通り、Gutenbergエディタを使った記事作成はかなり直感的に簡単に操作が可能だ。ここからは、さらに効率的にGutenbergエディタを使いこなすためのアイデアを8つ紹介していく。

Gutenbergエディタを効率的に使う8つの方法

❶ 半角スラッシュでのブロック挿入を活用する ❷ 画像はドラッグ＆ドロップで挿入する ❸ 見出しは＃で挿入できる ❹ アンカーリンクは右サイドバーで簡単に設定できる ❺ ブロックを把握し、使わないブロックは非表示にする ❻ キーボードショートカットを覚える ❼ 再利用ブロックを活用する ❽ エディタ拡張機能を備えたプログインやテーマを導入する

3-1. 半角スラッシュでのブロック挿入を活用する

Gutenbergエディタを効率的にスピーディに使うためには、できるだけマウスを使わずにブロックを扱うことがポイントとなる。

前述した通り、ブロック挿入方法には、半角スラッシュを入力するか「＋」をクリックするかの2つの方法がある。できれば、マウスを使わずに半角スラッシュでブロック入力する方法を覚えるとスピーディにブロック入力できる。

例えば画像ブロックを入力したい場合、「画像」の選択肢が最初にあるため、キーボードで「半角スラッシュ」を入力し、その後「Enter」を押すだけで画像ブロックを挿入できる。マウスは使わない。

また、2番目の選択肢の「見出しブロック」なら、キーボードの「↓（下矢印）」ボタンを押して「Enter」で挿入できる。ここでもマウスは使わない。

このようにマウスを使わずに本文を完成させていけば、かなりスピーディーに記事を作成できる。

3-2. 画像はドラッグ＆ドロップで挿入する

画像を挿入したい時は、画像ブロックを挿入する方法ではなく、ドラッグ＆ドロップでも挿入できる。

例えばデスクトップに保存されている画像を投稿に使いたい場合は、デスクトップにある画像アイコンを投稿画面にそのままドラッグすればスピーディーに画像を挿入できる。

3-3. 見出しは#で挿入できる

見出しブロックを挿入する代わりに、半角のシャープ（#）を見出しレベルの数だけ入力し、半角スペースを入力すると見出しを挿入できる。

• h1を挿入したい場合：半角シャープ（#）＋半角スペース
• h2を挿入したい場合：半角シャープ（#）2個＋半角スペース
• h3を挿入したい場合：半角シャープ（#）3個＋半角スペース
• h4を挿入したい場合：半角シャープ（#）4個＋半角スペース

3-4. アンカーリンクは右サイドバーで簡単に設定できる

従来のエディタでは、アンカーリンクを設定する際にはHTMLソースを開いて設定する必要があった。しかしGutenbergエディタなら、右サイドバーの「HTMLアンカー」で簡単に設定できる。

例えば「FAQ（よくある質問）」という見出しに「FAQ」というHTMLアンカーを付けるには、見出しをクリックして、右側のサイドバーのHTMLアンカーの欄に「FAQ」と入力するだけだ。

あとは、リンク元となる部分にリンクを設定する際に、リンク先を「#FAQ」と設定するだけでいい。

3-5. ブロックの種類を把握し、使わないブロックは非表示にする

使わないブロックを表示しない設定にすれば、普段使うブロックのみ表示されるので効率的に作業が進む。

設定するには、以下の手順で「ブロック設定画面」を表示させよう。まずエディタの右上にある、3つの黒点が縦に並んだアイコンをクリックし、「設定」をクリックしよう。

以下のような設定画面が開いたら、「ブロック」をクリックしてブロック設定画面へ。

ブロック設定画面の「表示ブロック」の部分で、表示したくないブロックのチェックを外せば、挿入時に表示されなくなる。

「6. Gutenbergエディタで使える主要なブロック一覧」で主なブロックの説明をしているので、できればどんなブロックがあるのか確認しておこう。その上で、使う予定がないブロックを非表示にすると効率的にエディタを使うことができる。

3-6. キーボードショートカットを覚える

良く使う操作についてキーボードショートカットキーを覚えれば、マウスを使った作業が減り、効率的に記事作成を行える。

なお、Shift＋Alt＋Hを押せばショートカットキー一覧を表示してくれるので、忘れた時には活用してみよう。

エディタショートカット

ショートカットの説明	Linux/Windows	MacOS
キーボードショートカットを表示する	Shift + Alt + H	control + option + H
変更を保存	Ctrl + S	⌘ + S
最後の変更を取り消す	Ctrl + Z	⌘ + Z
最後に取り消した変更を再実行する	Ctrl +Shift + Z	shift + ⌘ + Z
設定サイドバーを表示・非表示	Ctrl + Shift + ,	shift + ⌘ + ,
ブロックナビゲーションメニューを開く	Shift + Alt + O	control + option + O
ビジュアルエディタとコードエディタを切り替える	Ctrl + Shift + Alt + M	shift + option + ⌘ + M

ブロックショートカット

ショートカットの説明	Linux/Windows	MacOS
選択したブロックを複製する	Ctrl + Shift + D	shift + ⌘ + D
選択したブロックを削除する	Shift + Alt + Z	control + option + Z
選択したブロックの前に新しいブロックを追加する。	Ctrl + Alt + T	option + ⌘ + T
選択したブロックの後に新しいブロックを追加する。	Ctrl + Alt + Y	option + ⌘ + Y

テキスト整形

ショートカットの説明	Linux/Windows	macOS
選択したテキストを太字にする	Ctrl + B	⌘ + B
選択したテキストをイタリック体にする	Ctrl + I	⌘ + I
選択したテキストをリンクに変換する	Ctrl + K	⌘ + K
リンクを削除する	Ctrl + Shift + K	shift + ⌘ + K
選択したテキストに打ち消し線を追加する	Shift + Alt + D	control + option + D
選択したテキストを等幅フォントで表示する	Shift + Alt + X	control + option + X

3-7. 再利用ブロックを活用する

詳しくは次の4章で解説するが、再利用ブロックを設定しておくと、CTAなど共通のパーツを自分で作成し、簡単に呼び出して複数記事内に設置することができる。

ぜひ再利用ブロックを活用し、Gutenbergエディタを使いこなしてほしい。

3-8. エディタ拡張機能を備えたプラグインやテーマを導入する

直感的に使えるGutenbergエディタだが、文字色や背景色をブロックごとにしか変えられないなど、まだまだ「使いづらい」と感じてしまう側面もある。

しかし、エディタ拡張機能を備えたプラグインやテーマを導入することで、かなり使い勝手が向上する。例えば、無料で使えるWordPressテーマ「CoCoon」を導入すれば、記事投稿画面でできることがかなり増える。

拡張機能を導入したい方は、「5. Gutenbergエディタを拡張できるテーマ・プラグイン3選」を確認してほしい。

4. 再利用ブロックを活用して共通パーツを記事に設置しよう

再利用ブロックとは、特定のブロックの組み合わせを設定を保存して活用できる便利な機能である。

例えば、画像と文章とボタンを組み合わせ、文字サイズ・背景色・画像などをあらかじめ設定しておけば、記事作成時に呼び出して使用できる。

なお、「再利用ブロック」のまま記事に配置すれば、元のブロックを変更した時に更新される「共通パーツ」として利用できる（個別の変更はできない）。

また、再利用ブロックを配置後に通常のブロックに変換すれば、内容を自由に変更することが可能である。

4-1. 再利用ブロックの使い方

まずは、再利用ブロックの使い方を簡単に説明していこう。

❶再利用ブロックを作成する

ブロックを組み合わせて、コンテンツを作成する。ここでは、商品名・商品画像・説明文・カート追加ボタンをひとかたまりとして、再利用ブロックに設定する例を想定しよう。

まずは、以下のようなブロックの組み合わせを、エディタで作成する。「ここに商品名を入力」は通常の段落で、その下の猫の写真と説明文はカラムで2分割にして、一番下の「カートに追加する」はボタンブロックを挿入して作成した。

❷再利用ブロックに追加する

以下のように、保存したいブロックを全て選択する。

その状態で、上部のオプションメニューをクリックし、「再利用ブロックに追加」をクリックしよう。

以下のような保存画面が出るので、任意の名前を付けて「保存」をクリックしよう。

ここでは、「商品名・画像・カートに追加ボタンのセット」と入力して保存した。

❸保存した再利用ブロックを呼び出して挿入する

保存した再利用ブロックは、別の投稿記事からも呼び出すことができる。

例えば、また新しい新規投稿記事を作成してみよう。本文編集エリアで半角スラッシュを入力してブロック挿入メニューを表示させると、先ほど保存した「商品名・画像・カートに追加ボタンのセット」を選べるようになっている。

挿入すると、以下のように投稿画面に先ほど作ったブロックの組み合わせが表示される。

❹通常のブロックへ変換して編集する

再利用ブロックは共通パーツなので、このままでは内容を編集できない。

上部にあるオプションメニューから「通常のブロックへ変換」をクリックし、編集可能な状態に戻そう。

あとは、通常のブロックのように編集して、記事を完成させよう。

4-2. 再利用ブロックの活用例

再利用ブロックは、サイト内の複数ページで何度も繰り返し利用するコンテンツと相性がいい。使い方の例をいくつか紹介しよう。

❶ボタン

お問い合わせページへリンクするボタンなど、利用頻度の高いものは再利用ブロックに登録しておくと便利だ。

❷バナー

画像ブロックに、HTML編集で<a>タグを追加することで、リンク付きのバナーが作成できる。記事内で繰り返し使うバナーは、再利用ブロックに登録しておこう。

まず、画像ブロックでバナー画像を挿入し、HTML編集画面を開く。

そして、画像の前後にリンクタグを追加する。

<a href=”リンク先URL” target=”_blank”>画像</a>

再利用ブロックに保存すれば、簡単にバナーを挿入できる。

❸強調ブロック

テキストに装飾を加えることで、強調したい部分を目立たせることができる。段落ブロックをHTML編集して、再利用ブロックに登録しておこう。テキストの前後にdivタグを追加し、style属性でCSSを設定する。

プレビューを確認しながら、CSSを調整しよう。

❹項目名が決まっている表

たとえば飲食店を紹介するブログで、記事ごとに店舗情報が必要だとしよう。

「店名・住所・営業時間・定休日・電話番号」というふうに、項目名のみ入力したテーブルを再利用ブロックに登録すれば、テンプレートとして使い回せる。

4-3. 再利用ブロックを編集する時の注意点

再利用ブロックを作成し、その後、「再利用ブロックを管理」を選択すると、デザインを編集することができる。この時に気を付けて欲しいのは、既に挿入している再利用ブロックのデザインも一括で変更される点である。

例えば、再利用ブロックに使用している赤いボタンを青いボタンに変更したら、挿入済みのボタンの色も全て変更される。

一方、再利用ブロックを挿入後に通常ブロックに変更した場合は、元の再利用ブロックの色を変更しても影響は出ない。

5. Gutenbergエディタを拡張できるテーマ・プラグイン3選

直感的に使えるGutenbergエディタだが、文字色や背景色をブロックごとにしか変えられないなど、まだまだ「使いづらい」と感じてしまう側面もある。そこで導入してほしいのが、エディタ機能を拡張できるテーマやプラグインだ。

これらを導入すれば、記事投稿画面でできる装飾の選択肢が増え、より便利にGutenbergエディタを使いこなせる。

なお、WordPressプラグインの詳しいインストール方法や、他のおすすめプラグインも知りたい方は、「絶対に導入しておきたいWordPressプラグイン7選＋8選」の記事も参考にしてみてほしい。

5-1. 無料WordPressテーマ「Cocoon」

WordPressテーマ「Cocoon」は、無料ながら高機能なWordPressテーマであり、レンタルサーバーをロリポップで導入した場合にデフォルトでインストールされるテーマでもある。

通常のGutenbergエディタでは、投稿画面において、文字単位でできることは「太字への変更」や「斜体にする」ぐらいしかできない。ブロック単位で文字色を変えることは可能だが、一部の色を変更することもできない。

しかし、テーマに「Cocoon」を用いれば、以下のように、文字単位で色の変更・マーカーを引く・文字サイズ変更などさまざまなことが可能となる。

また、Cocoon専用ブロックも21種類用意されており、付箋風のボックスを挿入したり、顔アイコン入りの吹き出しを設置したり、ブログカードを簡単に挿入したりできる。HTML知識がなくても、誰でも簡単にシンプルなデザインのパーツを用意できる。

Gutenbergエディタ拡張機能を持つ無料テーマを使いたい方は、ぜひ活用してみよう。

ただし、気に入っているWordPressテーマがあり、テーマを変更したくない方も多いだろう。その場合は、以下のプラグインを検討してみてほしい。

5-2. 無料プラグイン「Snow Monkey Editor」

プラグインなら、どのWordPressテーマを使っていても使える。そのため、WordPressテーマを変更することなく、Gutenbergエディタをさらに使いやすくしたい方におすすめだ。

「Snow Monkey Editor」は、投稿画面上で、文字単位での大きさを変えたり、特定の箇所だけ文字色を変えたりできるため、クラシックエディタに近いイメージでブロックエディタを使えるようになる。

さらに、30種類の拡張ブロックを追加で使うことが可能だ。

例えば、コンテンツの一部を折りたためるアコーディオン表示や、警告文などを表示するブロック、飲食店のメニューに使えるブロック、問い合わせフォーム、資料請求や問い合わせに使えるボタン、マーカー風のハイライト表示など、さまざまな表現が可能になる。

WordPressテーマを変えずにブロックエディタをより使いやすくしたい方はぜひ使ってみて欲しい。

5-3. 無料プラグイン「Spectra」（多彩な追加ブロックが魅力）

「Spectra」（旧名称：「Ultimate Addons for Gutenberg」）は、ブロックエディタ拡張プラグインの中でも、特に多くのユーザーからの支持を集めている人気のプラグインである。

Spectraをインストールすると、サイトデザインに使える実用的な27種類の独自ブロックを使えるようになる。例えば、グリッドレイアウトのブロック、横方向にスライド表示できるブロック、複数のボタンを並べて表示できるブロック、アイコン・見出し・説明文をセットにしたブロック、タイムライン風ブロックなど、多彩なパーツが用意されている。

また、見出しや画像、箇条書きリストなども、あらかじめ優れたデザインに最適化されている。デザイン性に優れた記事を簡単に作成したいという方はぜひ活用してみよう。

6. Gutenbergエディタで使える主要なブロック一覧

Gutenbergエディタには、多種多様なブロックが用意されている。

ブロックを組み合わせることでHTMLやCSSの知識がなくても、彩りのあるデザインや読みやすいレイアウト、動画やSNSとの連携など、表現豊かな記事作成ができる。

6-1. ブロックには5種類がある

ブロックには、一般ブロック・マーケット・レイアウト要素・ウィジェット・埋め込みの5種類がある。

一般ブロック

もっとも使用頻度が高いブロック。通常の記事なら、ほぼ一般ブロックのみで作成できるだろう。

ブロック名	役割
段落	文章を入力する
見出し	H2などの見出しを入力する
リスト	リストを入力する
画像	画像を挿入する
ギャラリー	複数の画像を並べて挿入する
引用	引用ボックスを挿入する
動画	動画を挿入する
音声	再生可能な音声ファイルを挿入する
ファイル	ダウンロード可能なファイルを挿入する

フォーマット

HTMLやテーブルなど、さらに表現を広げるためのブロック。

ブロック名	役割
カスタムHTML	HTMLコードを入力する
テーブル	テーブルを挿入する
整形済み	改行や半角スペースなどをそのまま表示する
ソースコード	ソースコードをそのまま表示する
クラシック	旧エディタのTinyMCE機能で編集する
プルクオート	引用ブロックを挿入する
詩	改行や半角スペースなどをそのまま表示する

レイアウト要素

レイアウトを整えるためのブロック。

ブロック名	役割
ボタン	ボタンを設置する
カラム	２カラムのレイアウトでコンテンツを配置する
メディアと文章	画像とテキストを横並びで配置する
続きを読む	アーカイブに表示するテキストを設定する
改ページ	コンテンツを複数のページに分ける
区切り	区切り線を挿入する
スペーサー	余白を挿入する

ウィジェット

ウィジェットを記事内に設置するためのブロック。

ブロック名	役割
ショートコード	ショートコードでコンテンツを追加する
アーカイブ	月別アーカイブページへのリンクを挿入する
カテゴリー	カテゴリー別アーカイブページへのリンクを挿入する
最新のコメント	最新のコメントを挿入する
最新の記事	最新記事へのリンクを挿入する

埋め込み

サイト外のコンテンツを埋め込むためのブロック。対応する34種類から、一部を紹介する。

ブロック名	役割
YouTube	YouTubeの動画を埋め込む
Instagram	Instagramの記事を埋め込む
WordPress	WordPressの記事を埋め込む

以上のブロックを活用して記事を作成する。 それでは順番に詳しく見ていこう。

6-2. 段落

役割　…　文章を入力する

タグ　…　<p>

6-3. 見出し

役割　…　見出しを入力する

タグ　…　<h2>　<h3>　<h4>　<h5>　<h6>

6-4. リスト

役割　…　リストを作成する

タグ　…　<ul>　<ol>

番号付きリストと番号なしリストから選択できる。

6-5. 画像

役割　…　画像を挿入する

タグ　…　<img>

パソコンからアップロードや、メディアライブラリから選択するほか、画像を画面上にドラッグして直感的にアップロードすることもできる。

挿入した後は、画像の右と下にある青丸をドラッグすることで、サイズ変更できる。

6-6. ギャラリー

役割　…　複数の画像を挿入する

タグ　…　<ul>のリストで<img>が並ぶ

複数の画像を選択し、横並びで表示する。

レスポンシブ時は自動で画像幅を調整してくれる。

6-7. カバー

役割　…　背景画像つきのテキストを入力する

タグ　…　<div>　<p>　（画像はbackground-imageに設定される）

背景画像には、半透明のオーバーレイが重なっている。

オーバーレイの色は、右サイドメニューから変更できる。

6-8. 引用

役割　…　引用ブロックを挿入する

タグ　…　<blockquote>

6-9. 動画

役割　…　動画を挿入する

タグ　…　<video>　<iframe>

mp4などのファイルをアップロードできるほか、URLを入力するだけでYouTube動画を埋め込むことも可能だ。

さらに、ポスター画像を設定することで、動画のサムネイル画像を変更できる。

6-10. 音声

役割　…　音声ファイルを挿入する

タグ　…　<audio>

mp3などの音声ファイルを挿入し、記事上で再生できる。

6-11. ファイル

役割　…　ダウンロード可能なファイルを挿入する

ファイルを選択すると、ファイル名とダウンロードボタンが挿入される。

画像、文書、zipなど、さまざまなファイルに対応している。

6-12. カスタムHTML

役割　…　HTMLコードを挿入する

プレビューを選択すると、その場で表示を確認できる。

6-13. テーブル

役割　…　テーブルを挿入する

タグ　…　<table>

行数と列数を指定し、生成ボタンをクリックする。

テーブルが挿入されるので、テキストを入力。

テーブルブロックのセルは、すべて<td>で生成される。

項目名には通常<th>タグが使われることが多いが、テーブルブロックの設定では<th>を選択できない。

<th>タグを使いたい場合は、HTMLを直接編集しよう。

6-14. 整形済み

役割　…　改行や半角スペースなどをそのまま表示する

タグ　…　<pre>

6-15. ソースコード

役割　…　ソースコードを表示する

タグ　…　<pre> の中 <code>

HTMLなどのコードを変換せず、そのままテキストとしてブラウザ上に表示する。

6-16. クラシック

役割　…　旧エディタの機能を使う

旧エディタのTinyMCEを使って、記事編集ができる。

入力中に ctrl + Z （command + Z）で取り消すとブロックごと消えてしまう場合があるので、取り消すときはツールアイコンをクリックしよう。

6-17. プルクオート

役割　…　引用ブロックを挿入する

タグ　…　<figure> の中の <blockquote>

blockquoteタグが挿入されるため、用途としては引用ブロックと同じだろう。

通常の引用ブロックよりも大きな文字で表示されるため、さらに強調する場合などに使おう。

6-18. 詩

役割　…　詩を書く

タグ　…　<pre>

WordPress公式の説明は以下のとおり。「詩ブロックは、詩を書くのに理想的です」とのことだ。

The verse block is ideal for writing poetry on your site.

引用元 : https://en.support.wordpress.com/wordpress-editor/blocks/verse-block/

使用されるHTMLタグは<pre>なので、整形済みテキストと改行や半角スペースなどがそのままブラウザ上に反映される。

また、横スクロール機能がデフォルトでついている。

6-19. ボタン

役割　…　ボタンを設置する

タグ　…　<a>

テキスト、リンク先、色や形などのスタイルを設定できる。

6-20. カラム

役割　…　２カラムのレイアウトでコンテンツを配置する

下図は「見出し・画像・テキスト・テーブル」を並べた例。

レスポンシブ時は縦並びになる。

6-21. メディアと文章

役割　…　画像とテキストを、横並びで配置する

6-22. 続きを読む

役割　…　アーカイブに表示する抜粋文を設定する

このブロックよりも前にあるテキストが、抜粋文としてアーカイブに表示される。

アーカイブページでは、このようにテキスト１のみ抜粋表示される。

6-23. 改ページ

役割　…　コンテンツを複数のページに分ける

このブロックの前後で、コンテンツが別のページに分割される。

ページを増やす場合は、改ページブロックをさらに追加しよう。

記事ページには、自動的にページネーションが追加される。

6-24. 区切り

役割　…　区切り線を挿入する

タグ　…　<hr>

6-25. スペーサー

役割　…　余白を挿入する

タグ　…　<div>

右サイドバーの設定から、余白の高さを設定できる。

6-26. ショートコード

役割　…　ショートコードでコンテンツを追加する

6-27. アーカイブ

役割　…　月別アーカイブページへのリンクを挿入する

6-28. カテゴリー

役割　…　カテゴリー別アーカイブページへのリンクを挿入する

6-29. 最新のコメント

役割　…　最新のコメントを挿入する

6-30. 最新の記事

役割　…　最新記事へのリンクを挿入する

6-31. 埋め込み

役割　…　動画やSNSなど、サイト外のコンテンツを埋め込む

埋め込み方法は、各ブロックにURLを入力し、挿入ボタンをクリックするだけだ。

34種類の埋め込みブロックが用意されている。

その中から一部を紹介しよう。

YouTube

YouTubeの動画を埋め込むことができる。

Instagram

Instagramの投稿を埋め込むことができる。

WordPress

WordPress記事ページの、ブログカードを挿入することができる。

7. Gutenbergエディタに関するよくある質問

最後に、Gutenbergエディタに関するよくある質問をまとめてみた。特に、旧エディタからグーテンベルグエディタに移行したい方は良く確認しておくとよいだろう。

7-1. クラシックエディタで作った記事を開くとどうなる？

旧エディタで作成した記事をGutenbergで開くと、自動的に記事全体が「クラシックブロック」へ変換され、開くことができる。

つまりこのブロックの中では、旧エディタと同じ要領で記事編集ができる。

ただし、全体を選択して「ブロック変換」を行うと、個々の要素がブロックに変換されるため、直接HTMLで編集していたデータが消えることがある。

7-2. 旧エディタで書いた記事をGutenberg仕様に変換できる？

旧エディタで作成した記事をGutenbergエディタで編集したい場合は、クラシックブロックを各ブロックに分割、変換しよう。

まず、メニューから「ブロックへ変換」を選択する。

すると、クラシックブロックで統合されていたコンテンツが分割され、見出しブロックや段落ブロックなど、それぞれに対応したブロックに自動変換される。

7-3. 旧エディタで書いた記事を変換できないんだけど？

複数のブロック要素が<div>などで囲まれていると、ブロック変換ができない。

たとえば上記のように「見出し <h2>」と「テキスト <p>」が、<div>タグで囲まれていると、見出しとテキストがまとめてカスタムHTMLブロックとして変換されてしまう。

この場合は<div></div>を削除して、メニューからもう一度「ブロックへ変換」すれば、見出しブロックと段落ブロックに分割できる。

<div>だけではなく<section>タグなどでも同様の現象が起こるので、ブロック変換がうまくいかないときは、HTMLソースを確認してみよう。

7-4. 旧エディタに戻したい場合はどうすればいい？

無料のWordPressプラグイン「Classic Editor」を使えば、旧エディタに戻すことができる。

どうしてもGutenbergに慣れないという人は、「Classic Editor」をインストールしよう。

https://wordpress.org/plugins/classic-editor/

7-5. カスタムフィールドが表示されない場合の対応は？

デフォルトの状態では、記事編集画面にカスタムフィールドが表示されていないため、オプションから表示設定する必要がある。

編集画面の右上アイコンからメニューを開き、「オプション」を選択する。

オプション画面の「詳細パネル」欄にカスタムフィールド名が並んでいるので、表示したいフィールドにチェックを入れる。

まとめ

この記事では、「Gutenbergエディタとは何か？旧エディタ（クラシックエディタ）との違いは何か？」から、具体的な使い方や効率的に使う方法まで詳しく解説してきた。

Gutenbergエディタを効率的に使う8つの方法

❶ 半角スラッシュでのブロック挿入を活用する ❷ 画像はドラッグ＆ドロップで挿入する ❸ 見出しは＃で挿入できる ❹ アンカーリンクは右サイドバーで簡単に設定できる ❺ ブロックを把握し、使わないブロックは非表示にする ❻ キーボードショートカットを覚える ❼ 再利用ブロックを活用する ❽ エディタ拡張機能を備えたプログインやテーマを導入する

直感的に使いやすくなったGutenbergエディタだが、さらにエディタ拡張機能を導入することで、HTML知識がなくても、誰でも簡単に記事を作成できる。

クラシックエディタに慣れている方でも、騙されたと思ってGutenbergエディタを使ってみてほしい。一度使い始めればブロックエディタの便利さに気付くはずである。