【最新版】Gutenbergの使い方！WordPress初心者でもわかる図解あり

WordPress5.0から正式採用された新エディター「Gutenberg（グーテンベルク）」。
エディターとは、WordPresで投稿や固定ページに文章を書く機能全般のことを指します。文章の入力はもちろん、文字修飾や表・囲み・ふきだし・画像挿入などの機能も含むのがエディターです。

新たなエディターであるGutenbergでは画像・動画をはじめとしたリッチコンテンツを、初心者でも簡単に使えるように、というコンセプトで開発されています。
とはいえ、初めてWordPressに触れる人や旧エディターでの編集に慣れた人は、使い勝手がわからず躊躇してしまうかもしれません。

今回は、WordPress初心者の方やGutenbergに戸惑っている方に、わかりやすく使い方を解説していきます。

Gutenbergとは？

Gutenbergは、WordPress5.0からデフォルトで適用された新エディターです。
Gutenbergという名前の由来は、14世紀に活版印刷技術を発明した「ヨハネス・グーテンベルグ」からきています。WordPressの開発者マット・マレンウェッグによると、活版印刷が本を通じて庶民にも読み書きを広げたことを指し、WordPressをWebの知識がない人にも広く普及させたいという意味が込められているとのことです。確かにGutenbergを使えば、WebサイトをつくるのがWebの知識がなくても可能で、ネーミングとして適していると言えます。

Gutenbergとそれまでの旧エディターであるClassic Editor（クラシックエディター）の主な違いは、コンテンツ作成方法・投稿画面の見た目、適用されるWordPressのバージョンです。

Gutenbergでは、ブロックという新しい概念が導入され、これまでのWordPressとは全く異なる記事作成の方法になります。Gutenbergでは、多種類のブロックを使い分けながら、さまざまなコンテンツ要素を追加して投稿を作成します。ただし、Classic Editorの特徴がなくなるわけではありません。Classic Editorにあったビジュアルエディターとコードエディターも継続して利用できます。つまりエディターの選択肢が増えたということです。

ブロックエディターの大きな特徴としては、文章や画像の位置調整やレイアウトの変更が、HTMLやCSSの知識がなくても簡単に行えるという点です。
また、定型文などを再利用できるブロックも追加されたため、より効率的にライティングが行えるようになっています。

投稿作成画面ではブロックは画面左側、作成したブロックや投稿の設定が右側に配置されています。メニューバーが投稿作成エリアの上にあるため、Microsoft社のWordを使う時と似たような感覚でコンテンツを作成できます。

Gutenbergの特徴

前述したように、ブロックという新しい概念を使うことで、リッチな記事を簡単に、かつ、直感的に作成することが出来るようになります。WordPress初心者やHTMLやショートコードの知識がない人にとっても使いやすいエディターとなっています。
ブロックごとに編集が可能となることで、画像の配置や場所の入れ替え、ブロック単位でのコピペや削除に加え、使用頻度の高いコンテンツを再利用ブロックとして登録しておくこともできます。
また、既存記事との互換性もサポートされており、既存のWordPressサイトをGutenbergに移行しても基本的に表示等の不具合が出ないように設計されています。

Gutenbergが採用された理由

WordPress 5.0以降でGutenbergが採用された主な理由は、以下の3つが挙げられます。

1. ①記事作成に最適な画面構成にするため
2. ②コンテンツ作成方法をブロックに統一するため
3. ③Webの専門知識がない初心者でも、見た目がよいWebサイトを作れるようにするため

理由を1つずつご紹介していきます。

①記事作成に最適な画面構成に改善するため

Gutenbergでは設定機能を左右に配置したことにより、Classic Editorよりも投稿を入力するエリアが広くなりました。入力エリアが広くなったことで記事作成をよりしやすく改善する意図があります。

長文のコンテンツを作成する人であるほど、作業時間が長くなるため、ユーザーインターフェースの使いやすさは作業効率への影響も大きいです。

②コンテンツ作成方法をブロックに統一するため

Classic Editorでコンテンツを作成する場合、作成方法をその都度選択する必要がありました。

