スノーモンキーFAQブロックをCSSでカスタマイズする方法を紹介します。
目次
CSSカスタマイズのビフォーアフター
スノーモンキーブロックのFAQブロックはデフォルト状態では、デザインがシンプルすぎてコーポレートサイトには適していません。
しかし、下のようにCSSでカスタマイズすることにより、一般的なコーポレートサイトでも見劣りしないデザインにすることができます。
FAQブロックのCSSによるカスタマイズ
FAQブロック領域全体
上下の内側余白を設定します。ここはお好みで変更してください。
.wp-block-snow-monkey-blocks-faq-item {
padding-top: 1.8em;
padding-bottom: 1.5em;
}QマークとAマーク
デフォルト状態ではシンプル過ぎるため、QマークとAマークに円形のカラー背景をつけ、白拭き文字にします。
// Q&Aマーク
.smb-faq__item__question__label,
.smb-faq__item__answer__label {
display: flex;
justify-content: center;
align-items: center;
width: 52px;
height: 52px;
padding: 10px 26px;
border-radius: 100%;
}
// Qマーク
.smb-faq__item__question__label {
background-color: fw.$main;
color: fw.$white;
}
// Aマーク
.smb-faq__item__answer__label {
background-color: fw.$accent;
color: fw.$main;
}質問文
// 質問文
.smb-faq__item__question {
display: flex;
align-items: center;
}回答文
// 回答文
.smb-faq__item__answer {
display: flex;
line-height: 1.4375;
}
.smb-faq__item__answer p {
margin-bottom: 0;
padding-top: 12px;
}回答文中のリスト
回答エリアにリスト表示を含む場合は、下記のようにCSSを書きます。ただし、「.l-main .l-section」は私が作ったタグのクラス属性ですので、適宜削除または変更して下さい。
// 回答文中のリスト
.single-post .l-main .l-section .smb-faq__item__answer ul.wp-block-list {
background-color: fw.$white;
padding: 8px 16px 16px 28px;
margin: 0;
}
.single-post .l-main .l-section ul li {
line-height: 1.65;
margin-bottom: 10px;
position: relative;
}
.single-post .l-main .l-section ul li:last-of-type {
margin-bottom: 0px;
}
.single-post .l-main .l-section ul li::after {
content: "";
position: absolute;
display: inline-block;
background-color: fw.$main;
border-radius: 50%;
height: 12px;
width: 12px;
left: -22px;
top: 9px;
}
