logo

ポップアップでシナリオの2階層目以降やアンサー表示時にも背景色を適用する方法

サポートアクションのポップアップに対してカスタムCSSで背景色を指定している場合、シナリオの2階層目以降に背景色が適用されず、不要なグラデーションが発生してしまうことがあります。
このアンサーでは、深い階層のシナリオが設置されている場合でも背景色を綺麗に付与する方法を記載します。

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

背景色を指定したらシナリオの2階層目以降がグラデーション表示されてしまうケース

シナリオが設置されていてもポップアップの背景色を指定する方法

以下のCSSをカスタムCSSに付与することで、上記のようなグラデーション表示になることを防止できます。

#rs_sa .c-popupBody {
  background-color: rgba(255, 0, 0, 0.5);/* 任意の色に変更してください */
}
#rs_sa .c-scenarioHeader { background-color: transparent; } #rs_sa .c-scenarioHeader::after { display: none; }

以下で上記のCSSについて解説します。

#rs_sa .c-popupBody

このセレクタでポップアップ全体(閉じるボタンを除く)を指定できるため、ここに背景色の指定を入れることでポップアップ全体の色を変更することができます。

#rs_sa .c-scenarioHeader, #rs_sa .c-scenarioHeader::after

シナリオの2階層目以降やアンサーを表示した際にこの要素が出てきます(見た目上は「戻る」ボタンがある場所です)。
この要素に初期状態で白色の背景色指定とグラデーションの指定がかかっているため、この2つを打ち消すことで上記で設定した色が全体に反映されるようになります。

役に立ちましたか?
解決しない場合はお問い合わせください