【図解】WordPressのブロックエディターの使い方と移行メリット

当ページのリンクには広告が含まれる場合があります。
ブロックエディタの使い方

WordPress5.0から導入されたブロックエディターが登場して、約4年が経過しました。

初めて登場した時は、「使いにくい」「意味がわからない」と散々酷評され、「当面クラシックエディタで行く」宣言があちこちで見られました。

しかし、ブロックエディターをベースにしたWordPressテーマが増えてきたことや、継続的に使い勝手が改善され、現在では「ブロックエディターが基本」になりつつあります

ブロックエディターへの移行を見合わせていた人も、そろそろ移行するべきか迷っていらっしゃる方も多いのではないでしょうか。

本記事では、ブロックエディターの基本的な使い方と、移行するメリットを解説します。

ブロックエディターを使えば、今までよりも記事作成にかかる時間を短縮することもできるので、是非使い方を覚えてください。

本記事の内容
  • ブロックエディターとは
  • ブロックエディターに移行するメリット
  • ブロックエディターの基本的な使い方
  • ブロックエディターの使いこなし
本記事の内容詳細(目次)

ブロックエディター(Gutenberg)とは

ブロックエディターはWordPress5.0から採用された、ワードプレスの標準的な記事編集エディタです。

最大の特徴はブログ記事を「ブロックの集合体」とみなして編集するスタイルが採られている点です。

積み木のようにブロックを積み上げて記事を作っていくためブロックの移動や複製を直感的に行うことができ、HTMLやCSSの知識がなくても記事の作成が可能です。

開発のプロジェクト名がGutenberg(グーテンベルク)だったことからこの名前で呼ばれることもあります。

ブロックエディターに移行するメリット

ブロックエディターを利用すると、クラシックエディタを使っている時に比べ、

  • 執筆速度が上がる
  • 便利な機能が利用できる

といったメリットがあります。

クラシックエディターはコーディング

クラシックエディター(旧エディター)の執筆スタイルは、記事の執筆(ライティング)というより、コーディングに近いものです。

旧エディタでも、ビジュアル編集モードであれば、見出しなど、記事の半分くらいは「見たままの編集」になっていました。

しかし、テーマが拡張するパーツはどのWordPressテーマでも基本はショートコード方式が採用されています。

クラシックエディタではビジュアルエディタでもショートコードが中心
Affingerでボックスを入れようとした場合

問題はこれらのショートコードには多くの属性が付与されており、実質的にHTMLのコードを編集しているのと大差がない点です。

本文を書く時間のかなりの時間がコードの編集に割り当てざるを得ないクラシックエディタだと、実際に行っているのはコーディングと言えます。

ブロックエディターはライティング

ブロックエディタでの編集は選択中心
ブロックエディターでの編集は選択中心

一方ブロックエディターではHTML的なコーディング要素はほとんどなく、見栄えはブロックスタイルのパネルで「選択」する方式になっています。

ブロックエディターでの編集感覚はあくまでライティングで、コーディングをしている意識はほぼ皆無です。

公開後の状態が執筆中も常に確認できるため、コードがきちんと書けているかプレビューする手間もなく執筆に集中できます

プレビューが不要になる

ブロックエディターでの編集では、ほとんど「見たままの編集」が可能です。

例えば、ボックスを一つとっても、ショートコードだとプレビューをするまでわからないですが、ブロックエディターなら見たままの編集が可能になります。

ブロックエディターを利用すると、プレビューは最終確認の時だけすれば良くなります。

テンプレート管理機能と定型文機能が標準搭載

ブロックエディターには、再利用ブロックというテンプレート管理機能があります。

再利用ブロックはテンプレート管理機能のようなもので、一か所修正すると利用しているすべての箇所を一気に更新できる機能です。

また、ブロックパターンという定型文機能があり、複数のブロックを組み合わせたパーツをあらかじめ登録しておき、いつでも呼び出して使うことができます。

ブロックパターンの方は一括管理機能はないのでパターン自体を変更しても他のところに影響は与えないため、再利用ブロックと使い分けることができます。

挿入できるパーツをプラグインで増やせる

WordPressテーマを選ぶ際は、ステップが使えるとか、ボックスの装飾がいくつあるといった、「使えるパーツの豊富さ」が重要ですよね。

クラシックエディタでは、エディタの機能がWordPressテーマに「癒着」しており、第三者が作ったパーツを追加することが困難でした。

ブロックエディターではエディター機能はWordPress側に標準化されたため、第三者の作ったプラグインでパーツを追加できるようになりました。

テーマに不足するパーツは、外部プラグインで拡張して追加できます。

WordPressテーマのブロックエディターへの対応状況

ブロックエディターは登場から約4年が経過しました。

現在の各WordPressテーマのブロックエディタへの対応状況は以下のようになっています。

