SWELL│FAQブロックを2列にする方法

2023.09.052024.03.05

構造化データの出力もできるSWELLのFAQブロック。

数が多いと縦長になってしまうのが気になることがありますよね？

そこでCSSを追加して、2列の表示にさせてみました。

サンプル

FAQ

SWELL以外のテーマでもカスタマイズ対応できますか？: はい、いかなるWordPressのテーマでも対応可能です。
不具合やエラーも見てくれますか？: お問い合わせくださいませ！
デザインだけの依頼もできますか？: デザインだけの依頼、印刷物やロゴデザインもできます。
コーディングだけの依頼もできますか？: はい、コーディングのみの対応も可能です！
SEOに関する相談もできますか？: SEOに関する相談もできます。内部施策等を中心に技術的なことやSEOライティングのことも相談可能です。

本記事ではSWELLのFAQブロックを2列にするカスタマイズを紹介します。

SWELLのFAQブロックを2列にする方法

やり方は簡単です。CSSを追加してあげるだけです。

CSS

下記のCSSを追加してあげましょう。

.swell-block-faq {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.swell-block-faq .swell-block-faq__item {
    flex: 1 0 48%;
    max-width: 48%;
    box-sizing: border-box;
}

/* 1つ目の高さが崩れるのを修正 */
.swell-block-faq .swell-block-faq__item+.swell-block-faq__item {
    margin-top: 0;
}