エントリー一覧の段組を修正する


レイアウトに関わるカスタマイズを行うと、エントリーの繰り返し部分の幅が適切ではなくなることがあります。
例えばブログを1カラムに変更すると、画像のようにデスクトップ画面では幅が広くなりすぎます。ここは、デスクトップでは2カラム、モバイルでは1カラムとしたいところです。



エントリー一覧の段組は、管理画面から変更できます。

一覧にカーソルを置くと、右上に「モジュール設定」へのリンクが表示されるのでクリックしてください。ポップアップが表示されたら「表示設定」タブを選択してください。




「ループ内クラス」の項目に、以下のようにクラス名を書くと段組の挙動が変化します。空欄とした場合は「1カラムでの一般的に適切な挙動」となるため、この場合は空欄でも構いません。

クラス名実際の挙動
col-sm-12常に1カラム
col-sm-12 col-lg-6モバイルで1カラム、デスクトップで2カラム
col-xsss-6 col-sm-4 col-xl-3モバイルで2カラム、タブレットで3カラム、ワイド画面で4カラム

ブレークポイントに関する補足

「sm」「lg」などのブレークポイントの名称は、bootstrap4のグリッドレイアウトに準拠していますが、さらに以下のブレークポイントを追加しています。これにより、iPhone SE・IPhone 7・iPhone 7 Plusを切り替えることができます。

xs425px〜375px
xss375px〜320px
xsss320px以下