テーマ名対応状況対応方法
SWELLブロックエディターが前提
Affinger専用プラグイン
The THOR非対応
DIVER対応強化中
SANGO専用プラグイン→テーマに統合
STORKほぼ対応
JIN:Rブロックエディターが前提
賢威非対応
Cocoonほぼ対応
Lightning専用プラグイン
Luxeritasほぼ対応
Snow Monkeyブロックエディターが前提
THE SONICブロックエディターが前提
般若ビルダー専用プラグイン

有料テーマ・無料テーマを問わず、ほとんどのテーマでは何らかのブロックエディター対応は行われています。

ただし、対応度合いはテーマによって差があり、上記のうち二重丸を付けたもの以外は完全に最適化されているとは言えません。

ブロックエディターはReactと言われるJavaScriptのフレームワークを使って作られています。WordPressテーマ開発者は従来のようにPHPだけでなく、Reactにも精通が必要になったため開発難易度が上がっているといわれています。このため、従来型のテーマをブロックエディターに対応させるのには各制作者さんも苦労されているようです。

ブロックエディターの画面構成

ブロックエディタの画面構成
ブロックエディターの画面構成

クラシックエディターでは、上部ツールバーに装飾機能が固定・集約されていましたが、ブロックエディターでは必要なものを必要な時に表示を切り替える方式がとられています。

画面上部は公開や、記事情報といったブロックに依存しない情報が固定表示されます。

中央カラムはコンテンツの編集エリアで、画面に表示されるコンテンツの内容は基本的にこのエリアで編集します。

右側はブロックを選択する都度内容が変化し、そのブロックの表示・装飾・ふるまいなどを編集するエリアになっています。

左側は挿入可能なブロックを一覧表示されます。

ブロックエディターの基本的な使い方

ブロックエディターでの基本的な編集スタイルを解説します。

ブロックの挿入方法

ブロックエディターでは、最初に挿入するブロックを選択します。

ブロックの挿入方法は、以下の4つです。

  • ツールバーの青い+マークを押して左側のパネルから選択する方法
  • 編集エリアで黒い+マークを押してそこから選択する方法
  • 編集エリアの黒い+マークから<すべて表示>で左側のパネルから選択する方法
  • ブロックをコピーして複製する方法
ブロックの挿入方法例
編集エリアで黒い+マークを押してそこから選択する場合

ブロックの種類

使用可能なブロックは大きく標準のブロックと拡張されたブロックに分かれます。

テキスト

テキスト系ブロック一覧
テキスト系ブロック一覧

段落や見出しなど、利用頻度が高いブロックがあります。

ただし、あまり使用頻度の高くないテキスト系ブロックも多いので、設定画面で非表示にしておく方が良いでしょう。

メディア

メディア系ブロック一覧
メディア系ブロック一覧

画像や動画といった、メディア系のブロックです。

画像や動画以外は、テーマの固有パーツを使う方が柔軟に設定できるので、めったに使うことがないかと思います。

デザイン

デザイン系ブロック一覧
デザイン系ブロック一覧

デザインやレイアウトに関わるブロックが並びますが、多くの場合WordPressテーマ側でも用意があり、使用頻度が高いブロックは少ないです。

ウィジェット

ウィジェット

ウィジェットのグループには、フルサイト編集に対応したブロックテーマでウィジェットを編集する際に使用頻度の高いブロックが含まれています。

日本で配布されているWordPressテーマでフルサイト編集に対応したテーマは限られているので、通常の投稿記事編集においてはほとんどのブロックは使われることはないでしょう。

テーマ・プラグインの固有パーツ(拡張されたブロック)

テーマ・プラグインの固有パーツ
テーマやプラグインの固有ブロック一覧

WordPressテーマで提供されているブロックや、プラグインで拡張したブロックが表示されます。

ブロックのコンテンツを編集

ブロックを選択して挿入すると、からっぽのブロックが挿入されますので、コンテンツを編集します。

クラシックエディタでもやっていた操作なので戸惑うことはないでしょう。

ブロックスタイルの選択

ブロックのコンテンツを編集

各ブロックで選択可能な装飾は右側のパネルに表示されます。形状・色・フォントなどの設定を行います。

ブロックの種類によって表示される選択肢は異なります。

ブロックエディターの設定

ブロックエディターの設定は、それほど多くはありません。

基本的には使用しないブロックやパネルの表示・非表示を切り替えるのが中心です。

効率よく編集するには、使用することがない項目はどんどん削除していくと良いでしょう。

STEP
ブロックエディターの設定を表示
ブロックエディタの設定を表示

ブロックエディターは画面右上の三点リーダーの部分をクリックし、<設定>を選択すると表示されます。

STEP
一般設定
一般設定

一般メニューでは、特に設定の変更をする必要はありません。好みにあわせて変更するといいです。

STEP
表示するブロックの設定
表示するブロックの設定

ブロックの両メニューでは、ブロック挿入パネルに表示されるブロックのうち、不要なものを非表示に切り替えることができます。

