WordPressブロックエディターはなぜ使いにくい？その理由と克服するコツ10選
WordPressでこのウェブチルサイトの記事を書くとき、私はGutenberg（ブロック）エディターを使っています。
しかし他のサイトでテーマによっては、クラシックエディターで記事を書いている場合もあるのです。
Gutenbergの対応が不十分なテーマの場合、素のGutenbergに近く使いにくいためです。
先日そんな他のサイトでGutenbergで記事を書いてみると、やはり使いにくい！！
ときどき、セミナー受講者さんから同じような相談を受けることもあります。
そこで、Gutenbergのどこが使いにくいのかに焦点をあて、どう克服したらよいのかを紹介していきます。
①ブロックエディターは直感的に進めることができない
これは仕方がないですね。
クラシックエディターならば、Wordなどワープロの文字入力に慣れた我々にとって、直感的になんとなく使えてしまうところがありました。
しかしGutenbergのようにブロックごとに入力したり組み合わせたりする・・・という発想には慣れていないわけですから。
クラシックエディターの場合は、以下のような編集画面です。
本文入力部の上に直感的に文字装飾に使いやすいツールバーがあって、ワープロさながらに入力・編集が可能です。
それに対してGutenbergの編集画面ですが、本文入力部には”文章を入力、またはブロックを選択”とあるだけで、どう進めたらよいのかわかりにくいですね。
ツールバーも何を示しているのかよくわからないアイコンです。
そこでGutenbergを使いこなすには、まずは基本的な手順３ステップをさっと覚えてしまいましょう。
あとは使用するブロックの種類に応じて使い方のポイントを押さえていけばよいのです。
なお、Gutenbergの編集画面の詳細な解説は、こちらの記事を参照ください。
https://web-children.com/2019/08/20/each-function-of-editor-...ブロックに入力する基本的な３ステップ
ブロックエディターの本文を作成する手順は、以下の３ステップです。
（STEP１）まずは+マークをクリック
（STEP2）次にブロックを選ぶ
（STEP3）ブロックに応じて入力する
基本はこれだけです。ちなみに最初は自動的に段落ブロックになっていますので、STEP1と２をスキップして文字入力を始めることができます。
+マークは、編集画面左上とブロックの右の2カ所にあります。どちらをクリックしてもブロック一覧表が表示されますが、ブロック右の+マークの場合、よく使うブロックのみの表示となります。
目的のブロックが表示されない場合は、”すべてを表示”やスクロールをしてブロックを探すことになります。
私は通常はブロック右の+マークから始めます。
その方がマウスを動かす範囲が狭く作業も速いですし、たいてい同じブロックを多用するからです。
でも明らかに普段を使わないブロックを使ってみようと思った場合は、左上の+マークを使います。
②ブロックの種類を覚えるのが面倒
確かに『ブロックの種類は多すぎてとても覚えきれない』と思うかもしれません。
でもすべてのブロックを覚える必要なんかありません。
私にも使ったことがない、あまりよく知らないブロックもあります。
まずは最低限知っておくべきブロックを覚えて、少しづつ自分の用途に合わせて使えるブロックのレパートリーを広げていきましょう。
最低限知っておくブロックはまず３個+１
投稿記事を書くのに最低限押さえておく３つの基本ブロックは、
見出し、段落、画像
の３つです。これさえ使えば、記事作成に必要な見出しまたは段落といった文字入力と画像挿入ができるからですが、あと文章と文章との間に空白をつくる
スペーサー
も頭に入れておきましょう。基本の３個+１です。
基本的な文字入力操作ですが、段落や見出しブロック内でリターンキー（[Enter]キー）を押すと次のブロックに移ります。自動的に段落ブロックが選ばれるので連続的に文章を入力できます。
ブロック内で改行だけしたい場合は、Shift+[Enter]です。このあたりの操作感はクラシックエディターと似ていますね。
段落ブロック、画像ブロックを使った入力の詳しい方法は、こちらの記事で詳しく解説していますので参考にしてください。
空白をつくるスペーサーブロック
文章と文章の間に空白を空けたい場合、クラシックエディターならばリターンキー（[Enter]キー）を押せば空白を作れましたが、ブロックエディターではできません。その代わりに、スペーサーブロックを使用します。
段落ブロックに何も入力せずにリターンキーを押すと改行されて、一見空白が生まれたかのように見えますが、実は実際のページをサイト表示させると空白になっていないのです。
ちなみにスペーサーブロックはブロック一覧の中の”デザイン”の中にあります。
実は私が初めてGutenbergで記事を書いたときにはまった問題点です。スペースブロックなんていう存在も知らなかったので、何度もやり直して、サイト表示させてはがっくり来たものです。
スペーサーブロックでは空白の高さを好きに設定できるので慣れるとかえって便利です。
私は、段落と段落の間は20px、次の見出しh2に移るときは40px、といった感じで決めています。空白の高さはマウスで掴んで上下に動かすだけで調整できます。
スペーサーブロックの高さは、サイト内で何種類かに決めておくのがよいでしょう。いろいろな余白の種類があると、サイトの統一性が損なわれます。
そこで、あらかじめ使う余白の高さをブロックのスタイルとして登録しておき、使う時は選択するだけという方法が便利です。
③ブロックの編集方法がわかりにくい
ブロック編集には、ブロックのすぐ上に表示されるブロック内ツールバーと画面右の表示される情報パネルのブロックタブを使います。ブロックによって、編集できる内容は異なります。
例えば段落ブロックならば、主に、テキストの位置や文字の装飾・ブロックそのものの色/背景色を変更します。
画像ブロックならば、画像の配置位置や画像の角を丸くするなどのスタイル変更ができます。
このように操作方法はブロックにより異なりますが、共通していえることは、ブロックそのものが選択された状態（カーソルがブロック内にある状態）でないと表示されないことです。
特に、画面右の情報パネルは、最初は投稿タブ（固定ページの場合は固定ページタブ）になっていますが、ブロックを選択して初めてブロックタブに切り替わります。
ブロック内外のどこにカーソルを置くかでパネルが切り替わることに慣れないと、あれ？さっきできたはずのになぜ表示されないの？なんてオロオロすることになっちゃいますので注意しましょう。
※編集画面右に情報パネルが表示されていない場合は、画面右上の設定（歯車マーク）をクリックすれば表示できます。
④文字装飾がしにくい
これが誰もが経験する、Gutenbergが使いにくいNo1だと思うのですが、Gutenbergは文字毎の装飾が苦手なのです。
段落ブロックの編集機能としては、画面右の情報パネルのブロックタブで
- フォントサイズ
- 文字色
- 背景色
が設定できるようになっているのですが、これはブロック全体に反映される設定で、文字毎に設定することができません。
文字毎の文字装飾は、ブロック内ツールバーで行うのですが、以下の通りで、文字サイズや背景色（すなわちマーカー）、アンダーラインなどの文字装飾機能がないのです。
実はこれでもGutenbergリリース当初に比べて文字毎装飾は増えたほうで、元々はブロック毎に制御するように設計されたようです。
したがって文字毎の制御（装飾）は、便利なプラグインを使用しましょう。
こちらの記事では、段落ブロックの編集方法や、強化プラグインを紹介していますので参考にしてみてください。
ちなみに、文字装飾の機能は、テーマによってもかなり異なりますので、使いやすいテーマを選択するのも賢い方法です。有料テーマだからといって使いやすい機能が揃っているわけでもありませんので注意しましょう。
例えば本サイトで使用しているLuxeritasは無料テーマですが、段落ブロックのツールバーは次の通りです。
文字毎の装飾機能が非常に多彩でわかりやすいですよね。このおかげで、本サイトの記事作成では、ほとんどストレスなく文字装飾ができています。
⑤ブロックの削除がやりにくい
ブロックを削除するには、手順はこうです。
①ブロック内ツールバー一番右の3点メニューをクリック
②”ブロックを削除”をクリック
しかし、この場合、ブロックに何か入力されていないと削除できないことになってしまい不便ですよね。
なので、ショートカットキーを覚えておきましょう。Shift＋Alt＋Ｚです。
⑥ブロックのコピーがやりにくい
複製とコピーとは異なるので覚えておきましょう。
複製はすぐ下に同じ内容のブロックが挿入されます。コピーだとパソコンのコピーと同じでクリップボードに保存されるので、任意の場所にペーストできます。
基本的な方法は、ブロック内ツールバー一番右の3点メニューから操作する方法です。
私のお気に入りのショートカットは、コピーしたいブロックを選択しておいてからCtrl+Ｃでブロックをコピー（クリップボードに保存）です。この後、好きなところにペースト（右クリックで”貼り付け”）できます。
しかし移動は簡単
移動は簡単ですし、クラシックエディターにはない、ブロックならではの操作感です。
ブロック内ツールバーの上下矢印で移動できます。
または、次のようにドラッグ＆ドロップでも簡単に移動できます。
複数のブロックをいっぺんに削除・複製・コピーできる
ここまで解説したブロックの削除・複製・コピーは、１つのブロックだけでなく複数のブロックを同時にすることができます。
方法は、マウスで複数のブロックを連続してドラッグするか、Shiftキーを押しながら始めと終わりのブロックをクリックして選択してから、削除・複製・コピー作業をする、です。
選択されたブロックは青い線で囲まれて表示されますので、わかりやすいと思います。
⑦ブロックの挿入がやりにくい
ブロックの上や下に新しいブロックを挿入は、そのブロックの上の方や下の方にマウスをもっていくと+マークが出るのでクリックすれば挿入できるのですが、慣れないうちはうまく操作できないかもしれません。
そんな場合もブロック内ツールバーの3点メニューから操作すればOKです。
⑧パーマリンクの編集がどこかわからない
パーマリンクに投稿名を含む設定をしている場合は、一般的にスラッグを半角英数字に変更する作業をします。
クラシックエディターの場合は、記事タイトルのすぐ横に表示されていたのですが、Gutenbergではありません。
Gutenbergの場合は、”下書き保存”をすると、画面右の情報パネル（投稿タブ状態）の中にパーマリンクの欄が表示されるようになります。
⑨ダッシュボードメニューが消えることがある
通常、画面右にはダッシュボードメニューが表示されているはずですが、場合によっては消えてしまうことがあります。
これはフルスクリーンモードが自動的に選択されているのです。これを通常モードに戻すには、画面右上の3点メニューをクリックして、フルスクリーンモードを解除しましょう。
同じ場所に、フルスクリーンモードのほかに、トップツールバーモード（ブロック内ツールバーを画面上に表示させる）、スポットライトモード（編集中のブロック以外は、薄く表示される）といったモードもあるので、一度クリックして試してみるとよいでしょう。
私は使いませんが、人によっては、編集済のブロックがツールバーに隠れて見えない、という理由でトップツールバーモードを常時使う人もおられます。
⓾複雑な構造のブロックは使いにくい
ブロックの中には、ブロックの中にブロックがある、入れ子構造になっているものもあります。それも１つだけでなく複数の入れ子構造になる場合もあったりします。
例えば、複数の列を並べてレイアウトできるカラムブロックはその典型ですが、下記は3カラムの場合の構造例です。
カラムブロック全体（緑色）の中に３つのカラム（オレンジ色）があり、それぞれの中には画像ブロックと段落ブロックが存在しています。
こういった複雑な構造を作成・編集していると、うまく目的のブロックを選択できない、とかいうことが起こりがちです。例えば、2カラム目の横幅を変更したいのにその中の段落ブロックが選択されてしまうとか。
あるいは複数の入れ子構造を作成していくうちに、今どんな構造をしているのか把握しにくくなる、ということも起こります。
そんな場合は、ブロックの構造をひと目で確認できる、”アウトライン”を活用しましょう。
ブロックの入れ子構造を”アウトライン”で確認する
アウトラインは、画面左上のツールバーの一番右にあります。例えば、先ほどのカラムブロック全体を選択した状態でアウトラインを表示させると下記のように表示してくれます。
アウトラインは構造を表示するだけでなく、表示した各要素をクリックすると選択して編集できるようになります。
アウトラインを活用すれば、複雑なブロックを扱っていても迷子になることはなくなるでしょう。
以上、Gutenbergの使いにくい理由10選と解決方法をお送りしてきました。ここから先は私のGutenbergの使い方やおすすめを簡単に紹介します。
私のGutenbergエディターおすすめの使い方
クラシックブロックは使わない
クラシックエディターと同じように使用できるからと、クラシックブロックを多用している方もおられるようですが、私はほとんど使用しません。
クラシックブロックは、Gutenberg内の他のブロックに変換できないので、いざというときの拡張性が期待できないからです。
ただし、クラシックエディターで作成した記事をGutenbergに変更したときは自動的にクラシックブロックになってしまうので使わざるとえないですね。
あと、これもメッタにないですが表を使うときです。Gutenbergの表ブロックは機能があまりに乏しいので、表を作成するときに限っては、クラシックブロックを使うことがあります。
親戚のブロックには後から変換できる
一度選択したブロックでも、後から別のブロックに変換できます。といっても同類のブロックに限りますが。
方法は、ブロックツールバーの一番左をクリックして変換したいブロックを選びます。
なので、メモ帳などで下書きした文章をコピペする場合は、いったんすべて段落ブロックとしてペーストされますが、後から必要に応じて見出しやリストなどに変換すればよいですね。
実際、箇条書きに使用するリストブロックは、いったん段落ブロックに入力してからリストブロックに変換した方がスムーズに作業が進みます。
私のお気に入りの機能・ブロック
Gutenbergならではの再利用ブロック
これがないとGutenbergの魅力は半減する、ていうくらいの機能です。
例えば、あちこちの記事で使いまわしたいコンテンツを登録しておく
- 注意！とかヒント！とか、タイトル付で背景色を少し変えた囲み枠など
- 広告の挿入
- アピールしたい記事
など、登録しておくと便利です。
詳しい使い方は以下の記事を参照ください。
また、テーマLuxeritasでは再利用ブロックをウィジェットにも登録できるので、記事内以外のスペース（サイドバーや記事下など）に自動挿入しています。
人気のブロックは”カバー”だけどよく使うのは”カラム”
Gutenbergにはクラシックエディターでは作れないコンテンツを作成できるブロックがたくさんあります。
一番人気のブロックは、このウェブチルサイトのGutenberg関連の記事のアクセス数から推測するとカバーブロックです。画像の上に文字を重ねることができるので、雰囲気のよいコンテンツが簡単に作れます。
でも私が個人的によく使うのはすでに紹介したカラムブロックです。
投稿（ブログ記事作成）の中で、２つの画像を横に並べて比較説明するのに使用したり、画像と説明文を並べたりします。
また、固定ページなどでレイアウトを1カラムにしている場合、横幅が広すぎる文章は読みにくいので、カラムブロックで文章やコンテンツを小分けしてレイアウトします。
まとめ
Gutenbergの使いにくい理由10選を思いつくまま解説してみました。
個々のブロックを見れば、他にもいろいろとわかりにくい点、改善して欲しい点、このままではまともに使えない点など、まだまだ不満点はありますが、カスタムCSSでうまく調整したり、プラグインで別のブロックを強化して使ってみたり、と選択肢はいっぱいあります。
何よりもGutenbergは2018年末にリリースされてからどんどん進化しているのが目が離せないところです。
ぜひ使いこなして、あなたのWebサイトを充実させていきましょう。
