カスタムCSS設定
サポートアクションに独自のCSSを設定することができます。カスタムCSSを記述することで設定項目だけでは難しかったカスタマイズが可能になります。
設定から変更できるものは、設定を利用して変更することを推奨しています。
設定方法
サポートアクションでは、ブランドスタイルとステップ内の詳細設定でカスタムCSSを記述することができます。
どちらかが有効になるわけではなく、どちらの記述も有効になるため組み合わせて使うことが可能です。
同じセレクタに対してCSSを記述した場合は、ステップの詳細設定の記述が優先して適用されます。
ブランドスタイルから設定
ブランドスタイルで設定したカスタムCSSは、同じブランドスタイルを適用しているサポートアクションで有効になるため、共通で適用したいスタイルのカスタマイズに向いています。
ブランドスタイル設定の下部にカスタムCSSのセクションがあり、その中にサポートアクションの設定箇所があります。
サポートアクションのステップの詳細設定
サポートアクション内のステップで設定したカスタムCSSは、該当のステップにのみ適用されるため、個別で適用したいスタイルのカスタマイズに向いています。
ステップの下部に詳細設定というセクションがあり(初期設定では閉じています)、その中にカスタムCSSの設定箇所があります。適用しているブランドスタイルのCSSも確認できるようになっています。
記述方法について
- 主要な要素にカスタムCSS用に
c-で始まるクラス名が付与されているので、このクラス名を利用してカスタムCSSを設定してください。(例:.c-select) c-以外のクラスセレクタにもスタイルを当てることは可能ですが、今後のアップデートでクラス名などが変更される可能性があります。- セレクタの先頭に
#rs_saを記述してください。詳細度が高くなることで、既存のCSSを上書きすることができます。(例:#rs_sa .c-select)
記述例
#rs_sa .c-select {
color: red;
}
カスタムCSS用のセレクタの調べ方
プレビューからCSSセレクタを取得する機能を使用する
ステップの詳細設定で「プレビューからCSSセレクタを取得する」ボタンを押すと、プレビューがハイライトされます。その状態でプレビュー上で取得したい要素の上にカーソルを合わせるとCSSセレクタが表示されます。CSSセレクタが表示された状態でクリックするとクリップボードにコピーされます。
※ブランド設定のカスタムCSSでは使用することができません
ブラウザの開発者ツールを使用する
ブラウザの開発者ツールを使用してHTMLの要素に設定されているタグやクラスを調べることができます。Google Chromeを使用した例を紹介します。
- Google Chromeで右クリックメニューを開いて、一番下の「検証」を選択して開発者ツールを開きます。(
F12キーでも開くことができます) - 一番左の矢印アイコンをクリックして調べたい要素にカーソルを移動します。
- Elements(要素)パネルに、選択した要素のHTMLがフォーカスされ確認できます。また、Styles(スタイル) パネルから適用されているCSSの確認も可能です。
サポートウィジェットとのCSSセレクタ対照表
サポートウィジェットで主要な要素に付与されていたクラスと、サポートアクションでの近い役割の要素でのCSSセレクタの比較は以下をご参照ください。
| 要素 | サポートウィジェット | サポートアクション |
|---|---|---|
| フローティングボタン (アイコン) | #rs_sw .c-icon | #rs_sa .c-floatingButton |
| フローティングボタン (バナー) | #rs_sw .c-banner | #rs_sa .c-buttonText |
| ウィジェット | #rs_sw .c-widget | #rs_sa .c-popup |
| ウィジェット上部 | #rs_sw .c-widgetHeader | - |
| 検索ボックス | #rs_sw .c-searchBox | #rs_sa .c-searchModule-box |
| ウィジェット上部タイトル | #rs_sw .c-widgetTitle | #rs_sa .c-titleModule-h1 #rs_sa .c-titleModule-h2 #rs_sa .c-titleModule-h3 ※固定の見出しは無くなったので見出しコンテンツを配置します ※配置する見出しのレベルでセレクタ名も変化します |
| ウィジェット内見出し | #rs_sw .c-sectionTitle | #rs_sa .c-titleModule-h1 #rs_sa .c-titleModule-h2 #rs_sa .c-titleModule-h3 ※固定の見出しは無くなったので見出しコンテンツを配置します ※配置する見出しのレベルでセレクタ名も変化します |
| トピック・選択肢 | #rs_sw .c-select | #rs_sa .c-select |
| シナリオ内見出し | #rs_sw .c-scenarioTitle | #rs_sa .c-titleModule-h3 |
| ウィジェット内ボタン | #rs_sw .c-button | #rs_sa .c-button |
| お問い合わせノード | #rs_sw .c-contactNode | #rs_sa .c-contactButton |
| テキストエリア | #rs_sw .c-textArea | #rs_sa .c-surveyForm-textArea |
| アンサー | #rs_sw .c-UserInputContent | #rs_sa .c-faqContent |
| アンサー内リアクションボタン | #rs_sw .c-reactionButton | #rs_sa .c-faqModule-goodButton #rs_sa .c-faqModule-badButton |