ワードプレス　Gutenberg（ブロックエディター）で記事作成

2019年11月25日

ワードプレスのエディターは、2015年末にブロックエディターが正式リリースされましたが、まだ使い方がわからない、という声もちらほらありますね。そこで、画像とテキストの編集投稿方法について解説します。クラシックエディターで作成した記事をブロックエディターでも作成してみましょう。

 

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

記事：ワードプレス　初めての記事投稿（クラシックエディター）

で作成したものと同じ内容をブロックエディターでも作成してみます。

次のようなシンプルな記事内容ですね。

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

で構成されています。

 

記事作成の前提条件

・テーマは、ここではあまり関係ないかもしれませんが、Twenty Seventeen　を使用しています。

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

・パーマリンクの設定は
ダッシュボードメニューの　設定＞パーマリンク設定　で、『投稿名』を選択しているものとします。
（記事ワードプレス　初めての記事投稿（クラシックエディター）を参考。）

 

・ブロックエディターの編集画面の各機能については、
記事：ワードプレス　初めてのブロックエディター（編集画面の各機能）

を参考にしてください。

・ブロックエディターへの切り替え許可
普段クラシックエディターを使用していて、ブロックエディターへの切り替え許可がされていない設定の場合は、
ダッシュボードメニュー　設定＞投稿設定　で、ブロックエディターへの切り替え許可をしてください。

 

 

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

 

 

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

まずは、編集画面の最初、タイトル入力部に記事のタイトルを入力します。

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

 

クラシックエディターでは、タイトル入力してリターンを押すと、パーマリンクが表示されましたが、ブロックエディターではされません。

ブロックエディターでは、タイトル入力後、下書き保存をクリックしてください。

そうしてから、タイトルのところにカーソルを置くとパーマリンクが表示されます。

表示されたパーマリンクの編集ボタンを押して、スラグを日本語名から半角英数字に修正しておきましょう。

 

 

画像を挿入する

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

おおまかな手順としては

１．ブロックの要素を画像要素とする

２．画像をアップロードする
直接ドラッグ＆ドロップするか、メディアライブラリを開く

３．画像情報を編集
画像サイズおよび関連情報（代替テキストやキャプション、リンクの設定　など）を編集します。

 

 

ブロックの要素を画像要素とする

①ブロック左横の+マークをクリックして、要素一覧を表示させます。
②要素一覧から、『画像』をクリック

もし、よく使うものの中に目的の要素が見当たらない場合は、一覧表をスクロールして探すか、ブロックの検索を使いましょう。

これで、ブロックが画像要素に指定されると、上の画像のようにグレー領域が表示され、
『画像をドラッグするか、新規アップロードするか、ライブラリーからファイル選択してください』

と促されます。

 

簡単なのは、画像ファイルをこのグレー領域にドラッグ＆ドロップすることです。

しかし私がよく使うのは、メディアライブラリを選択することです。新規画像の場合もそうしています。

 

 

 

画像を”直接ドラッグ＆ドロップ”と”メディアライブラリを使用”との違い

実は、直接ドラッグ＆ドロップする場合でも、裏ではメディアライブラリに画像が登録されています。

 

では、同じなのでは？と思いますが、違いは画像情報（代替テキストやキャプションなど）の編集方法にあるのです。

 

代替テキストやキャプションなどの画像情報は、画像挿入後、編集画面右のブロックパネルや画像の下部で入力できます（後述）が、メディアライブラリでも入力できます。

しかし、ブロックパネルや画像下部で入力した画像情報は、メディアライブラリに反映されません。したがって、同じ画像を別のところで使用したい場合、メディアライブラリから画像を選択しても、画像情報を再入力する必要があるのです。

 

それに対して、メディアライブラリで入力した画像情報は、ブロックパネルや画像下部にも反映されます。

もし、同じ画像を違う記事で再利用するとき、使用意図によっては代替テキストやキャプションを変更したい場合がありますが、ブロックパネルや画像下部で編集すれば、メディアライブラリの画像情報は変更されずに、その記事だけの情報とすることができるのです。

 

 

 

 

 

メディアライブラリからの画像挿入

メディアライブラリを選択した場合は、次のような手順となります。

①メディアライブラリに画像をドラッグ＆ドロップ（または既存の画像を選択）
②必要があれば画像情報（代替テキスト、キャプション、リンク先）を入力
③選択ボタンをクリック

 

ブロック内に画像が挿入され、右のブロックパネルも画像用のものが自動表示されることがわかります。

 

 

 

画像のブロック内編集ツールについて

画像ブロック内にカーソルがあるとき、ブロックの左上に編集ツールが表示されます。
また、画像の下にはキャプションの入力部や、画像の周辺には場所によって、画像サイズ調整キーが存在しますので確認しておきましょう（下記画像参照）

ブロック左上の編集ツールは、左から、

ブロックやスタイルの変更/画像の配置指定/画像を編集/詳細設定

となっています。

 

 

ブロックやスタイルの変更

ここをクリックすると、変更できる画像に関するブロック一覧が表示されます。

ギャラリー、カバー、ファイル、メディアと文章

といったものです。例えば、カバーを選択すると、画像の上にテキストを重ねて表示できるようになります。クラシックエディターでは、カスタムCSSを使用しないとできなかった機能ですね。

 

このようなブロックエディター特有の新しい機能については、別途記事を書きますので、ここでは割愛させて頂きます。

 

 

画像の配置指定

画像の左寄せ、中央配置、右寄せ　を選択できます。

ここでの注意点ですが、左寄せ・右寄せを選ぶと、この画像ブロックの下に配置した段落などのテキストが画像横に回り込むことです。

