Gutenbergで一部の文字色を変更する方法

2018年末から本格的に実装されたWordPress5.0「Gutenberg」。

旧バージョンとは全く異なり、それぞれのコンテンツが各ブロックに分けられるようになりました。

僕も早速Gutenbergに慣れていこうと色々試しているのですが、様々な便利機能が追加されて作業スピードが上がった反面、「ちょっとこれは使いづらいな…」と感じる部分も少なくありません。

中でも当初最も悩まされたのが「文字色」と「背景色」の設定方法。

もともとのGutenbergの機能で色を変更しようとするとブロック全体に反映されてしまい、一部の文字だけピンポイントに変更することができなくなってしまったんですよね…。

そんな以前の僕と同じ悩みを抱えている人も多くいると思うので、今回はGutenbergで一部の文字色・背景色だけ変更する方法を紹介していきます。




ブロック全体の色が変更されてしまう

冒頭でも言った通り、Gutenbergでは同じブロック内の一部の文字だけ色を変更するということができません。

ブロック内全ての文字色を変更したい時は便利ですが、どちらかというと一部を変更したいという時の方が頻度としては高いと思います。

重要な単語、あるいは短文をカラーリングして強調させたいと思う時はよくあると思いますが、Gutenbergだと画像のようにブロック内の全ての文字色が変わって、ビジュアル的にもちょっとうるさいです。

これは困った…。

クラシックブロックか旧エディターでもできるけど…

ただ一応方法がないというわけではありません。

例えばクラシックブロックを使えば、これまで通りの操作で文字色を変更することができます。

ただこれだとせっかくGutenbergを使うメリットを失ってしまいますよね。

細かくブロック分けされているからこそ臨機応変な編集ができるのに、これではちょっと意味がありません。

ちなみに一部の文字色を変更した後、「ブロックへ変換」を選択すれば文字色はそのままの状態で通常ブロックに戻ります。

しかしこれでは手間がかかりすぎ。

文字色を変更する度にいちいちやってられません。

それか一層のこと「Classic Editor」のプラグインをインストールして旧エディターを使うか、です。

実際そちらの方が使い慣れている人の方が多いですしね。

しかし遅かれ早かれGutenbergが主流になっていくのは間違いないでしょうし、使いこなせれば旧エディターより早く作業をすることができそう…。

なのでやはりGutenbergの通常ブロックで手っ取り早く一部の文字色を変更できるようになりたいところです。




プラグイン「Advanced Rich Text Tools for Gutenberg」を使う

前置きはこれまでにして、Gutenbergの通常ブロックのまま一部の文字色をサクサクっと変更する方法、それは「Advanced Rich Text Tools for Gutenberg」というプラグインを使用することです。

こちらがそのプラグインですが、あまり普及していないのか、プラグイン名を正確に入力してもトップには出てきません。

最上段から2、3段ほど下の方に表示されていると思うので、これをインストール・有効化してください。

有効化すればもう何も設定する必要はありません。

いつもの編集画面に上の四角内の項目が追加されていると思います。

現在は日本語に対応していないようで英語表記しかされないのですが、使い方はシンプルなので迷うことはないと思います。

「Inline Text Colour」は選択した部分の文字色、「Inline Background Colour」は選択した部分の背景色をそれぞれ変更することができます。

「Remove Formatting」は選択しているブロック内全ての装飾を取り除きます。

これによって理想通りの文字色変更をすることができました!

一つプラグインを使うだけだったので簡単だったと思います。

簡単にカスタムカラーにする方法も紹介

ちなみにですが、以下の記事ではパレットにカスタムカラーを登録する方法を紹介しています。

デフォルトのパレットに好みのカラーがない人も多いと思いますが、いちいちカラーピッカー(虹色のやつ)で調節するのは面倒ですよね。

あらかじめ登録しておくことでサッと好みの色を使用できるようになるので、合わせてご覧ください。

Gutenbergの文字色をカスタムカラーに変更する方法