Houn

記事内に広告を含む場合があります

詳しく見る
WordPress

公開日:2022.06.12

更新日:2023.07.10

【WordPress】一部の文字色だけ変更(ブロックエディタ)

サンプルを兼ねた記事の概要

WordPressのブロックエディタで、ブロック内のうち一部の文字だけ色を変更する方法の紹介です。

文字色だけでなく背景も変更できます。

右メニュー「色」からは変更できない

おそらく最初に試すのは、目的の文字をドラッグで選択状態にして右メニュー内「色」から変更する方法だと思いますが

右メニュー「色」で操作

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

ブロック全体の文字色が変わった

「ハイライト」を使用する

一部の文字色だけを変更は「ハイライト」という機能を使うことで可能になります。

目的の文字を選択した状態で

  1. 下向き矢印アイコンをクリック
  2. 「ハイライト」を選択
「ハイライト」を選択する

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

色を選択

以上で変更できます!

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

あなたのWordPressは安全・快適ですか?

サイト引越し屋さんと提携!WordPress移転代行はお任せください
  • サイト表示が遅く、サーバーを切り替えたい
  • 管理画面に警告が出ているが、どうしたら良いか分からない
  • テーマを安全に切り替えたい
  • カスタマイズをしたいetc.

当事務所は利用者数No.1、2,000サイトを超える対応実績を持つ「サイト引越し屋さん」と提携しております。
お気軽にご相談ください。お見積りは無料です。

詳細ページ:【特典あり】サイト引越し屋さんと提携!WordPress移転代行はお任せください

文字の背景に色を付ける

次は、文字色を変えるのではなく背景色を付けてみます。

先ほど同様、目的の文字をドラッグで選択状態にして

  1. 下向き矢印
  2. 「ハイライト」
「ハイライト」を選択

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

あとは、その状態で色を選ぶだけです。

できました!

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

なおこの例だと、赤背景×黒文字で少々読みづらいですね。

そういう場合は再度ハイライト→「テキスト」を選択して、例えば白文字にしてあげます。

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

見出し、リストなどにも使えます

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

見出し

手順は同様です。

見出しテキストの任意の位置をドラッグして「ハイライト」。

見出しブロックでも一部文字色変更

リスト

リストも同じく、項目のテキスト任意の位置をドラッグして「ハイライト」です。

実際に書いてみました。

  • 通常の項目
  • 通常の項目
  • 特に重要な項目
  • 一部だけ強調したい項目

まとめ

一部の文字色もしくは背景色の変更、操作自体は簡単なのですが、どこからおこなうか?が少し分かりづらいですよね。

ぜひ、活用してみてください。