Gutenbergエディタで文字色を変更する

2019年8月18日

WordPressのバージョンが5.0になったのに伴い、エディタも大幅に変更されています。使いながら「前使っていた時となんか操作が違うな・・・!」とは思っていたのですが、全然違うエディタになっているみたいです。Gutenberg(グーテンベルク)というかっこいい名前もついています。

このエディタはかなり使いやすいのですが、致命的な欠点がありました。

記事を読みやすくするために、文章の一部の文字にマーカーを引くようにして背景色を変えることがあると思います。

この太字になっているところを琥珀色マーカーを引こう・・・

ありゃ!ブロック全体が変わってしまいました。
いろいろ探したのですが、文字の一部の背景色を変えることができません。

調べた結果、グーテンベルクでは文字の一部の背景色を変えることはできないそうです(^^;
そこで、新たにプラグインを導入することが必要になるようです。

プラグイン「Advanced Rich Text Tools for Gutenberg」 をインストールする

いろいろ調べた結果、Advanced Rich Text Tools for Gutenbergというプラグインをインストールすると解決できることがわかりました。さっそく「プラグイン→新規追加」を選択し、右上の検索窓に「Advanced Rich Text Tools for Gutenberg」と入れて検索します。

一番上ではないのですが、よく探すとAdvanced Rich Text Tools for Gutenbergがヒットします。

「今すぐインストール」をクリックして、インストールします。

「有効化」をクリックすると「プラグイン→インストール済みプラグイン」のページに飛びます。

プラグイン「Advanced Rich Text Tools for Gutenberg」の左に青いマーカーが引かれ、「停止」となっていたら有効化されているということです。

編集画面で文字の背景色を変更する

再び編集画面にもどると、プラグインを導入したことによってエディタが変化しています。

右側に「Inline Text Colour」「Inline Background Colour」というのがありますね。
「Inline Background Coulour」のほうが背景色ですので、こちらを使って変更します。

変更できました。

Advanced Rich Text Tools for Gutenbergではこのように文字の背景色・文字色の変更の他、上付き文字・下付き文字の設定もできます(こちらはエディタの上部で操作ができます)。

ただ、色の細かい設定の仕方はできないのか、今のところ操作方法はわかりません。
琥珀色だとちょっと色が濃すぎるので、もっと淡いレモン色くらいの黄色にしようと思いました。一応右下の虹色のところをクリックすると様々な色を選択できるのですが、その設定を保持できないためいちいち設定し直さないといけません。

面倒だったので一旦太字や文字の大きさで代替しようと思います。

まとめ

文字の背景色の変更について書いてきました。そもそもこの変更方法を「インラインの文字の背景色の変更」ということすら初めはわかっていませんでした。

このワードで調べるといろいろと出てきます。それこそマーカーを引くという機能のあるプラグインもあるようなので、またいろいろ試してみたいと思います。