Gutenbergではブロック機能ですべてのコンテンツを作成できます。毎回、作成方法を選択しなくてもよくなる点はメリットだと言えます。

③Webの専門知識がない初心者でも、見た目が凝ったWebサイトを作れるようにするため

HTMLやCSSに関する専門知識がないWeb制作の初心者であっても、色やフォントなど見た目の部分をカスタマイズした記事をより簡単に作れるようにする狙いもあります。

Classic Editorの場合、テキストの背景に画像を入れたり、画面のレイアウトを変更するといった高度なカスタマイズには、HTMLやCSSの知識が必須でした。

一方、Gutenbergなら専門知識がなくても、ある程度は直感的に操作が可能です。技術的な難易度を下げることによって、WordPressを使う人を増やすことのできる施策です。

Gutenbergでも基本的な使い方を把握すれば、さらに多彩なレイアウトや装飾などを駆使した個性的なWebサイトを手軽に作れるようになります。

旧エディターを使用したい人は「Classic Editor」プラグインを使おう

旧エディターの編集画面をプラグインなどでカスタマイズしていて、今後も旧エディターを継続して使用したいという人は、「Classic Editor」プラグインを使えば、今まで通り使用できます。公式によると、現状2022年末までサポートすると発表されています。
Classic Editorは、投稿を入力するエリアの上にメニューバーが存在し、Microsoft Wordと似ている画面構成となっています。投稿の設定（公開状態・カテゴリー・タグ・アイキャッチ画像などの設定）は右サイドバーに表示されます。
投稿入力エリアの表示方法は、ビジュアルエディターとテキストエディターの2種類があります。

「Classic Editor」には以下の長所があります。
基本的なテキスト装飾や画像挿入などの手順がGutenbergより少ないため、シンプルな記事なら素早く作成できる（ビジュアルエディター）
HTMLの知識があればカスタマイズしやすい（テキストエディター）
2022年2月現在、「Classic Editor」に戻す、あるいは「Classic Editor」と「Gutenberg」を併用する方法が選べます。

2021年末でWordPress側でのClassic Editorのサポートが終了予定でしたが、延期している状態です。しかし、今後Classic Editorを使えなくなる可能性があるため、今のうちにGutenbergに慣れておくことをおすすめします。Classic Editorに慣れすぎて、Classic Editorを使えない状態でいきなりClassic Editorが使えなくなってしまったら、困ることになるからです。

Gutenbergのインストール

Gutenbergは、WordPress5.0からはデフォルトエディターとなっていますが、プラグインとしてもリリースされています。
プラグイン版を利用することで、古いバージョンのWordPressのままでもGutenbergを使用することも可能です。
WordPressの管理画面のメニューのプラグインの新規追加画面で「Gutenberg」を検索しましょう。
プラグインが見つかれば、インストールして有効化してください。

Gutenbergの使い方

それでは、Gutenbergを実際に使っていきましょう。

Gutenberg編集画面と各メニューの説明

Gutenbergの編集画面は下図のようになっています。

編集画面

画面中央のスペースが記事を作成するための編集画面です。
旧ビジュアルエディターのように、コンテンツの配置や見え方を確認しながら編集することが出来ます。新規記事の編集を始める場合、タイトルボックスと段落ボックスが一つ挿入されています。

左上メニュー

編集画面左上には、記事の編集時に便利な「ブロックの追加」や「戻る」「進む」ボタン、記事の構成を確認できる「コンテンツ構造」、各ブロックに移動できる「ブロックナビゲーション」などのメニューがあります。まずはメニュー内にどのようなものがあるか触ってみるとよいでしょう。

右側サイドバーメニュー

編集画面の右側サイドバーには、作成している文書全般についてのメニューが表示されます。「カテゴリー」や「タグ」、「アイキャッチ画像」など、記事全体の設定を行います。カテゴリーやタグを使うことで記事の分類分けができます。またアイキャッチ画像はページを開いたときにページの先頭に表示される画像のことを指します。ページを開いた人の視覚的注目を集める上で重要な画像です。

