サポートアクションではポップアップの位置や余白は画面から調節できますが、文字の装飾についてはあまり設定ができません。

そこで今回は、サポートアクション上で見出しやアンサーが表示される際に、文字の色や大きさなどをカスタムCSSで変更する方法を以下に記載します。
対象のCSSセレクタは「プレビューからCSSセレクタを取得する」から任意のものを設定してください。

以下に記載するCSSを詳細設定＞このステップのカスタムCSSに入れることで、そのサポートアクションでだけ見た目を調整することができます。
ブランド設定に登録した場合、全てのサポートアクションに変更が反映されます。
※カスタムCSSの設定方法はこちらをご確認ください

 

文字サイズを大きくする方法

「font-size」プロパティを利用することで、文字の大きさを任意に変更することができます。
利用できる単位は絶対値である「px（ピクセル）」以外にも相対値である「em」「rem」などがありますが、複雑になるため慣れないうちはpxでの指定を推奨します。
※以下のCSSは見出し（h1）の大きさを少し大きくしています

#rs_sa .c-titleModule-h1 {
  font-size: 24px;
}

尚、初期状態でのサポートアクションの文字サイズは以下になります。

見出し１（h1）	20px
見出し２（h2）	16px
見出し３（h3）	14px
アンサーリストやシナリオのアンサータイトル	14px
アンサー閲覧時のタイトル	20px
アンサー閲覧時の本文（アンサーエディタで変更していない場合）	16px

文字の色を変える方法

「color」プロパティを利用することで、文字の色を任意に変更することができます。
利用できる単位は一般的には「hex」「rgb（rgba）」「名称」などがありますが、文字色を透過させたい場合以外はhex値での指定を推奨します。

※以下のCSSは見出し（h1）の色を赤色にしています

#rs_sa .c-titleModule-h1 {
  color: #ff0000;/* 赤色をhex値で指定する場合 */
  color: rgb(255, 0, 0);/* 同じ色をrgbで指定する場合 */
  color: rgba(255, 0, 0, 0.5);/* 同じ色をrgbaで指定する場合（最後の値を0~1の間で変えることで透過度を変更できます） */
  color: red;/* 同じ色を名称で指定する場合 */
}

文字の太さを変える方法

「font-weight」プロパティを利用することで、文字の太さを任意に変更することができます。
利用できる単位は絶対値である「キーワード値」「数値」以外にも相対値である「グローバル値」「親に対してのキーワード値」などがありますが、複雑になるため慣れないうちは数値での指定を推奨します。
キーワード値での指定の場合ブラウザごとに文字サイズが変わることがあるためご注意ください。
※以下のCSSは見出し（h1）の太さを少し細くしています

#rs_sa .c-titleModule-h1 {
  font-weight: 500;
}