今回は、サポートアクション上に表示されるアンサーリストに枠線を追加する方法について記載します。

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

枠線を追加した場合のアンサーリストのレイアウト

アンサーリストにのみ枠線を追加する方法

 

「border」プロパティを利用することで、アンサーリストに枠線を追加することが可能です。
枠線は太さ・見た目・色を自由に変更できるため、お好みのスタイルに調整してください。

/* (2)の数字部分はアンサーリストが上から何番目かで変える */
#rs_sa .tree01.c-scenarioTree .c-popupBodyInner div:nth-child(2) .c-select {
  border-width: 1px;/* 任意の太さを設定 */
  border-style: solid;/* 任意のスタイルを設定（点線・二重線など） */
  border-color: #000;/* 任意の色を設定 */
}
#rs_sa .tree01.c-scenarioTree .c-popupBodyInner div:nth-child(2) .c-listItem + .c-listItem .c-select {
  margin-top: 10px;/* アンサー間の余白を設定 */
}

以下、CSSの解説になります。

#rs_sa .tree01.c-scenarioTree .c-popupBodyInner div:nth-child(2) .c-select

borderプロパティを用いて枠線を追加しています。

アンサーリストはシナリオと共通のCSSセレクタを利用しているため、「#rs_sa .c-select」としてしまうとシナリオのノードにもCSSが反映されてしまいます。
そのため、アンサーリストがコンテンツの何番目にあるかを用いて、アンサーリストのみにCSSを当てています。
例えばコンテンツが「検索→見出し→アンサーリスト→見出し→シナリオ」という構成になっている場合、「div:nth-child(3)」とする必要があります。

#rs_sa .tree01.c-scenarioTree .c-popupBodyInner div:nth-child(2) .c-listItem + .c-listItem .c-select

枠線を付与しただけだと上下の余白がなく枠線が接してしまうため、余白を追加しています。

こちらも上記と同様にコンテンツの順番に応じて「(2)」の部分を変更する必要があります。

シナリオ・アンサーリスト問わずアンサー一覧に枠線をつけたい場合

以下のCSSで対応が可能です。

#rs_sa .c-listItem-answer .c-select {
  border-width: 1px;/* 任意の太さを設定 */
  border-style: solid;/* 任意のスタイルを設定（点線・二重線など） */
  border-color: #000;/* 任意の色を設定 */
}
#rs_sa .c-listItem-answer + .c-listItem-answer .c-select {
  margin-top: 10px;/* アンサー間の余白を設定 */
}