また、特定のブロックを選択している状態では、そのブロックに関する設定メニューが表示されます。
記事全体のメニューに戻したい場合は、文書のタブをクリックするか、ブロック以外の場所をクリックします。クリックで選択している場所によってメニューが違うことには気づきにくいため、注意しましょう。

Gutenbergの基本操作

Gutenbergの基本的な使い方をご紹介します。この記事の文字を読むだけでなく、実際にGutenbergを触って操作しながら読むことをお勧めします。体感を伴う学習の方が覚えやすいです。
Gutenbergは、各要素をブロックという一つのまとまりにして扱います。

ブロックを追加して編集する

投稿入力画面左上の「＋」アイコンをクリックして、ブロック一覧を表示します。
カテゴリー毎にブロックが分かれていますので、プルダウンしながら必要なブロックを探します。
利用したいブロックが見つかったら、クリックしてエディターにブロックを追加します。

下図のように、追加するブロックの選択画面が表示されます。

まずは、普通のテキストを書くために、「段落ブロック」を選択してみましょう。
すると、記事の一番下に段落ブロックが追加されます。（特定のブロックを選択中は、そのブロックの直下に追加されます）

段落ブロックの詳細や各ブロックの詳細は後述するので、同じ手順でいくつか段落ブロックを追加してみましょう。

ブロックの位置を入れ替える

ブロックを選択すると、左側に３つのボタンが表示されます。このボタンでブロック同士の位置を簡単に入れ替えることができます。記事内での文章の配置を入れ替えるときに便利です。

上向きの矢印で一つ上に、下向きの矢印で一つ下に、真ん中の６つの点が並んだマークをクリックしながらマウスでのドラックアンドドロップで好きな箇所にブロックを移動させることができます。キーボード操作ではなく、マウスでの操作でできることで、初心者も扱いやすいと言えます。

任意の場所に新規ブロックを挿入・ブロックの複製

いずれかのブロックを選択中に、ブロックの上部のツールの右端のボタンから以下の操作が可能です。入力内容や装飾を維持したまま複製ができ、装飾を再利用するときに役立ちます。
また、（）内のショートカットキーでも同様の操作が可能です。
以下はMacでのショートカットキーで、Windowsの場合、CommandキーではなくCtrlキーで可能です。

• 選択中のブロックの複製（Shift + Command + D）
• 前に新規ブロックを挿入（Command + Option + T）
• 後ろに新規ブロックを挿入（Command + Option + Y）

また、ブロックにカーソルを合わせると、ブロックの中央上部に「＋」ボタンが表示されます。
これをクリックすることでも、そのブロック上部に任意のブロックを挿入することができます。

複数ブロックをまとめて操作・削除

構成を変えたい時など、複数のブロックに渡って操作・削除したい時があるかと思います。
そんな時は、テキストを選択する要領で複数のブロックを選択すると、選択中のブロックをまとめて操作したり削除することができます。単独ブロックを削除したいときは、ブロックメニューの詳細設定から、「ブロックを削除」をクリックするだけで削除できます。執筆の邪魔になるので、不要なブロックは削除しましょう。

記事の「プレビュー」「下書き保存」「公開」「更新」

記事の公開に関連する操作は、右上のメニューで行うことができます。

各ボタンの動作については、下記になります。

プレビュー

現在の記事の表示をブラウザ上で確認します。編集画面と実際の完成系の画面とでは見た目が違いますので、公開前には必ずプレビュー画面で見た目を確認しましょう。

下書き保存

作成中の記事を公開せずに下書き保存します。（保存しました、と表示されていれば自動保存済み）
自動保存機能はありますが、下書きは保存するようにしましょう。せっかく書いた記事がなくなってしまう事態を回避するためです。

公開

記事をWeb上に公開します。公開した後も下書きに戻すことは可能です。

更新

一度、公開中の記事への変更を更新します。
（記事を公開すると、公開ボタンが更新ボタンになります。）

基本的な操作はこれだけです。
とても直感的で簡単ですよね！
次は文書全体の設定方法を確認しましょう。

WordPress文書全体に関するメニューの使い方

