WordPress ブロックエディターで文字色を変更する方法(全体 or 一部)

WordPressのGutenberg(グーテンベルク)で、ブロック全体の文字色を変更する場合と、ブロック内の一部の文字色を変更する場合の方法を解説します。

ブロック全体の文字色を変更

ブロック全体の文字色を変更は、以下の手順で出来ます。

デフォルトの色を指定する場合

ブロック内にカーソルを合わせる

右メニューの「色」>「テキスト」をクリック
カラーパレットから色を選択
完了

ブロック内の文字色が変更されました

オリジナルの色を指定する場合

カラーパレットから色を選択する場合

ブロック内にカーソルを合わせる
右メニューの「色」>「テキスト」>をクリック
カラーパレット上部の格子模様をクリック
赤丸を左クリックしたままスライド
指定したい色をクリック

16進数「例:#ff0000」で指定する場合

ブロック内にカーソルを合わせる
右メニューの「色」>「テキスト」>をクリック
カラーパレット上部の格子模様をクリック
スライダーアイコンをクリック
カラーを指定

ブロック内の一部の文字色を変更

ブロック内の一部の文字色変更は、現在のWordPressバージョン(WordPress 5.9.3)のビジュアルエディターでは出来ないので、コードエディターまたはプラグインを使用して指定します。

コードエディターで色指定

文字色を変更したいブロックにカーソルを合わせる
オプションをクリック

一番右の:をクリック

コードエディターをクリック
文字色を変更したいテキストの前後にコードを入れる

テキストの前に、<font color="#〇〇〇"> を記述

テキストの後に、</font> を記述

下記例では、「文字の一部の色を変更」の文字色を変更したいので、その前後にコードを記述しています。

コードエディターを終了をクリック
完了

ブロック内の一部の文字色が変更されました

プラグインで色指定

記事作成中です。今しばらくお待ちくださいませ(汗;)