ワードプレス ブロックエディターで記事作成（画像の挿入、見出し・段落の設定方法）
ワードプレスのエディターは、2015年末にブロックエディターが正式リリースされましたが、まだ使い方がわからない、という声もちらほらありますね。そこで、画像とテキストの編集投稿方法について解説します（最新のワードプレス5.5に準拠）。クラシックエディターで作成した記事をブロックエディターでも作成してみましょう。パーマリンクの編集方法も解説します。
※本記事は、2020年8月のワードプレスのversion5.5へのアップデートにより、2020年9月にリライトし直したものです。
ブロックエディターで作成する記事概要
記事：ワードプレス 初めての記事投稿（クラシックエディター）
で作成したものと同じ内容をブロックエディターでも作成してみます。
次のようなシンプルな記事内容ですね。
・記事タイトル
・1stビュー画像
・見出し（h2：２つ、h3：２つ、h4：２つ）
・段落8個
で構成されています。
記事作成の前提条件
・テーマは、ここではあまり関係ないかもしれませんが、Twenty Seventeen を使用しています。
・プラグインは、特に設定していないデフォルト状態としています。
・パーマリンクの設定は
ダッシュボードメニューの 設定＞パーマリンク設定 で、”投稿名”を選択しているものとします。
https://web-children.com/2019/08/13/setting-before-posting-a...
・ブロックエディターの編集画面の各機能については、次の記事も合わせて参考にしてください。
・ブロックエディターへの切り替え許可
プラグイン”Classic Editor”をインストール・有効化していると、ブロックエディターへの切り替え許可がされていない可能性があります。
ダッシュボードメニュー 設定＞投稿設定 で、ブロックエディターへの切り替え許可をしてください。
参考記事
それでは、ダッシュボードメニューの 投稿＞新規追加 で新しい記事の編集画面を開けましょう。
タイトル入力とパーマリンクの編集
まずは、編集画面の最初、タイトル入力部に記事のタイトルを入力して、パーマリンクのスラッグもタイトルに合わせて編集しておきます。
ここでは『記事２』というタイトルを入力しています。
パーマリンクの設定は、画面右の文書パネルにありますが、”下書き保存”をすればスラッグの編集ができるようになります。
スラッグをタイトルと関連する半角英数字に修正しておきましょう。ここでは”post2”としておきます。
画像を挿入する
本文の最初のブロックに、画像を挿入します。
おおまかな手順としては
１．ブロックの要素を画像要素とする
２．画像をアップロードする
直接ドラッグ＆ドロップするか、メディアライブラリを開く
３．画像情報を編集
画像サイズおよび関連情報（代替テキストやキャプション、リンクの設定 など）を編集します。
ブロックの要素を画像要素とする
①画面左上の+マークをクリックして、ブロック一覧を表示させます。
②ブロック一覧”メディア”のグループまで下へスクロールする
②”画像”をクリック
これで、画像ブロックが挿入されます。挿入直後の状態は以下の通りです。
本文入力欄には画像ブロックが表示され、画面右には、この画像ブロックの情報を編集できるブロックパネルが表示されます。
もし、画面右にブロックパネルが表示されていない場合は、画面右上の歯車マーク（設定）をクリックして、表示・非表示を切り替えてください。
画像ブロックの中で画像の選択方法として、
『画像ファイルをアップロードするか、メディアライブラリーから選択、またはURLを追加してください』
と促されます。
- 画像ファイルをアップロードする
この画像ブロック内にパソコンから直接画像ファイルをドラッグ＆ドロップでアップロードできます。 - メディアライブラリ
”メディアライブラリ”をクリックするとメディアライブラリが開き、すでにアップロード済の画像を選択することができます。また新規画像もメディアライブラリにドラッグ＆ドロップで追加することもできます。 - URLから挿入
インターネット上に画像ファイルを使う場合、”URLから挿入”をクリックして入力します。
私がよく使うのは、メディアライブラリを選択することです。新規画像の場合もそうしています。
画像を”直接ドラッグ＆ドロップ”と”メディアライブラリを使用”との違い
実は、直接ドラッグ＆ドロップする場合でも、裏ではメディアライブラリに画像が登録されています。
では、同じなのでは？と思いますが、違いは画像情報（代替テキストやキャプションなど）の編集方法にあるのです。
代替テキストやキャプションなどの画像情報は、画像挿入後、編集画面右のブロックパネルや画像の下部で入力できます（後述）が、メディアライブラリでも入力できます。
しかし、ブロックパネルや画像下部で入力した画像情報は、その記事内では反映されますがメディアライブラリに反映されません。したがって、同じ画像を別のところで使用したい場合、メディアライブラリから画像を選択しても、画像情報を再入力する必要があるのです。
同じ画像を複数の記事で使用して、画像の情報も使いまわしたい場合は、メディアライブラリに情報入力しておくと便利です。
逆に同じ画像を違う記事で再利用するとき、使用意図によって代替テキストやキャプションを変更したい場合は、ブロックパネルや画像下部で編集すれば、メディアライブラリの画像情報は変更されずに、その記事だけの情報とすることができます。
メディアライブラリからの画像挿入
メディアライブラリを選択した場合は、次のような手順となります。
①メディアライブラリに画像をドラッグ＆ドロップ（または既存の画像を選択）
②必要があれば画像情報（代替テキスト、キャプション、リンク先）を入力
③選択ボタンをクリック
ブロック内に画像が挿入されます。
画像のブロック内ツールバーについて
画像ブロック内にカーソルがあるとき、画像の上にツールバーが表示されます。ツールバーの役割は以下の通りです。
- 一番左のブロックタイプまたはスタイルの変更では、画像に関連した他のブロックに変換することができます。
- 配置を変更では、画像の配置を指定します。記事内では中央配置が多いでしょう。右寄せや左寄せでは、画像ブロック下の段落ブロックなどのテキストが画像横に回り込む仕様となっています。
- リンクを挿入では、画像クリックして飛ぶリンク先を指定することができます。
- Crop（切り抜き）はワードプレス5.5から新しく導入された機能です。ビジュアルエディターの表示のままで、画像の編集をすることができます。
- 置換は、画像を別のものに変更するのに使います。
となっています。それでは、Crop（切り抜き）についてもう少し紹介しましょう。
Crop（切り抜き）
Crop（切り抜き）をクリックすると、画像にグリッド（縦横の線）が表示され、ツールバーにさらに画像編集用ボタンが追加表示されます。
ズーム、縦横比、回転で画像編集できます。それぞれクリックすると次のように操作ツールまたは編集が適用されます。
ズームと縦横比は操作ツールが開いて操作します。回転はクリックするたびに右へ90度ずつ回転します。もっと角度が細かく変更できないのは残念ですね。
編集後の確定は”適用”、元に戻す場合は”キャンセル”をクリックしましょう。
ズームで拡大していくと、当然ながら画像の一部しか切り抜きされませんが、切り抜き位置はマウスで画像をドラッグして動かせば自由に設定できます。
例えば以下のように、縦横比を９：１６の縦長とし、ズームとマウスで東京タワーの部分を拡大表示させることも可能です。
切り抜きは、ワードプレスversion5.4以前も、メディアライブラリの編集で可能でしたが、今回のように、エディターの編集画面で直接可能となりました。結構快適に使用できます。
詳細設定
ブロック内編集ツールの一番右の3点はメニューは、詳細設定となっています。クリックすると、ブロックの複製や新しいブロックの挿入、ブロックの削除 などの設定が開きます。
これは、画像ブロック特有ではなく、他のブロックも同じ内容です。
特に、ブロックの削除 は、ショートカットのShit+Alt+Zも覚えておくと便利です。
このほかにも、HTMLとして編集 や、再利用ブロックに追加 などの機能も選べます。
HTMLとしては編集は、以下のように、HTMLコードを表示させて編集するのに使います。
再利用ブロックに追加 については、以下の記事を参照ください。非常に便利な機能です。
画像のサイズとキャプション
画像の大きさは、画面右のブロックパネルでも変更可能ですが、カスタムサイズにしたい場合は、直接画像の辺の画像調整キーをマウスでドラッグして変更可能です（縦横比はキープされます）。
キャプションも画像の下に直接入力可能です。
画像のブロックパネル
画像関連の最後に、ブロックパネルについて触れておきましょう。
画像ブロック内にカーソルがあると、右の情報パネルが、画像専用のブロックパネルに自動的に切り替わります。
ブロックパネルの内容は以下の通りです。
- 画像のスタイル（標準または角丸タイプ）
- 代替テキストの設定
- 画像サイズの設定
段落の入力と編集
では、画像ブロックの下に段落ブロックでテキスト（導入文）を入力していきます。
１．新しいブロックを表示
２．テキストを入力
３．テキストの編集
新しいブロックを表示してテキストを入力する
画像ブロック内でリターン（[Enter]キー）を押すと、画像ブロックの下に次のブロックが表示されます（または、編集画面左上のツールバー内で+マークをクリックする）。
画像を挿入する場合は、ブロック一覧から”画像”を選んで画像ブロックとする必要がありましたが、何も指定しない場合は自動的に段落ブロックとなっています。画面右のブロックパネルにも”段落”と表示され、このブロックが段落ブロックであることがわかります。
段落ブロックへ文字を入力していくにあたり、基本的な操作は次の2点です。
- テキストを入力してリターン（[Enter]キー）を押すと次の段落ブロックへ移ります。
- 同じ段落ブロック内で改行だけしたい場合は、Shft+リターン（[Enter]キー） とする。
段落ブロックでの文字装飾
段落ブロックの入力中や入力済のブロックにカーソルを置くと、右の情報パネルが段落用のブロックパネルに自動的に切り替わります。
また入力したブロック内にカーソルを置くと、ブロックのすぐ上にツールバーが表示されます。
このブロックパネルとツールバーを操作して、入力した文字の文字サイズ、文字色、背景色を変更したり、太字化やマーカーをつけて強調したり、記事を書くにあたって必要な文字装飾をしていきます。
段落ブロックの文字装飾の方法については、若干独特なところがありますので、こちらの記事を参照ください。
見出しの入力
見出しの入力は、次のような手順となります。
１．ブロックの要素を見出しを指定して、要素を指定（H2、H3・・・から選びます）
２．見出しの大きさを指定する
３．テキストを入力
２と３は逆でも大丈夫です。
見出しブロックを指定する
画像ブロックを選んだのと同じ手順で見出しブロックを指定します。
見出しブロック指定直後は次のようになります。
見出しの大きさを指定する
見出しは、大きい順にH1、H2、H3・・・とありますが、これを適切に使用して、文章を階層化することがSEO上正しい文章となります。
見出しの大きさはデフォルトではH2となっています。見出しブロックのツールバーで次のように変更します。
１つの記事につき、H1は１つしか許容できません。ですので、ワードプレスでは、記事のタイトルが自動的にH1に指定されています。
したがって、記事本文内は、H2以下しか指定してはいけません。
また、H2の下層には、H3を指定する。H3の下層にはH4を指定する、というように、順番に下層を指定しましょう。H2の下層にいきなりH4を指定しないことです。
見出しを先に作成して段落を挿入する（ブロックの挿入方法）
以上で、段落と見出しの入力方法を解説してきましたので、順番に入力していけば記事が作成できるはずです。
しかし、記事の作成では、順番に作成するのではなく、先にすべての見出しを作成してから、あとで文章（段落）を作成していく、という場合もあるでしょう。
そこで、先に見出しブロックを作成してから、段落ブロックを見出しブロックと見出しブロックの間に挿入していく方法を解説します。
といっても、すごく簡単です。
１．見出しブロックを作成
２．ブロックを挿入したい直前の見出しブロックにカーソルを置いて、リターンキー（[Enter]キー）を押す（または編集画面左上のツールバーの+マークをクリック）
３．ブロックが新しく挿入されるので、段落要素として入力（段落以外のブロックにしたい場合は、ブロック一覧から選ぶ）
とこれだけです。
この手順は、ほかのブロックを挿入する場合も同じですので、よく理解しておきましょう。
まとめ
以上、簡単な記事ですが、ブロックエディターでの作成方法を解説してきました。
画像、段落、見出し
の３つのブロックの入力・編集方法を解説してきましたが、どのブロックにも共通している手順としては、
１．ブロックの要素を指定する
２．入力する（見出しと段落の場合は文字入力、画像ブロックの場合は画像を挿入する）
３．ブロック内ツールバーやブロックパネルを用いて編集する（ブロックパネルは、カーソルにのあるブロックの情報が自動的に画面右に表示される）
ということです。この基本さえ押さえれば、ほかのブロックでの入力・編集もさほど難しくないでしょう。
ブロック毎に入力したり編集したりするのは、若干の慣れが必要ではありますが、慣れてくると、なかなか楽しいものです。
何より、ブロックエディターしかできない機能がところどころにあるのが、今後のこのエディターの可能性を感じることができます。