作成中の文書全体に関する設定は、右側サイドバーの文書タブ内のメニューから変更できます。

ステータスと公開状態

公開状態

文書のWordPress管理画面上での公開状態を操作します。
WordPressの管理者が自分一人の場合は特に触る必要はありませんが、企業などで外部ライターに投稿してもらうなどに使用すると良いでしょう。

公開

文書を公開する際の、公開予約を設定できます。未来の日付で公開したい場合に便利です。今すぐ公開することもできます。

投稿フォーマット

投稿フォーマットを選択することが出来ます。
投稿フォーマット機能を使うことで、コンテンツの表示にバラエティを加えることができます。 WordPressには50以上の投稿フォーマット対応テーマが用意されていて、画像・動画・引用文・リンク・音声・アサイドスニペットといった異なる種類のコンテンツを、それぞれに適したデザインで掲載することができます。
中〜上級者向けの機能なので、初心者は無視しても問題ありません。

先頭に固定表示

WordPressの記事は基本的に投稿日時が新しい順に先頭から表示されます。
ただ、こちらにチェックを入れることで特定の記事を先頭に表示させることが出来ます。Webサイトを訪問してくれた人にまず読んでもらいたい記事を固定表示にしておくとよいでしょう。ブログであれば、自己紹介の記事などでしょうか。

レビュー待ち

寄稿者権限のユーザーが主に使用します。記事作成が完了し、サイト責任者からの公開前チェックを待っている状態です。ライターに記事作成を依頼して、ライターからのレビュー待ちの状態にするときに使いやすいです。

ゴミ箱に移動

編集中の記事をゴミ箱に移動します。記事作成している途中で記事削除したい場合にゴミ箱へ移動しましょう。

パーマリンク

記事のパーマリンクを設定します。
URLの入力欄に自由にパーマリンクを記述します。プレビューには、実際のWeb上で表示されるURLが表示されます。また、タイトルブロックを選択中のみ、上部にパーマリンク入力欄が表示されます。パーマリンクに日本語を指定していると、URLにも日本語が含まれ、場合によってはURLが文字化けすることもありますので、できればローマ字で設定するのがよいでしょう。

「パーマリンク設定」をクリックすると、管理画面のメニューの「設定」→「パーマリンク設定」の画面に移動します。

カテゴリー

編集中の記事が所属するカテゴリーを設定します。記事をカテゴリー分けしておけば、Webサイトを訪問した人が目当ての記事を探しやすくなります。
「新規カテゴリーを追加」から、記事編集画面からもカテゴリーを新規に追加することが出来ます。

タグ

編集中の記事にタグを設定します。
タグを設定することで、共通のキーワードに関連する記事を探しやすくなります。

アイキャッチ画像

記事一覧などで表示するアイキャッチ画像を設定します。
メディアライブラリから選択するか、新しい画像ファイルをアップロードします。画像のURLを指定して挿入することもできます。

抜粋

記事一覧ページなどで、記事タイトルと一緒に表示される記事の抜粋を設定します。
（デフォルトでは、メタディスクリプションとしての機能はありません。メタディスクリプションを設定したい場合は、All In One SEOなどのプラグインを使用しましょう）

ディスカッション

個別記事ごとのコメントやピンバック、トラックバックの許可に関する設定を行います。
サイト全体の設定を変更したい場合は「設定」→「ディスカッション」から変更することができます。

コメントを許可

投稿記事にサイト閲覧者がコメントを残せるかどうかの設定です。
スパムコメント対策で、手動承認やメール通知設定を行う場合は「設定」→「ディスカッション」から設定しましょう。

ピンバックとトラックバックを許可

投稿の参照元の記事にリンクを貼り、リンク先の管理者にリンクを設定した通知が届くという仕組みです。
ただ、現在では使用者が多くなく、スパムに利用される可能性もあるので、基本的にチェックは外しておいて問題ありません。
次からは、Gutenbergの各ブロックの詳細と使い方について具体的に見ていきましょう。

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

Gutenbergには、色々なブロックのフォーマットが用意されています。
これらを組み合わせることで、HTMLやCSSといった知識がない人でも、簡単にリッチな記事を書くことができます。

