WordPressの新エディタGutenbergの使い方【使いづらさを緩和する】

この記事を書いた人

このような悩みを解決します。 WordPressのバージョンが5.0になってからGutenbergエディターとなりましたが、使いづらくてClassicEditorを使用していた人も多いのではないでしょうか。 ぼくもその一人で、Gutenbergが使いづらくてClassicEditorを使ってブログを書いてきました。 しぶしぶGutenbergを使ってみたのですが、使いづらいと感じていたのはGutenbergの仕組みを知らなかったからでした。 そこで、今回はClassicEditorを使っていたWordPressブロガーが、Gutenbergを使えるようになる方法を解説します。 本記事を読むことでGutenbergの苦手意識が無くなります。ぜひ最後までご覧ください。

\ 当サイトも使ってるWPテーマ『AFFINGER5』/

当サイト限定の10特典付き

WordPressの新エディタGutenbergの使い方

  WordPressでGutenbergを使うときに使いづらいと感じるのは、ブロックの概念があるからですよね。 しかし、Gutenbergは必ずしもブロックを使わなければいけないというわけではありません。 Gutenbergが使いづらいと感じている場合は、クラシックブロックを使っていきましょう。

クラシックブロックを使う

Gutenbergのクラシックブロックを使うのは簡単です。 Gutenbergで記事作成画面を開いた時に、右側を見ると＋マークが表示されていると思います。 ＋マークをクリックすると『追加するブロック』を選択するポップアップが表示されるので、『フォーマット→クラシック』と選んでいきましょう。 すると、今まで使っていたClassicEditorのビジュアルエディター画面がブロック内に追加されます。 あとは、今までClassicEditorでブログを書いていた感覚で使えばOKです。

TinyMCE Advancedを設定しよう

実はGutenbergでクラシックブロックを一番最初に使ってみると、『スタイル』が表示されていない状況になっています。 そのため、TinyMCE Advancedでスタイルが表示されるように設定しなければいけません。 とはいえ簡単で、スタイルボタンをツールバーにドラッグするだけでOKです。 ダッシュボードのツールからTinyMCE Advancedを選択して、『ブロックエディター (TinyMCE)』のタブになっていることを確認してスクロールしていきましょう。 すると、参考画像の『クラシック版の段落とクラシックブロックのツールバー』という部分が表示されると思うので、スタイルボタンをツールバーにドラッグして移動できたらOK。

Gutenbergを使う時の注意点

ここまでで、ClassicEditorのテイストを残しつつGutenbergを使用する方法について解説してきました。 次に、Gutenbergでクラシックブロックを使用する時の注意点についても紹介しておきたいと思います。

ひとつ前に戻るショートカットキーに注意

ブログを書いていて、何か間違ったときに『Ctrl + Z』もしくは『Command + Z』を使うことがあると思います。 しかし、ひとつ前に戻るショートカットキーを使用すると、以前のようにひとつ前に戻るという動作はしないので注意が必要です。 そのため、Gutenbergのクラシックブロックを使用して記事を書いているときには、ひとつ前に戻るショートカットキーは使用しないようにしましょう。

クラシックブロックでは改行が反映されない

クラシックブロックを使ってみて『できたじゃん！！』と思ったのですが、ここでも問題が。 それは、今まで1行の文章を書くたびにEnterを2回タイピングして空間を空けていたのですが、クラシックブロックではそれが反映されません。 そのため、クラシックブロックで記事を書いたあとには、ブロック化をして最終的にGutenbergのブロックにする必要があります。

クラシックブロックをブロックへ変換

クラシックブロックでいつも通りに記事を書いたら、左上の点線をクリックして『ブロックへ変換』という項目をクリックしましょう。 そうすることで、クラシックブロックで書いた段落や画像、吹き出しなどが自動的にブロック化されます。 ブロックへ変換したとしても今まで通りの行間が反映されるわけではないため、空白を開けるためにスペーサーを挿入しなければいけません。

今までと同じ改行空白を開ける方法

最初に今までの記事を開いて、空白が空いている部分で右クリックをしたら『検証』をクリックしましょう。 するとコードが並んだ画面が表示されるため、画像の右下に表示されている青枠とオレンジ枠に注目します。 これで行の隙間が計算できたので、続いてスペーサーを入れていきましょう。 スペーサーを入れると、記事作成画面の右側で高さの調整ができるようになっています。 次に、画像の赤枠の部分に計算した段落スペースの数値を入力していきます。 段落スペースの数値が入力できたら、『再利用ブロックに追加』をクリックしましょう。 再利用ブロックに追加しておくことで、次回から数値を入力しなくても良くなります。 あとは、クラシックブロックをブロック化して、各段落ごとに再利用ブロックからスペーサーを追加していけばOKです。 再利用ブロックからスペーサーを追加した完成図は、上の画像をご覧ください。

Gutenbergエディタはやっぱり使いづらい

とはいえ、やっぱりGutenbergは使いづらいですね。 クラシックブロックを使えば、今まで通りに記事を作成出来るのは分かったけど、ひとつ前に戻るショートカットキーは使えないし、改行・段落が反映されないし。 正直、クラシックブロックを使ったとしても最終的にブロック化させなければいけないなら、Gutenbergの仕様に慣れるのが一番楽なんじゃないかと思ってしまいました。

Gutenbergのブロックに慣れるのは時間が必要かも

ここまでの内容で、2021年にClassicEditorのサポートが終了しても、ClassicEditorの感覚でブログを書く方法を知ることができました。 さいごに本記事の内容をチェックしておきましょう。 ぶっちゃけClassicEditorと同じ方法で記事が書けることは分かったけど、面倒ですよね。 ただ、ブロック仕様に慣れなければいけないコストはグッと下げられたんじゃないかなと思います。 Gutenbergはまだ改良の余地が沢山あるエディターだと思うので、今後改善が加えられて使いやすくなることを切に願いたいですね。 『ClassicEditorのサポートが終了してGutenbergを使わなければいけない』という状況に絶望した気持ちを、少しでも楽にできたら幸いです。