ワードプレス　ブロックエディターで記事作成（画像の挿入、見出し・段落の設定方法）

2021年8月1日

ワードプレスのGuntenberg（ブロックエディター）を使って、記事を投稿する基本的な手順を紹介します。

※本記事は、2021年7月のワードプレスのversion5.8へのアップデートにより、2021年8月にリライトし直したものです。

ブロックエディターで作成する記事概要

次のようなシンプルな記事を作成していきます。

・記事タイトル
・1stビュー画像
・見出し（h2：２つ、h3：２つ、h4：２つ）
・段落8個

で構成されています。

記事作成の前提条件

・テーマは、Twenty Seventeen　を使用しています。
（余分な機能のないシンプルなテーマということで選択しています。）

・プラグインは、特に設定していないデフォルト状態としています。

・パーマリンクの設定は
ダッシュボードメニューの　設定＞パーマリンク設定　で、”投稿名”を選択しているものとします。

・ブロックエディターの編集画面の各機能については、次の記事も合わせて参考にしてください。

・ブロックエディターへの切り替え許可
プラグイン”Classic Editor”をインストール・有効化していると、ブロックエディターへの切り替え許可がされていない可能性があります。

ダッシュボードメニュー　設定＞投稿設定　で、ブロックエディターへの切り替え許可をしてください。

それでは、ダッシュボードメニューの　投稿＞新規追加　で新しい記事の編集画面を開けましょう。

タイトル入力とパーマリンクの編集

まずは、画面の一番上のタイトル入力部に記事のタイトルを入力します。

また同時に、パーマリンクのスラッグもタイトルに合わせて編集しておきます。

ここでは『記事２』というタイトルを入力しています。

パーマリンクの設定は、画面右の文書パネルにありますが、”下書き保存”をすればスラッグの編集ができるようになります。

スラッグをタイトルと関連する半角英数字に修正しておきましょう。

画像を挿入する

本文の最初のブロックに、画像を挿入します。

おおまかな手順としては

1. 画像ブロックを挿入する
2. 画像をアップロード（または選択）する

①画像ブロックを挿入する

①画面左上の+マークをクリックして、ブロック一覧を表示させます。
②ブロック一覧”メディア”のグループまで下へスクロールする
②”画像”をクリック

これで、画像ブロックが挿入されます。挿入直後の状態は以下の通りです。

本文入力欄には画像ブロックが表示され、画面右には、この画像ブロックの情報を編集できるブロックパネルが表示されます。

②画像をアップロード（または選択）する

ブロック内の”メディアライブラリ”をクリックして画像をアップロードします。

①メディアライブラリに画像をドラッグ＆ドロップ（または既存の画像を選択）
②必要に応じて画像情報（代替テキスト・キャプションなど）を入力
③”選択”をクリック

これでブロック内に画像が挿入されます。

画像ブロックでは、このほか画像のトリミング加工やデュオトーンフィルターなど、さまざまな加工ができます。以下の記事で詳しく解説しているので参照ください。

ブロックのオプションについて

画像ブロック特有ではなく、他のブロックも同じ基本操作なので覚えておきましょう。

ブロック内編集ツールの一番右の3点はメニューは、オプション設定となっています。

クリックすると、ブロックの複製や新しいブロックの挿入、ブロックの削除　などの設定が開きます。

特に、ブロックの削除　は、ショートカットのShit+Alt+Zも覚えておくと便利です。

このほかにも、HTMLとして編集　や、再利用ブロックに追加　などの機能も選べます。

再利用ブロックに追加　については、以下の記事を参照ください。非常に便利な機能です。

段落の入力と編集

では、画像ブロックの下に段落ブロックでテキスト（導入文）を入力していきます。

１．新しいブロックを表示

２．テキストを入力

３．テキストの編集

新しいブロックを表示してテキストを入力する

画像ブロック内でリターン（[Enter]キー）を押すと、画像ブロックの下に次のブロックが表示されます（または、編集画面左上のツールバー内で+マークをクリックする）。

