メインコンテンツにスキップ

文字の色や背景色を部分的に変更する

リッチテキストボックスを使って、一部の文字の色や背景色を変更する方法を紹介します。

リッチテキストボックスを利用する

リッチテキストボックスを使うと、太字・斜線・下線などの特殊スタイル見出しタグを付けることができます。特殊スタイルや見出しタグを応用して、ボックス内の一部テキストの色を個別に設定できます。

この記事では、リッチテキスト内の一部文字で色を変える方法をご紹介します。

注意:通常のテキストボックスには特殊スタイルの設定ができません。リッチテキストボックスをご利用ください。

リッチテキストを使った文字色の一部変更方法

特殊スタイル(太字・イタリック・下線)や見出しタグ(<h1>〜<h6>)ごとに色をあらかじめ定義して、文字に適用します。

Step 1. 範囲の指定

太字などの特殊スタイルを部分的に適用すると、リッチテキストのうちその部分だけを選択できるようになります。

  1. リッチテキストをダブルクリックし、色を変更したい箇所を選択します。

  2. 選択したまま、一時的に特殊スタイルを適用します。(太字など)

  3. リッチテキスト外を一度クリックし、変更を反映します。

Step 2. スタイルと色の定義

  1. リッチテキストボックスを再度ダブルクリックします。Step1で変更を適用した部分のみをクリックできるようになっています。

  2. 選択箇所の色を変更します。

  3. 色の変更後は、右パネルを使い、2で適用したスタイルの外見を調整します。右パネルが閉じている場合は開いてください。

Step 3. 定義した色の適用

  1. リッチテキストボックスをダブルクリックし、色を適用する箇所を選択します。

  2. Step1,2で利用したスタイル(太字など)を適用すると、スタイルに応じて定義済みの色が自動で反映されます。

GIF:リッチテキスト内で、特殊スタイル(太字・イタリック・下線)ごとに定義した色を適用する様子。

よくある質問

Q. CMS記事ごとに色の定義を変えたい

A. 同じCMSモデル内では特殊スタイルの設定が共有されるため、記事ごとの色定義はできません。

例えば、ある記事で太字テキストの色を赤に変更すると、同じモデル内の他の記事の太字テキストも全て赤くなってしまいます。

対応方法として、以下の2つの選択肢があります:

  1. 異なるCMSモデルを作成して記事を管理する

  2. 異なる特殊スタイルを使用する

関連記事

こちらの回答で解決しましたか?