公開日:2022.06.12
更新日:2022.11.20
【WordPress6.1】一部の文字色だけ変更(ブロックエディタ)

サンプルを兼ねた記事概要
WordPressのブロックエディタで、ブロック内のうち一部の文字だけ色を変更する方法の紹介です。文字色だけでなく背景も変更できます。
右メニュー「色」からは変更できない
おそらく通常、最初に試すのは、目的の文字をドラッグで選択状態にして右メニュー内「色」から変更する方法だと思いますが

この場合、選択状態の文字を含んだブロック全体の文字色が変わってしまいます。

「ハイライト」を使用する
一部の文字色だけを変更は「ハイライト」という機能を使うことで可能になります。
目的の文字を選択した状態で
- 下向き矢印アイコンをクリック
- 「ハイライト」を選択

そして任意の色を選択します。

できました!
選択した文字だけ色が変わっています。

文字の背景に色を付ける
次は、文字色を変えるのではなく背景色を付けてみます。
先ほど同様、目的の文字をドラッグで選択状態にして
- 下向き矢印
- 「ハイライト」

出現した色選択窓にある「背景」をクリックします。最初は「テキスト」になっているのを切り替える形ですね。
あとは、その状態で色を選ぶだけです。

できました!
文字色はそのまま、背景色が付きました。

なおこの例だと、赤背景×黒文字で少々読みづらいですね。
そういう場合は再度ハイライト→「テキスト」を選択して、例えば白文字にしてあげます。

これで見やすくなりました。

見出し、リストなどにも使えます
「段落」ブロックだけでなく「見出しブロック」「リストブロック」などにも使えます。
見出し

リスト
実際に書いてみました。
- 通常の項目
- 通常の項目
- 特に重要な項目
- 一部だけ強調したい項目
WordPressに関するご相談承ります
サーバーの移転(いわゆる”WordPressのお引越し”)や各種カスタマイズ。
また「管理画面に『更新してください』『サイトに重大な問題があります』と警告文があるがどうしたら良いか分からない」などといったメンテナンス面でのご不安ごとなど。
当事務所でお役に立てるかも知れません。ヒアリング・初回見積は無料です。
まずはいちどお気軽にご連絡ください。