画像を挿入する場合は、ブロック一覧から”画像”を選んで画像ブロックとする必要がありましたが、何も指定しない場合は自動的に段落ブロックとなっています。画面右のブロックパネルにも”段落”と表示され、このブロックが段落ブロックであることがわかります。

段落ブロックへ文字を入力していくにあたり、基本的な操作は次の2点です。

• テキストを入力してリターン（[Enter]キー）を押すと次の段落ブロックへ移ります。
• 同じ段落ブロック内で改行だけしたい場合は、Shft+リターン（[Enter]キー）　とする。

段落ブロックでの文字装飾

段落ブロックの入力中や入力済のブロックにカーソルを置くと、右の情報パネルが段落用のブロックパネルに自動的に切り替わります。

また入力したブロック内にカーソルを置くと、ブロックのすぐ上にツールバーが表示されます。

このブロックパネルとツールバーを操作して、入力した文字の文字サイズ、文字色、背景色を変更したり、太字化やマーカーをつけて強調したり、記事を書くにあたって必要な文字装飾をしていきます。

段落ブロックの文字装飾の方法については、若干独特なところがありますので、こちらの記事を参照ください。

見出しの入力

見出しの入力は、次のような手順となります。

１．ブロックの要素を見出しを指定して、要素を指定（H2、H3・・・から選びます）
２．見出しの大きさを指定する
３．テキストを入力

２と３は逆でも大丈夫です。

見出しブロックを指定する

画像ブロックを選んだのと同じ手順で見出しブロックを指定します。

見出しブロック指定直後は次のようになります。

見出しの大きさを指定する

見出しは、大きい順にH1、H2、H3・・・とありますが、これを適切に使用して、文章を階層化することがSEO上正しい文章となります。

見出しの大きさはデフォルトではH2となっています。見出しブロックのツールバーで次のように変更します。

１つの記事につき、H1は１つしか許容できません。ですので、ワードプレスでは、記事のタイトルが自動的にH1に指定されています。

したがって、記事本文内は、H2以下しか指定してはいけません。

また、H2の下層には、H3を指定する。H3の下層にはH4を指定する、というように、順番に下層を指定しましょう。H2の下層にいきなりH4を指定しないことです。

見出しを先に作成して段落を挿入する（ブロックの挿入方法）

以上で、段落と見出しの入力方法を解説してきましたので、順番に入力していけば記事が作成できるはずです。

しかし、記事の作成では、順番に作成するのではなく、先にすべての見出しを作成してから、あとで文章（段落）を作成していく、という場合もあるでしょう。

そこで、先に見出しブロックを作成してから、段落ブロックを見出しブロックと見出しブロックの間に挿入していく方法を解説します。

といっても、すごく簡単です。

１．見出しブロックを作成

２．ブロックを挿入したい直前の見出しブロックにカーソルを置いて、リターンキー（[Enter]キー）を押す（または編集画面左上のツールバーの+マークをクリック）

３．ブロックが新しく挿入されるので、段落要素として入力（段落以外のブロックにしたい場合は、ブロック一覧から選ぶ）

とこれだけです。

この手順は、ほかのブロックを挿入する場合も同じですので、よく理解しておきましょう。

まとめ

以上、簡単な記事ですが、ブロックエディターでの作成方法を解説してきました。

画像、段落、見出し

の３つのブロックの入力・編集方法を解説してきましたが、どのブロックにも共通している手順としては、

１．ブロックの要素を指定する

２．入力する（見出しと段落の場合は文字入力、画像ブロックの場合は画像を挿入する）

３．ブロック内ツールバーやブロックパネルを用いて編集する（ブロックパネルは、カーソルにのあるブロックの情報が自動的に画面右に表示される）

ということです。この基本さえ押さえれば、ほかのブロックでの入力・編集もさほど難しくないでしょう。

ブロック毎に入力したり編集したりするのは、若干の慣れが必要ではありますが、慣れてくると、なかなか楽しいものです。

何より、クラシックエディターではできないブロックエディターならではの機能がたくさんありますので、ぜひ習得していきましょう。