サポートアクションではポップアップの全体余白は画面から調節できますが、アンサーリストなどの各要素の余白は調節できません。

そこで今回は、サポートアクション上で各要素の余白をカスタムCSSで変更する方法を以下に記載します。
対象のCSSセレクタは「プレビューからCSSセレクタを取得する」から任意のものを設定してください。

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

余白を調節する前に

余白を調節する方法2種

HTML上の要素の余白を調節する方法は、大きく分けて２種類あります。
「padding」と「margin」です。
paddingは内側の余白、marginは外側の余白として利用ができますが、例えばボタンの場合はpaddingの場合はクリック可能な領域が広がり、marginの場合はクリック不可能な領域が広がるという特性があります。
例えばアンサーリストの場合、「クリック可能な部分を広げたい」ならpaddingを、「クリック不可能な部分（アンサーリストの間隔）を広げたい」ならmarginを利用するなどの使い分けを推奨します。

また、paddingとmarginどちらもpx,em,rem,%,vw,vhなど多くの単位で指定することができますが、複雑になるため慣れない内はpxでの指定を推奨します。

余白を調節する際の注意点

HTMLは階層構造でできており、それはサポートアクションも同様です。
例えばアンサーリストの場合、ulタグ > liタグ > buttonタグという構造になっており、これのどの要素にCSSを当てるかによって結果が変わります。
サポートアクションがデフォルトで付与しているCSSもありますので、思ったように見た目が変わらない場合はCSSセレクタを変えるなどの工夫をしてみてください。

より詳細にCSSを変更する場合、検証ツール（developer tools）の要素から対象要素に当てられているCSSを確認することが可能ですが、難易度がやや上がるためご注意ください。

具体的なレシピ

アンサーリストの間隔（クリック不可能な領域）を広げる方法

「margin」プロパティを利用した以下のCSSを付与することで、シナリオ内アンサーおよびアンサーリストの間隔を任意に広げることができます。
※以下のCSSは見出し（h1）の大きさを少し大きくしています

#rs_sa .c-listItem-answer {
  margin-top: 8px;
}
#rs_sa .c-listItem-answer:first-child {
  margin-top: 16px;/* リストの最初の要素に初期状態で上方向に8pxの余白があるため上書き */
}
#rs_sa .c-listItem-answer:last-child {
  margin-bottom: 16px;/* リストの最後の要素に初期状態で下方向に8pxの余白があるため上書き */
}

 

アンサーリストの間隔（クリック可能な領域）を狭める方法

「padding」プロパティを利用した以下のCSSを付与することで、シナリオ内アンサーおよびアンサーリストの間隔を任意に狭めることができます。

#rs_sa .c-listItem-answer .c-select {
  padding: 8px 4px;/* 初期状態で上下に12px、左右に8px余白があるため上書き */
}