メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
リッチテキスト内で文字色を部分的に変更する方法
リッチテキスト内で文字色を部分的に変更する方法

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

Saika avatar
対応者:Saika
今週アップデートされました

対象プラン:全プラン


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

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

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

注意:通常のテキストボックスには特殊スタイルの設定はできないため、必ずリッチテキストボックスをご利用ください。

ユースケース

下記のような場合に、文字のスタイル(装飾)を変更します。

  • 「セール価格」や「期間限定」などの重要な情報やキーワードを目立たせることで、閲覧者の注意を引いて見落としを防ぐことができます。

色の設定方法

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

Step 1. 色の定義

  1. リッチテキストをダブルクリックして編集モードに入り、色を変更したい箇所を選択します。

  2. 選択したまま、一時的に特殊スタイルを適用します。

  3. リッチテキスト外を一度クリックして編集モードを解除し、変更を反映します。

  4. リッチテキストボックスをダブルクリックして、再度編集モードに入ります。

  5. 特殊スタイルを適用した箇所を選択し、色やを変更します。

  6. 色以外のスタイルを解除します。

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

Step 2. 定義した色の適用

  1. リッチテキストボックスをダブルクリックして編集モードに入り、定義した色を適用したい箇所を選択します。

  2. 特殊スタイルを設定して、色を適用します。

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

よくある質問

Q. CMS記事ごとに色の定義を変えたいです。設定方法を教えてください。

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

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

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

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

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

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