結構使わないブロックは多いので、削除しておくと探すのが簡単になります。

STEP
表示するパネルの設定
表示するパネルの設定

パネルは標準で用意されているものと、プラグインやテーマで追加されたパネルの表示・非表示を切り替えることができます。

クラシックエディターにあったパネルと同じようなものです。

ブロックエディターのデメリット

ブロックエディターは非常に便利ですが、多少のデメリットもあります。

リンクやテーブルの「細かい設定」がまだできない

  • リンクにnofollowを入れる
  • テーブルのセルの結合やスタイルを変える

といった、細かい設定は今の時点ではまだできません。

テーマの変更時に編集画面で見れなくなる

WordPressテーマ固有のパーツはテーマを変更すると、編集画面では「ブロックでエラーが出たため表示できません」となってエディター画面に表示することができなくなります。

クラシックエディターでもテーマ特有の機能を利用していた場合に、ショートコードがそのまま表示されたりしますが、編集画面でも再現されなくなるので注意が必要です。

アップデート時に使い勝手が大きく変わることがある

例えばWordPress5.6ではブロックの種類毎にデフォルトスタイルを設定することができましたが、6.0になった際にこの機能が廃止されました。

クラシックエディターはエディター機能がテーマ側に任されていたため、WordPress本体のアップデートの影響を受けにくかったのですが、ブロックエディターは標準の本体機能のため、バージョンアップ時に影響を受けます(各テーマの作者様が必至で追従されています)。

クラシックエディターからブロックエディターに移行する方法

クラシックエディターからブロックエディターに移行する方法は以下のとおりです。

ブロックエディターを前提にしたテーマに乗り換える

ブロックエディターへの移行で最もおすすめなのは、ブロックエディターを前提にしたテーマに乗り換えることです。

ブロックエディターが登場後にリリースされた比較的新しいテーマが多いため、標準ブロックも拡張されて使い勝手がよくなっているものが多いです。

ブロックエディターに完全対応しているテーマ
  • SANGO(Ver3以降)
  • The SONIC
  • SNOW MONKEY
  • 般若ビルダー

クラシックブロックを活用する

現在使っているWordPressテーマでブロックエディターに移行するなら、クラシックブロックを活用すると良いです。

クラシックブロックとは、クラシックエディターをブロックエディター内で使用するブロックです。

ブロックエディターに完全対応していないテーマなら対応度が高まるまでの間クラシックエディターを併用しながらブロックエディターを使えば、クラシックエディターでのみ使えるパーツもブロックエディター内で利用できます。

設定箇所が都度表示されることに慣れよう

クラシックエディターでは、編集用のパーツを挿入する箇所が上部に固定されており常時表示されたままでした。

ブロックエディターに移行した際に面食らうのは画面がシンプルすぎて、やりたい操作が見つけにくいと感じる点です。

ブロックエディターでは、必要な時に必要な要素が現れるようになっています。

また、上部ツールバーに共通の編集ボタン、右側パネルでスタイル設定、左側パネルで挿入するブロックを選択と、一か所に固まっていないので、まずはこれに慣れましょう(すぐ慣れます)。

補足:クラシックエディターに戻す方法

WordPress5.0からは新規インストールするとブロックエディターが標準エディターになります。

古いバージョンからアップデートした時にもブロックエディターに強制的に移行してしまいます。

標準エディターをクラシックエディターに戻す場合は、以下の手順でプラグインとしてクラシックエディターをインストール・設定する必要があります。

STEP
クラシックエディターをインストールし有効化する
クラシックエディタをインストールし有効化する

<プラグイン> → <新規追加>を選択すると、Classic Editorが表示されているはずです(なければ検索してください)。そちらを<今すぐインストール>ボタンを押し、<有効化>ボタンを押してください。

STEP
投稿設定を編集
投稿設定を編集

<設定>→<投稿設定>で、「すべてのユーザーのデフォルトエディター」を<旧エディター>にします。

これで、投稿で新規作成した時にクラシックエディターになります。

「ユーザーにエディターの切り替えを許可」を<はい>にしておくと、記事単位でもエディターの種類を切り替えることができるようになります。

まとめ:ブロックエディターを使いこなして執筆に集中しよう

クラシックエディターとブロックエディターの編集スタイルの最も大きい違いは、コーディングをするのか、ライティングをするのかの違いです。

クラシックエディターからブロックエディターに移行することで得られる最大のメリットは、執筆に集中できるようになるため執筆(装飾)効率が上がる点です。

運営中のブログを完全に移行するにはやや作業ボリュームは大きいですが、一度移行を済ませてしまえば移行の労力を回収できるほどの効率性が手に入るので是非挑戦してみてください。

おすすめの移行方法は、標準ブロックの使い勝手が抜群のSWELLに乗り換える方法です(現時点では有料テーマのユーザー数も最も多くなっています)

SWELLについて詳しく知る

ブロックエディターの使いこなし11選

本記事の内容詳細(目次)