こんにちは、久川和人です。
WordPress5.0から投稿や固定ページを書く際に使用されるエディターが『Gutenberg（グーテンベルグ）』になりました。
今回は、WordPressのGutenbergエディターの使い方を図解でわかりやすく説明していきます。
Gutenbergは、WordPress4.9まで使用されていたビジュアルエディターよりも、直感的にブログの記事が書きやすくなっており、HTMLやCSSといったプログラミング言語を知らない方にとっても使いやすいエディターになっています。
しかし、今までビジュアルエディターやテキストエディターを使用していた方やWordPress初心者の方は、Gutenbergエディターの使い方に戸惑ってしまう場合があります。WordPress5.0以上で、従来のビジュアルエディターやテキストエディターを使用したい場合は、こちらの記事を参照してみてください。
Gutenbergエディターの基礎知識
Gutenbergエディターの編集画面の説明
最初にGutenbergエディターの編集画面を説明いたします。投稿で新規作成を開くと、つぎのような画面が表示されます。
編集画面
画面中央が記事を書くためのスペースです。旧エディターのビジュアルエディターと同じように、記事の構成を確認しながら作成することができます。
左上メニュー
編集画面の左上にはメニューがあり、「投稿一覧を表示」、「ブロックの追加」、「元に戻す」・「やり直す」ボタン、記事の構成を確認できる「コンテンツ構造」、ブロックに移動できる「ブロックナビゲーション」などがあります。
右上メニュー
編集画面の右上にはメニューがあり、「下書き保存」、「プレビュー」、「公開する」などがあります。
サイドバーメニュー
編集画面の右側にはサイドバーメニューがあり、記事全体の構成に関する設定を行うことができます。
また、特定のブロックを選択していると、そのブロックに関する設定メニューが表示されます。
「ブロック」の概念
Gutenbergエディターは、ブロックという単位でコンテンツを作成していきます。ここでいうブロックとは、見出し、段落（文章）、画像、動画などといった単位のもの。そのブロックを組み合わせて記事を作成していきます。
例えば、「見出し・段落・画像・動画」という順番に構成する場合は、下図のようにブロックを配置します。
実際のブロックの配置方法については、つぎの章で説明します。
Gutenbergエディターの記事の作成方法
Gutenbergエディターの記事の作成方法について説明します。
記事タイトルの入力
記事タイトルは、「タイトルを追加」と書いてある場所をクリックすると入力できます。
記事本文を入力する
記事本文を入力する手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②「段落」をクリック
文字を入力します。
文字を太文字にする
文字を太くする手順は以下のとおりです。
①太くしたい文字を選択
②「B」をクリック
リンクを設定する
自分のブログの他の記事や、外部サイトにリンクを設定する手順は、以下のとおりです。
①リンクを設定したい文字を選択
②「鎖マーク」をクリック
リンク先を入力する画面が表示されます。
③直接URLを入力するか、自分のブログ内のキーワードを入力します。
④リンクをクリックした後、新しいタブで開きたい場合はクリックし、ボタンを有効にします。
文字の色を変える
ブロックの文字の色を変える方法は、以下のとおりです。
①右側にあるサイドバーメニューの「色設定」をクリック
②文字色の中から変更したい色をクリック
※変更したい色がない場合は、「カスタムカラー」をクリックし、変更したい色を選びます。
背景色を変える
ブロックの背景色を変える方法は、以下のとおりです。
①右側にあるサイドバーメニューの「色設定」をクリック
②背景色の中から変更したい色をクリック
※変更したい色がない場合は、「カスタムカラー」をクリックし、変更したい色を選びます。
見出しを作る
見出しを作る手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②「見出し」をクリック
見出しを入力します。
入力した文字が「見出し２（H2）」となります。
「見出し２（H2）」ではなくて、「見出し３（H3）」、「見出し４（H4）」にしたい場合は、以下のとおり変更することができます。
①「H2」をクリック
②「H3」または、「H4」をクリック
箇条書き（リスト）を作る
箇条書き（リスト）は以下のようなことです。
- 赤
- 青
- 黄
箇条書き（リスト）を作る手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②「リスト」をクリック
箇条書き（リスト）を入力します。
番号付きのリストに変更もできます。変更する場合は、「番号付きリストに変換」をクリックします。
引用を挿入する
引用とは、書籍や他のブログなどから文章を使いたいときに用います。引用を挿入するとこのような感じで表示されます。
引用を挿入する手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②「引用」をクリック
引用したい文字を入力します。
つぎに、「引用元を入力」をクリックし、引用元を入力します。
引用元は他のブログから引用した場合は、引用元の「ブログ名」、「URL」を記載するとよいです。
画像を挿入する
画像を挿入する手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②「画像」をクリック
画像を新規にアップロードする場合は【アップロード】、メディアライブラリから選択したい場合は【メディアライブラリ】、画像のURLを指定したい場合は【URLから挿入】をクリックします。
それぞれ、指示に従って画像を挿入します。
SNS（Twitter、YouTube、Facebook、Instagramなど）を挿入する
Twitter、YouTubeなどの投稿を挿入することができます。挿入する手順は、以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②メニューを下にスクロールさせ、「埋め込み」をクリック
③追加したいコンテンツをクリック
④埋め込むURLを入力
⑤【埋め込む】をクリック
HTMLで入力する
HTMLで入力する手順は以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②メニューを下にスクロールさせ、「フォーマット」をクリック
③「カスタムHTML」をクリック
④HTMLコードを入力します。
旧エディター（ビジュアルエディター）で入力する
WordPress4.9までで使用していた旧エディター（ビジュアルエディター）で入力する手順は以下のとおりです。
①左上メニューの「＋」ボタンをクリック
②メニューを下にスクロールさせ、「フォーマット」をクリック
③「クラシック」をクリック
④文字などを入力します。
ブロックの再利用
一度作ったブロックを「テンプレート」として保存することで、ブロックの再利用ができるようになります。
１．テンプレートとして保存する
最初に再利用したいブロックをテンプレートとして保存します。
①テンプレートとして保存したブロックをクリック
②「詳細設定」をクリック
③「再利用ブロックに追加」をクリック
④ブロックの名前を入力
⑤「保存」をクリック
これで、再利用する準備ができました。
２．テンプレートとして保存したブロックの再利用
つぎに、テンプレートとして保存したブロックを再利用します。
①左上メニューの「＋」ボタンをクリック
②メニューを下にスクロールさせ、「再利用可能」をクリック
③先ほど保存した「ブロック」をクリック
ブロックを削除する
ブロックを削除する手順は、以下のとおりです。
①「詳細設定」をクリック
②「ブロックを削除」をクリック
ブロックを移動
ブロックを移動させることもできます。移動させるには、ブロックの左側にあるバーにあるボタンをクリックします。
右上メニューの使い方
右上メニューは記事の公開前と公開後では表示する項目が変わります。それぞれ表示される項目について説明いたします。
記事を保存する（下書き保存）
記事を下書き保存する場合は、「下書き保存」または、「下書きへ切り替え」をクリックします。下書き保存とは、記事を公開せずに保存したいときに使用します。
記事公開前
記事公開後
作成した記事を確認する（プレビュー）
作成した記事をブラウザで確認する場合は、「プレビュー」をクリックします。なお、プレビューの場合は、記事は公開されません。
記事を公開/更新する
記事を公開／更新する場合は、「公開」または「更新」をクリックします。
記事公開前
記事公開後
おわりに
今回は、WordPress5.0以降の新エディター（Gutenberg）の使い方を紹介しました。
WordPress5.0以前の旧エディターを使っていた方にとっては、使い方が違う部分が多く、初めのうちは使いにくいかもしれません。でも、記事を書いていくうちに慣れていきますので、あせらずに使い方を覚えていってくださいね。
