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

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

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

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

サンプル

FAQ

SWELL以外のテーマでもカスタマイズ対応できますか？

はい、いかなるWordPressのテーマでも対応可能です。

不具合やエラーも見てくれますか？

お問い合わせくださいませ！

デザインだけの依頼もできますか？

デザインだけの依頼、印刷物やロゴデザインもできます。

コーディングだけの依頼もできますか？

はい、コーディングのみの対応も可能です！

SEOに関する相談もできますか？

SEOに関する相談もできます。内部施策等を中心に技術的なことやSEOライティングのことも相談可能です。

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

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

WordPressテーマSWELL特化のホー...

カスタマイズの依頼・相談

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;
}

サンプル

あとはFAQブロックを配置して確認するだけです。

FAQ

SWELL以外のテーマでもカスタマイズ対応できますか？

はい、いかなるWordPressのテーマでも対応可能です。

不具合やエラーも見てくれますか？

お問い合わせくださいませ！

デザインだけの依頼もできますか？

デザインだけの依頼、印刷物やロゴデザインもできます。

コーディングだけの依頼もできますか？

はい、コーディングのみの対応も可能です！

SEOに関する相談もできますか？

SEOに関する相談もできます。内部施策等を中心に技術的なことやSEOライティングのことも相談可能です。

まとめ

縦長になりがちな要素は２列にしたり、スライダーにしたりすることで短くできます。

FAQが長くなった場合はぜひ試してみてください。