WordPress

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

アバター画像

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始(27歳)→独立(28歳)→コロナで再就職(29歳)→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

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

この記事を書いた人

この記事を書いた人
あなた
WordPressでClassicEditorを使ってるんだけど、使いづらすぎる...。2021年にサポート終了らしいし、使う以外に道はないのかな...。
このような悩みを解決します。

本記事の内容

WordPressの新エディタGutenbergの使い方 Gutenbergを使う時の注意点 Gutenbergのブロックに慣れるのは時間が必要かも
セイタ
こんにちは、セイタ(@seita_blog)です!
WordPressのバージョンが5.0になってからGutenbergエディターとなりましたが、使いづらくてClassicEditorを使用していた人も多いのではないでしょうか。 ぼくもその一人で、Gutenbergが使いづらくてClassicEditorを使ってブログを書いてきました。
しかし、2021年にClassicEditorのサポートが終了するというアナウンスが流れて絶望。
しぶしぶGutenbergを使ってみたのですが、使いづらいと感じていたのはGutenbergの仕組みを知らなかったからでした。 そこで、今回はClassicEditorを使っていたWordPressブロガーが、Gutenbergを使えるようになる方法を解説します。 本記事を読むことでGutenbergの苦手意識が無くなります。ぜひ最後までご覧ください。

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

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

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

WordPressの新エディタGutenbergの使い方  WordPressでGutenbergを使うときに使いづらいと感じるのは、ブロックの概念があるからですよね。 しかし、Gutenbergは必ずしもブロックを使わなければいけないというわけではありません。
実は、Gutenbergには従来のClassicEditorとほぼ変わりない仕様でライティングできるモードがあります。
Gutenbergが使いづらいと感じている場合は、クラシックブロックを使っていきましょう。

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

Gutenbergのクラシックブロックを使うのは簡単です。 Gutenbergで記事作成画面を開いた時に、右側を見ると+マークが表示されていると思います。
クラシックブロックを使う
+マークをクリックすると『追加するブロック』を選択するポップアップが表示されるので、『フォーマット→クラシック』と選んでいきましょう。 すると、今まで使っていたClassicEditorのビジュアルエディター画面がブロック内に追加されます。 あとは、今までClassicEditorでブログを書いていた感覚で使えばOKです。
『段落ブロック』や『画像ブロック』などをいちいち考え無くて良いので、ClassicEditorのサポートが終わったとしてもクラシックブロックを使えば、使いづらいGutenbergの使用を強いられなくて良い状況にできます。

TinyMCE Advancedを設定しよう

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

Gutenbergを使う時の注意点

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

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

ブログを書いていて、何か間違ったときに『Ctrl + Z』もしくは『Command + Z』を使うことがあると思います。 しかし、ひとつ前に戻るショートカットキーを使用すると、以前のようにひとつ前に戻るという動作はしないので注意が必要です。
というのも、下書き保存をしたタイミングか別のブロックを操作しない限りひとつの作業となるため、かなり前のところまで戻されてしまいます。
そのため、Gutenbergのクラシックブロックを使用して記事を書いているときには、ひとつ前に戻るショートカットキーは使用しないようにしましょう。
セイタ
万が一癖で使ってしまった場合は、『Ctrl + Y』もしくは『Command + Y』でもとに戻せるので、覚えておいてくださいね!

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

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

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

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

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

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

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

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

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

Gutenbergのブロックに慣れるのは時間が必要かも
ここまでの内容で、2021年にClassicEditorのサポートが終了しても、ClassicEditorの感覚でブログを書く方法を知ることができました。 さいごに本記事の内容をチェックしておきましょう。

本記事のおさらい

①:WordPressの新エディタGutenbergの使い方 クラシックブロックを使う TinyMCE Advancedを設定しよう


②:Gutenbergを使う時の注意点 ひとつ前に戻るショートカットキーに注意 クラシックブロックでは改行が反映されない Gutenbergエディタはやっぱり使いづらい

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

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始(27歳)→独立(28歳)→コロナで再就職(29歳)→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

-WordPress
-