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

2022年4月20日

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

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

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

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

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

で構成されています。

記事作成の前提条件

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

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

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

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

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

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

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

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

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

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

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

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

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

画像を挿入する

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

おおまかな手順としては

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

段落の入力と編集（装飾）

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

1. 新しいブロックを表示
2. 段落ブロックにテキストを入力
3. テキストの編集（装飾）

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

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

②段落ブロックにテキストを入力

新しく表示されたブロックは、何も指定しなかれば段落ブロックとなっています。画面右のブロックパネルに”段落”と表示され、このブロックが段落ブロックであることがわかります。

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

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

③テキストの編集（装飾）をする

段落ブロックの画面右の設定パネル（”ブロック”タブ状態）やブロック内のツールバーを使って文字装飾などの編集をしていきます。

入力した文字の文字サイズ、文字色、背景色を変更したり、太字化やマーカーをつけて強調したり、記事を書くにあたって必要な文字装飾をするとよいでしょう。

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

見出しの入力

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

1. 見出しブロックを挿入
2. 見出しの種類（H2～H6の大きさ）を指定
3. テキストを入力

②と③は逆でも大丈夫です。

①見出しブロックを挿入する

画像ブロックの挿入と同じ手順で見出しブロックを挿入します。

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

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

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

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

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

したがって、記事本文内に挿入した見出しブロックではH2以下しか指定してはいけません。

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

③見出しの入力

段落ブロックと同様の要領でテキストを入力すればOKです。

スペーサーブロックで余白を設ける

見出しブロックや段落ブロック、必要に応じて画像ブロックを挿入していけば、記事ができあがるはずです。

でも記事を読みやすくするためには、適度な余白が必要ですよね。そこで使うのがスペーサーブロックです。

余白を設けたいところでスペーサーブロックを挿入し、下記のように余白の高さを調整します。

適正な余白の高さは、使っているテーマによっても異なります（見出しや段落ブロックの上下に初期マージンがテーマによって設定されているため）。

このサイトの場合（テーマLuxeritas使用）では、段落間の余白は20px、見出しの前の余白は40pxというように一応決めています。あとは見映えによって若干変更すればよいでしょう。

見出しを先に作成する

記事の作成では順番に作成するのではなく、先にすべての見出しを作成してから、あとで文章（段落）を作成していく、という方が速く記事が書けると言われています。

実際私も、先に見出しブロックだけで記事のアウトラインを決めておいて、後から段落や画像ブロックおよびスペーサーを挿入する、という手順で記事を作成しています。

そんなときの便利な方法を紹介しましょう。以下のような手順です。

1. 見出しとなるテキストを入力する（段落ブロックのまま）
2. ①のテキストをすべて選択して見出しH2に変更
3. さらに必要な見出しを選択して見出しH3に変更

１．見出しとなるテキストを入力（段落ブロックのまま）

これを見出しH2に変更してから、見出し２－１～見出し２－３を見出しH3に変更していきます。

２．見出しH2に変更

①全ブロックを選択（下記のようにShiftキーで最上と最下のブロックを選択する）

青く表示されていれば、ブロックが選択中ということです。

②段落ブロックツールバーの”P”をクリック
③”見出し”をクリック

以上で、すべて見出しH２となりました。

３．一部を見出しH3へ変更

要領は見出しH2への変更と同じです。変更したいブロックをのみ選択しておいて、見出しH3へ変更します。

①変更したいブロックを選択（ここでは見出し２－１～見出し２－３）
②見出しツールバー内のH2をクリック
③H3をクリック

以上で次のようになります。

このようにブロックの要素（種類）は、複数ブロックを指定して一括変更が可能です。

まとめ

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

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

1. ブロックの要素（種類）を選択して挿入
2. 入力する（テキストまたは画像の入力）
3. 編集する（画面右のパネルまたはブロック内ツールバー）

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

また、スペーサーブロックを使って適正な余白を入れることで、読みやすい記事となります。

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

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