Q&Aを作る方法
完成パーツ
ここに「Ｑ」の内容を記載する
ここに「Ａ」の内容を記載する
設定するCSS
下記CSSはサンプルであり、お客様のサイトに正しく反映されるかについては検証しておりません。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
.row_faq {
box-shadow: 2px 2px 10px 0 rgba(18,40,62,0.1);
background: #fff;
color: #000;
border-radius: 6px;
padding: 20px;
.col {
padding: 0;
}
.component {
&.component_faq_qu,&.component_faq_an {
position: relative;
margin: 0;
p {
margin: 0;
}
&:before {
position: absolute;
left: 5px;
display: inline-block;
margin-right: 20px;
font-size: 24px;
font-weight: bold;
}
}
&.component_faq_qu {
padding: 0 15px 15px 50px;
border-bottom: 1px solid #ddd;
&:before {
top: -8px;
color: #25bed5;
content: "Q.";
}
}
&.component_faq_an {
padding: 15px 15px 0 50px;
&:before {
top: 7px;
color: #a7cb09;
content: "A.";
}
}
}
}
box-shadow: 2px 2px 10px 0 rgba(18,40,62,0.1);
background: #fff;
color: #000;
border-radius: 6px;
padding: 20px;
.col {
padding: 0;
}
.component {
&.component_faq_qu,&.component_faq_an {
position: relative;
margin: 0;
p {
margin: 0;
}
&:before {
position: absolute;
left: 5px;
display: inline-block;
margin-right: 20px;
font-size: 24px;
font-weight: bold;
}
}
&.component_faq_qu {
padding: 0 15px 15px 50px;
border-bottom: 1px solid #ddd;
&:before {
top: -8px;
color: #25bed5;
content: "Q.";
}
}
&.component_faq_an {
padding: 15px 15px 0 50px;
&:before {
top: 7px;
color: #a7cb09;
content: "A.";
}
}
}
}
設定方法
各パーツのカスタマイズ（パレットマーク）より下記を記述してください。
・行のカスタマイズの追加するclass名に 「row_faq」
パーツのカスタマイズの
・Q側の追加するclass名に 「component_faq_qu」
・A側の追加するclass名に 「component_faq_an」
ページのCSSに貼り付けて保存します
下書き保存、または更新して完成です
