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

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

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

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

サンプル

FAQ

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

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

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

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

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

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

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

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

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

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

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

目次

著者

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

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

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ライティングのことも相談可能です。

まとめ

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

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

  • URLをコピーしました!
目次