使用頻度の高いブロックの機能と使い方

ここからは特に使用頻度の高いブロックの使い方について簡単に解説していきます。

段落ブロック（pタグ）

段落ブロックは通常のテキストを作成するブロックです。
右側のメニューでは、ブロック全体の設定を行うことができます。

文字サイズの設定では、「小」「標準」「中」「大」「特大」から感覚から選択することもできますし、右側のボックスにポイントを指定することも可能です。目立たせたい文字を大きくするなど工夫するとよいでしょう。
ドロップギャップをオンにすると、下図のようにブロック先頭の文字を大きく表示することができます。（他のブロックの表示に影響することもあるので、プレビューを確認しましょう）

色設定の項目では、ブロック全体の背景色やテキストの色を変更できます。また、配色がサイト上で見辛い場合には、アドバイスもしてくれます。

最後の高度な設定に関しては、ブロックに適用したい追加CSSを設定することが可能です。
（CSSが何かわからない人は特に気きにする必要はありません）
ブロック上部のツールでは、テキストの配置や一部分のテキストを太字にしたりリンクを設定することができます。

画像ブロック（imgタグ）

画像ブロックでは、従来のように画像を挿入することができます。
従来の「アップロード」「メディアライブラリ」以外にも、「URLから挿入」という方法が追加されており、任意の画像URLを入力することで画像を挿入することができます。自分のパソコン内に画像をダウンロードせずとも、Web上にある画像を挿入することができます。ただし、Web上の他者の著作物を無断使用すると著作権違反になることもありますので、どの画像を挿入するかは注意しましょう。著作権フリーのものか確認した画像を挿入するようにしましょう。
また、ブロック上部のメニューから画像の配置を「左寄せ」「中央」「右寄せ」と簡単に変更することができます。

見出しブロック（hタグ

）

記事内の見出しを設定するブロックです。記事内の見出しはSEO評価にも影響を及ぼします。h2に検索ワードとしてヒットさせたい文字列を入れておくよう意識するとよいです。

見出しのレベル（h2〜h6）を右側メニュー及び上部のツールで簡単に選択できる他、HTMLアンカーを設定すると

見出しブロックの使い方

のように、id属性を設定することができます。
記事内でアンカーリンクを設定するときに便利ですね。

リストブロック（ul、olタグ）

箇条書き（順番なし・あり）を作成するブロックです。
上部のツールで順番なし、順番ありを切り替えられる他、インデントの上げ下げも簡単に行うことができます。

テーブルブロック（tableタグ）

表形式のコンテンツを作成するブロックです。
htmlで記述すると少し面倒なtableタグも、Gutenbergならブロック作成時に列数と行数を指定するだけで、簡単に作成することができます。

好きな列数と行数を指定して、生成をクリックすると、

このように、簡単にテーブルコンテンツを作成出来るので、とても便利です。
機能も充実しており、上部のツールから表全体の左寄せ・中央寄せ・右寄せできます。（もう一度、クリックで解除）

また、行・列の追加もクリック操作だけで簡単に行えます。

右側メニューでは、一般的な罫線式の表と背景色を用いたストライプ式の表を切り替えることができ、

「固定幅のテーブルセル」をオンにすると、列の幅を均等に配分してくれます。

よく使うブロックの機能の説明については以上です。
これだけでも、今までの記事作成よりも数段便利になりそうですね。
Gutenbergでは、上記以外にも便利なブロックが色々と用意してありますので、ぜひ自分でも色々と試してみてください。

ブロックタイプの変更について

記事を作成中にこんなことを思ったことはないでしょうか？
「普通の文章で書いていたけれど、箇条書きに変更したくなった」
「画像の横にテキストを追加したくなった」
今までだと、HTMLタグから変更する必要がありました。しかし、ブロックタイプを変更するたびにHTMLタグを変更するのは大変です。
Gutenbergでは互換性の高いブロックについては、「ブロックタイプ変更」機能で簡単に切り替えることが出来ます。

