ワードプレス5.5 初めてのブロックエディター(編集画面の各機能)

ワードプレスは、2018年末のversion5.0以降はGutenbergという通称ブロックエディターが標準となっています。従来のワープロ感覚のエディター(クラシックエディター)と違って、慣れるのに時間がかかります。

そこで、記事の作成の前に知っておくべき基本的な知識として、ブロックエディターの編集画面の各機能について解説します。

テーマは、Twenty Twentyを使用します。

※この記事は、2020年8月のワードプレスversion5.5へのアップデートにより、2020年9月にリライトしました。

 

まずはブロックエディターを開けてみる

ブロックエディターは、ダッシュボードメニューの投稿>新規追加 で開くことができます。

もし、クラシックエディターを標準設定にしてあるならば、ダッシュボードメニューの設定>投稿設定 で、ブロックエディターをデフォルト設定にしておきましょう。

 

このあたりの情報は、

記事:初めてのワードプレス 記事編集用のエディターを知っておこう

も参考にしてみてください。

 

ブロックエディターの初期画面

ブロックエディターの編集画面は上記のように、非常にシンプルになっています。

一番上が記事タイトル入力欄(”自動下書き”とあるところ)、その下のエリアが本文入力欄です。本文入力欄には、1つ目のブロック(”文章を入力、または/でブロックを選択”とあるところ)が表示されています。

この画面の各機能については、後ほど詳しく解説していきますが、まずは簡単に記事の投稿方法を説明しておきましょう。

 

記事タイトル欄に『新しい記事のタイトル』を入力(”自動下書き”はバックスペースで消去して入力します)した後、記事本文入力欄の1つ目のブロックにカーソルを置いて『これは新規作成の記事です。』を入力しているのが下記の画像です。

入力中のブロックの情報が、右側のパネルに自動的に表示されます。一番上に”段落”と書かれているので、今現在、このブロックは段落ブロックであることがわかります。段落ブロックの場合は、このパネル内で、ブロックごとの文字サイズや、文字色などを編集することができます。

第1ブロック(段落ブロック)への入力

 

1つ目のブロックの入力が終わって、リターンを押すと、2つ目のブロックに移ります。

第2ブロックの表示

 

ブロック要素の切り替え・選択方法

ブロックは特に指定しなければ、自動的に段落要素がブロックに指定されています。これを別のブロック要素に変更する方法を紹介します。

カーソルのあるブロック内の+マークをクリックすると、ブロックの要素一覧が表示されます。これを例えば見出しや画像に変更したければ、その要素を選択すればよいのです。ブロック一覧の表示

ただし、ここで表示されているのは、よく使うブロックだけで、ユーザーの使用状況に応じて変化していきます。

もし、使いたいブロックがこの中になければ、”すべて表示”をクリックすれば、下記のように画面左に全ブロック要素が表示されます。

すべてのブロック表示

画面左の全ブロック一覧をスクロールすれば、さまざまなブロックが表示されますので、その中から目的のブロックを選択すればよいでしょう。

 

このように、ブロックエディターは、ブロック毎に要素を選択して、記事(コンテンツ)を構築していく、という考え方で記事を編集していきます。

 

ブロックのプレビュー機能

ワードプレス5.5ではブロックのプレビュー機能がつきました。2通りのプレビュー機能があります。

ブロック要素単独のプレビュー

下記画像のような手順でプレビューできます。

①+マークをクリックしてブロック一覧を表示
②プレビューしたいブロックにマウスオーバーする(この例では”カバー”ブロックにマウスオーバー)
③一覧表のすぐ右にプレビュー表示される

ブロック要素のプレビュー例(カバーブロック)

 

より複雑なパターン(ブロックの組み合わせ)

Gutenbergでは、画像やテキストのブロックを組み合わせると、クラシックエディターでは表現できなかったさまざまなコンテンツが作成できるようになりましたが、慣れないと難しいですね。そこで、コンテンツ例を提供してくれるPatternsというタブが準備されています。

下記のように、ブロック一覧表のタブを”パターン”に切り替えれば、さまざまなパターンのコンテンツが表示され、クリックすれば本文に挿入されます。この例では、2ボタンをクリックして本文に挿入しました。

ブロックパターンの表示

 

 

ブロックエディター編集画面 各機能の解説

それでは、編集画面の各機能について解説していきましょう。

もう一度、編集画面を見てみます。

左上にツールバー、右上に制御ボタン、そしてその下に関連情報パネルが並んでいます。

ブロックエディターの全体構成

この3つについて順番に解説していきましょう。

 

 

ツールバー について

ツールバーは、左から

・ブロック追加
・ブロックの編集・選択の切り替え
・元に戻す
・やり直す
・コンテンツ構造
・ブロックナビゲーション

となっています。

 

画面左上ツールバー

ブロック追加は、+マークであることから予測できますが、先に説明した、ブロック内の+マークのクリックと同じく、ブロック一覧を表示させます。ただし、ブロック内の+マークでは、一旦、よく使うブロックが表示されましたが、このツールバー内の+マークでは、いきなり全ブロック一覧が表示されます。

ブロックの編集・選択の切り替えは、あまり使うことはないと思いますので割愛します。

元に戻す・やり直す も、その通りの機能なので説明は省略します(ワードなどと同じく、作業を1つ戻したり、いったん戻した作業を再度進めるボタン)。

コンテンツ構造とブロックナビゲーションについてもう少し説明しましょう。

 

下記のような記事の構成内容であった場合の、コンテンツ構造とナビゲーションの表示例を示します。

コンテンツ構造とブロックナビゲーション

コンテンツ構造は、文章を構成する各要素の種類とその数およびその構成、を表示しています。また、上記の例のように、見出し(h2)の下には本来小見出しh3を使用すべきところにh4が使用されている場合、その要素の背景がオレンジ色となり、『(見出しレベルに間違いがあります)』とメッセージも表示されます。