単なる左寄せ・右寄せ　でないことに注意しましょう。

 

では、単なる左寄せ・右寄せ　はどうすればよいかというと、次のようになっています。

・画像を挿入するとデフォルトでは左寄せ配置になっている
・中央配置したければ、中央寄せボタンをクリックして黒塗り表示させる
・右寄せは設定できない（テキストを回り込ませる以外の単なる右寄せは使うことがないから、と思われます）

すなわち、

デフォルト（中央寄せボタンが黒塗りでない）では左寄せ配置、

中央寄せボタンが黒塗りされていれば中央配置

なのです。この場合、画像調整キーの位置もそれぞれ異なりますので、確認しておきましょう。

 

画像を編集

ブロック内編集ツールの、画像を編集をクリックすると、メディアライブラリが開きます。

 

 

詳細設定

ブロック内編集ツールの、詳細設定をクリックすると、ブロックの複製や新しいブロックの挿入、ブロックの削除　などの設定が開きます。

これは、画像ブロック特有ではなく、他のブロックも同じ内容です。

 

特に、ブロックの削除　は、ここでしかできない（またはショートカットでShit+Alt+Z）ので、よく覚えておきましょう。

 

 

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

 

HTMLとしては編集は、以下のように、HTMLコードを表示させて編集するのに使います。

再利用ブロックに追加　については、別記事で説明するので、ここでは割愛させて頂きます。

 

 

 

画像のブロックパネル

画像関連の最後に、ブロックパネルについて触れておきましょう。

画像ブロック内にカーソルがあると、右の情報パネルが、画像専用のブロックパネルに自動的に切り替わります。

ブロックパネルの内容は以下の通りです。

・代替テキストの設定
・画像サイズの設定
・リンク先の設定

 

 

 

段落の入力と編集

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

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

２．テキストを入力

３．テキストの編集

 

 

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

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

 

新しいブロックは、何も指定しなければ段落となっていますので、テキストを入力していきます。

テキストを入力してリターンを押すと次のブロックへ移ります。

同じブロック内で改行だけしたい場合は、Shft+リターン　でできます。

 

 

段落用ブロックパネルの確認

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

 

このブロックパネルで文字サイズや文字色、背景色の設定ができますが、あくまでブロック単位での設定となります。

 

また、ドロップキャップをONにすると、ブロック内の先頭文字が大きく表示されるようになります。これは、長い段落文章の場合は見やすくなるなど有効ですが、文章が短いとレイアウト崩れの元になりますので、私はあまり使いません。

 

 

段落ブロック内の編集

入力済の段落ブロック内にカーソルを置くと、ブロック左上に、編集ツールが表示されます。この編集ツールと右のブロックパネルの両方でブロック内の編集をすることになります。

 

ブロック編集用ツールは、下記の通りです。

左から、

・ブロックまたはスタイルの変更
・テキストのレイアウト（左寄せ、中央、右寄せ）
・太字、イタリック文字　への変更
・リンクの挿入
・よりリッチなテキスト制御
・詳細設定

となります。

ブロックまたはスタイルの変更は、見出しやリストなど、テキストに関連するブロックへの変更が可能です。

テキストのレイアウト、太字・イタリック文字への変更、リンクの挿入　は、従来のクラシックエディターと同じなので、直感的に使用できるでしょう。

パネルブロックでの設定（文字サイズや文字色）がブロック毎しかできなかったのに対し、ここでの太字やイタリックは文字ごとに設定できるのですね。

詳細設定は、画像ブロックで説明したように、ブロック要素によって差異はありませんので、すでに説明済です。

 

 

そこで、よりリッチなテキスト制御について、少し説明しましょう。ここには、インライン画像、ソースコード、打消しの３つの項目が入っています。

インライン画像　とは、文字列と同じ並びで配置する画像を指します。例えば、顔文字なんかは、テキストの最後に同じ並びでつけますよね。

ソースコード　では、これを指定することによって、入力しているテキストがHTMLなどのコードを表していることを示します。ソースコードを指定せず、そのまま入力した場合、誤ってHTMLコードを実行してしまうのを防止します。

打消し　は、文章を横線で消す表現をするのに使います。

 

 

見出しの入力

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

１．ブロックの要素を見出しを指定して、要素を指定（H2、H3・・・から選びます）

２．テキストを入力

となります。この１と２の順番は逆でも問題ありません。すなわち、まずテキストを入力（段落として入力）したあと、ブロックの編集ツールで見出しに変更することもできます。

 

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

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

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

 

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

 

 

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

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

 

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

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

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

 

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

２．ブロックを挿入したい直前の見出しブロックにカーソルを置いて、編集画面左上のツールバーの+マークをクリック

３．ブロックが新しく挿入されるので、段落要素として入力

とこれだけです。

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

 

 

まとめ

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

画像、段落、見出し

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

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

２．入力する

３．ブロック内編集ツールやブロックパネルを用いて編集する

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

 

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

何より、ブロックエディターしかできない機能がところどころにあるのが、今後のこのエディターの可能性を感じることができます。

 

反面、使いにくい面としては、文字サイズや文字色などの文字装飾が、デフォルトではブロック毎での指定となっており、ブロックエディターとしては文字毎に設定できないところが欠点だと感じます。これについては、逃げ手として、ブロック要素一覧のフォーマットの中にある『クラシック』という要素を選択すると、クラシックエディターと同じツールバーが使えるようになります。

ようは、新しいGutenbergエディターの中で、従来のエディターを使用できるように考えられているわけですが、せっかく新しいエディターをリリースしたのだから、逆行するような機能に逃げて欲しくないと感じてしまいます。

 

このあたりは、今後の進化に期待したいところですね。