上の動画では、下記の３つの処理を行なっています。
「段落ブロック」から「見出しブロック」へ
「段落ブロック」から「リストブロック」へ
「画像ブロック」から「メディアと文章ブロック」へ
どんなブロックタイプにも変更できるわけではなく、そのブロックと互換性のあるブロックタイプへの変更しか出来ませんが、それでもHTMLタグから書き直す必要がないことを考えると、非常に便利です。

使用履歴からブロックを作成

よく使うブロックを探すのは面倒ですよね。
Gutenbergでは、ブロックを作成する時のメニューの一番上に最も使用頻度の高いブロックが9つまで表示されます。

Enterキーなどで新規に段落ブロックを作成したとき、右側に使用頻度の高いブロックタイプの上位3つまでが表示されるので、一々探す必要はありません。また、ブロックに「/」を入力することで、上位10個までのブロックタイプを表示することも出来ます。

便利な再利用ブロックの使い方

表などのコンテンツを別の箇所や他のページでも使い回したい場合もありますよね。
そんな時は、使いまわしたいコンテンツを再利用ブロックとして登録すれば、簡単に使い回すことが出来ます。似たような構成の記事をたくさん書く場合にとても便利な機能です。
再利用ブロックを登録するには、まず、登録したいブロックの上部ツールの三点メニューから「再利用ブロックに追加」を選択します。たったこれだけで、他の記事でもブロックを呼び出せます。

再利用ブロックの名称設定画面になります。

わかりやすい名前をつけて「保存」をクリックすれば登録完了です。
新規ブロック作成メニューの一番下に、「再利用可能」の項目が追加され、先ほど登録した再利用ブロックが見つかります。

ただし、再利用ブロックを編集すると、別の場所で使用している再利用ブロックにも変更が適用されることには注意してください。
次の動画のように、下のブロックだけを編集しても、上のブロックにも変更が反映されます。

その箇所だけを変更したい場合は、上部のツールから「通常ブロックに変換」をしてから行いましょう。

また、登録した再利用ブロックは、右上のメニューの中の「再利用ブロックを管理」の項目から管理画面に移動できます。

管理画面では、再利用ブロックの削除やJSON形式でのインポート・エクスポートを行うことが出来ます。

ブロックの編集画面では、記事作成と同じ感覚で再利用ブロックを編集することができます。
こちらで変更した内容は、記事内ですでに使用している再利用ブロックにも影響するので注意しましょう。

ブロックをHTMLとして編集

一部のブロックだけをHTMLとして編集したい場合、わざわざコードエディターに切り替える必要はありません。
上部のツールから「HTMLとして編集」を選択すると、そのブロックだけをHTMLで編集することが出来ます。
こちらから「HTMLとして編集」をクリック。

このように、ブロック内の要素がHTMLで編集できるようになります。

ビジュアル編集に戻す時は、再度、上部ツールから「ビジュアル編集」をクリックします。

これで、元どおり普通のブロックに戻りました。

特殊なブロック「クラシック」について

クラシックブロックは少し特殊なブロックです。
旧エディタである「TinyMCE」を使用することができ、複数のブロックをまとめて扱うことが出来ます。

また、クラシックブロックを挿入しなくても、コードエディタに直接HTMLを記述して、ビジュアルエディタに戻すと、クラシックブロックとして扱われます。

この時、divやsectionといった、通常のブロックではサポートされていないHTMLタグも使用することができます。

クラシックブロックを通常のブロック単位に分割

また、クラシックブロックに含まれる要素を、通常のブロック単位に分割することもできます。
やり方は簡単で、クラシックブロックのツールバーの三点メニューをクリックし、ブロックへ変換を選択するだけ。

すると、このようにそれぞれの要素がブロック単位に分割されます。

ちなみに、既存のサイトでGutenbergを有効化した場合、旧エディターで作成した記事は全てこのクラシックブロックにまとめられています。
クラシックブロックのままなら、問題ありませんが通常のブロック単位に変更する際には、divやsectionなどのタグが中身ごと消えてしまうなど、若干の影響が出る場合があります。
ブロック変換時の影響範囲について、詳しくは下記の記事を参考にしてください。

その他の機能について

