構造化データの出力もできるSWELLのFAQブロック。
数が多いと縦長になってしまうのが気になることがありますよね？
専用クラスを付けたFAQだけを、画面幅960px以上では2列、960px未満では1列にします。
スマートフォンで回答が細かく折り返すのを避ける構成です。
サンプル
FAQ
掲載CSSはSWELLのFAQブロックを対象にしており、他テーマのFAQへの適用は確認していません。
SWELLのFAQブロックを2列にする方法
FAQブロック全体を選択し、ブロック設定の「高度な設定→追加CSSクラス」に waza-faq-columns を入力します。
先頭のドットは不要です。
個別の質問ではなく、FAQ全体へ付けてください。
CSS
以下のCSSを「追加CSS」または対象記事のCSS欄へ追加します。
styleタグは不要です。
旧版の .swell-block-faq 全体に適用するCSSがある場合は、保存してから置き換えてください。
.swell-block-faq.waza-faq-columns {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2em;
}
.swell-block-faq.waza-faq-columns > .swell-block-faq__item {
width: auto;
max-width: none;
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
}
@media (min-width: 960px) {
.swell-block-faq.waza-faq-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
2列へ切り替える幅の決め方
CSS内の min-width: 960px は、ブラウザーの表示領域の幅を判定します。
FAQブロック自体の幅を判定する指定ではないため、サイドバーなどで本文が狭くても、表示領域が960px以上なら2列になります。
回答が細かく折り返す場合は、2列で読みやすくなる表示幅まで 960px の値を大きくしてください。
常に1列で使う場合は、末尾の @media (min-width: 960px) から対応する最後の閉じ括弧までを外します。
幅の判定対象はMDNのwidthメディア特性の説明でも確認できます。
サンプル
このページの2つの見本は同じ専用クラスとCSSを使用しています。
ブラウザーの表示領域を960px未満にして、質問と回答が1列に戻ることを確認してください。
掲載順は左→右→次の行となり、狭い画面ではそのまま上から下へ並びます。
FAQ
まとめ
導入先ではブラウザーの表示幅を変え、長い回答やリンクのある回答も読みやすいか確認してください。
元に戻す場合はFAQの waza-faq-columns クラスと今回のCSSを外します。
このCSSは見た目だけを変更し、FAQの開閉機能や構造化データの出力設定は変更しません。