このように、要素の使用方法に間違いがある場合も警告表示してくれるのです。

 

ブロックナビゲーションは、各ブロックの要素が順番に表示されます。クリックするとそのブロックに飛ぶこともできます

 

 

制御ボタン について

制御ボタンは、左から

・下書き保存
・プレビュー
・公開(または更新)
・設定
・ツールと設定(3点メニュー)

となっています。

下書き保存、プレビュー、公開ボタンは、クラシックエディターと同様、名称通りの機能ですので説明を省力します。ただし、プレビューも公開も、いきなり進むのではなく、いったん1クッション置いて、再度クリックする、という方式です。

 

設定、ツールと設定 のボタンは下記の通りです。

制御ボタン の説明

設定は、クリックで、その下の情報パネルの表示・非表示を切り替えることができます。

ツールと設定は、クリックするとメニュー画面が開きます。このメニューの中で、特に重要と考えられるは、エディター(ビジュアルエディターとコードエディター)およびオプションです。

 

コードエディターへの切り替え

3点メニュー開いたメニューの中のビジュアルエディターとは、通常使用している状態のエディターです。コードエディターにすると、HTMLで入力していく方式のエディターとなります。クラシックエディターではテキストエディターと呼ばれていたものです。

 

下記が切り替え例です(画面右上の3点メニューを開けて切り替えます)。

コードエディター切り替え

上記画像右側のコードエディターを見てみると、通常のHTML(段落タグ<p></p>、見出しタグ<h2></h2>など)に加えて、<!– wp:paragraph –>のような記述が挿入されています。これは、このブロックエディター特有のコメントタグとなっており、通常のHTML以外の記述ルールがあります。

したがって、ブロックエディターのコードエディターでHTML入力していくことは、ルールに則ってコメントタグも挿入する必要があり、難易度が高くなってしまいました。クラシックエディターのテキストエディターでは、純粋にHTML入力でよかったのですが。

 

HTML入力したい場合

しかし、もし、ブロックエディターでHTML入力の必要がある場合は、コードエディターではなく、次の2つのいずれかの方法を使うとよいでしょう。

①各ブロックを入力するときの要素にカスタムHTMLを選択する

カスタムHTMLは、+マークからすべてのブロック一覧を表示させれば、”ウィジェット”というグループの中にあります。

カスタムHTMLブロック

 

②ブロックの詳細設定(ブロック内の3点メニュー)で、HTMLとして編集 と選ぶ

HTMLとして編集したいブロック内の3点メニューを開けて、”HTMLとして編集”をクリックすれば、HTMLでの編集が可能となります。もう一度3点メニューから”ビジュアル編集”をクリックすると、元のビジュアルモードに戻ります(下記画像参照)

HTML編集の方法

 

 

ツールと設定メニューのオプション

ツールと設定ボタンをクリックして表示されるメニュー内のオプションをクリックすると、文章パネル(編集画面右のパネルで文章タブ選択時)に表示されるカテゴリー、タグ、ディスカッションなどの項目の表示・非表示が選択できます。

ツールと設定>オプション の説明

これらの項目は、人によって使用の有無がありますので、使用するものは表示させておくとよいでしょう。

 

 

情報パネル について

編集画面右に表示される情報パネルは、タブの切り替えによって、文章パネルブロックパネルとに分かれます。

 

文章パネル

文章パネルの中には、

・ステータスと公開状態
・パーマリンク
・カテゴリー
・タグ
・アイキャッチ画像
・抜粋
・ディスカッション

といった項目が並んでいます。ほとんどが、クラシックエディターと同様の機能内容となっていますので、ここでは、『ステータスと公開状態』について、下記画像で説明します。

文章パネル の説明

文章パネルのステータスと公開状態をクリックすると、公開状態などが表示されるようになります。

公開状態では、公開、非公開、パスワード保護が選択できます。いったん公開しても、非公開にすることもできますし、パスワード保護を選択してパスワードを設定してやれば、ページを閲覧時にパスワードの入力を要求されるようになります

また、公開今すぐのところでは、予約公開ができるようになっています。

 

 

ブロックパネル

ブロックに入力を始めると(入力するブロックにカーソルを置くと)、自動的にそのブロックに対応するブロックパネルに切り替わります。

下記は、ブロックが段落、見出し、画像の場合のそれぞれのブロックパネルの表示を表したものです。

ブロックパネル比較

編集中のブロックの要素によって、ブロックパネルでできる機能は異なりますが、ほぼ直感的に理解できる編集機能と言えるでしょう。

 

 

まとめ

以上、ブロックエディターの編集画面での各機能について解説してきました。

記事の入力をしていく前に、ツールバー、制御ボタン、情報パネルのそれぞれが、どのような役割を持つのかを知っておけば、効率よく記事の入力・編集ができるでしょう。

また、ツールバーを始め、クラシックエディターにはないブロックエディターならではの機能も存在しています。

 

注意点としては、クラシックエディターのテキストエディターに相当するコードエディターでは、HTML入力時に、ブロックエディター特有のコメントタグも入力していく必要があります。したがって、コードエディターでのHTML入力は、難易度が高いものと言えるでしょう。

そこで、HTML入力は、コードエディターではなく、ブロック要素の中のカスタムHTMLを使用するか、ブロックの詳細設定でHTMLとして編集を使用することがお勧めです。

 

これらの機能を理解し、徐々にブロックエディターを使いこなせるようにしていきましょう。

 

 

 

 

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

オンラインで開催して好評だったセミナー”ワードプレス100分体験セミナー(ブログサイト制作)”をamazonキンドルにて書籍化しました。

amazonページはこちら