ここからは、Gutenbergのその他の機能をご紹介します。

メニューの配置と表示/非表示の切り替え

Gutenbergの編集画面では、各種メニューやブロックのツールバーの配置や表示/非表示を簡単に切り替えることができます。

統合ツールバー

統合ツールバーを使用すると、ブロック上部のツールを左上の文書ツールと同じ位置に表示させることができます。

有効にすると、ブロック周りにツールバーが表示されなくなるのでスッキリします。

ただ、人によっては、ブロックの近くにツールがあった方がいい人もいると思うので、使用はお好みで。

スポットライトモード

スポットライトモードを使用すると、選択中のブロック以外の色が薄くなり、そのブロックに集中することができます。

フルスクリーンモード

フルスクリーンモードでは、WordPressの管理画面メニューの表示/非表示を切り替えることが出来ます。

サイドメニューの表示切り替え

サイドメニューも表示/非表示を簡単に切り替えることが出来ます。
右上の歯車マークをクリックしてみましょう。

コンテンツ構造の確認

左上メニューの◯の中にiがあるマークをクリックすると、見出しや段落のブロック数、見出し構成などを確認することが出来ます。

ブロックナビゲーション

左上メニューの右端のブロックナビゲーション機能では、ブロック単位のリストが表示され、クリックで選択すると、そのブロックに移動することが出来ます。

旧エディターの「テキストエディタ」はコードエディターに名称変更
すでに、ブロックの機能解説の中で何度か出ていますが、旧エディターの「テキストエディタ」はGutenbergでは「コードエディター」に名前が変わっています。
機能としては変わらず、そのままHTMLを記述していくことができます。

のようなブロックコードを使用せずに記述した場合は、基本的に全てクラシックブロックとして扱われます。

Block APIでオリジナルのブロックが作れる

Gutenbergでは、「Block API」を使用して、独自のカスタムブロックを作成することが可能です。

クラシックエディタを使用する方法

クラシックエディタとは、先述したようにGutenbergが実装される前に採用されていたエディタのことです。

現在のWordPressでは、デフォルトのエディタがGutenbergとなっているものの、WordPress公式がリリースしているプラグインを導入することでクラシックエディタを使用することが可能です。

Gutenbergが実装されているWordPressで、クラシックエディタを使用する方法は下記の通りです。

• 管理画面の左サイドバーから、「プラグイン」を選択する
• プラグインの画面に遷移したら、「新規追加」をクリックするとともに、検索窓に「Classic Editor」と入力して検索する
• 作者が「WordPress Contributors」であるプラグインを選んで、「今すぐインストール」をクリック
• インストール後は有効化を行う

上記の手順を取ることで、クラシックエディターを使用することが可能になります。

なお、プラグインを有効化したあとに、クラシックエディターをデフォルトにしたい場合は下記の方法で可能です。

• 管理画面の左サイドバーの「設定＞投稿設定」から、Classic Editorの設定画面を開く
• 「すべてのユーザーのデフォルトエディタ」を「旧エディター」に設定する

常にクラシックエディタを使用する場合は、先にデフォルトエディタとして設定しておけば、記事を書くたびに手間がかかりません。

まとめ

今回はGutenbergの使い方について、初心者の方にもわかりやすく解説しました。
旧エディターに慣れている人にとっては、もしかすると初心者以上に、操作感の違いに戸惑われるかもしれません。
ただ、Gutenbergは、コンテンツ作成に関して旧エディターよりもかなり多機能で便利になっています。

Gutenbergを使いこなすためには、「とりあえず触ってみて、ブロックの使い方を覚える」ことが一番の上達への近道です！
投稿を下書きにしておけば公開されませんので、練習用に1記事作ってみて、その中で色々なブロックの追加・変換を試してみるのが良いかと思います。
本記事がGutenbergを初めて触る方にとって、少しでも助けになれば幸いです。
今後もGutenbergの機能について、ブログで解説していきますので、ご期待ください！
もし、WordPressのバージョンアップが不安な方やバージョンアップで不具合が出てしまったという方は、ぜひWordPressの専門家にご相談ください。