はじめに
「新着記事」ブロックや「人気記事」ブロックのカードは、デフォルトでは縦並びで表示されます。
しかし、フロントページを固定ページとして作成する際に、これらのカードを横並びで表示したい場合があります。
そこで、「新着記事」ブロックや「人気記事」ブロックのカードを横並びに表示できるようにします。
この記事では、この方法について説明します。
いつの間にか本スキンのコードを、以下でスタイルボタン付きで有料公開？
実装手順
以下のコードをstyle.cssに追加します。
:root {
--my-column: 3;
/* 表示幅 ≤ 834px のときは2列に変更 */
@media (max-width: 834px) {
--my-column: 2;
}
/* 表示幅 ≤ 480px のときは1列に変更 */
@media (max-width: 480px) {
--my-column: 1;
}
}
.widget-entry-cards {
display: grid;
grid-template-columns: repeat(var(--my-column), minmax(0, 1fr));
}補足
| 画面幅 | 表示カラム |
|---|---|
| ＞834px | 3カラム |
| ≦834px | 2カラム |
| ≦480px | 1カラム |
前述のコードはスキンで使用されているコードです。display: grid;を使用して、カードの列数を定義します。
各列の幅は自動的に調整されます。
参考：メディアクエリなしで画面幅に応じて列数を自動可変化する方法
メディアクエリで「〇〇pxのときは〇列」と指定する代わりに、カード1枚あたりの最小幅を基準にしています。
これにより、画面幅が狭くなって各カードが250pxを維持できなくなると、自動的に列数が減って下の段へ折り返されます。
逆に、画面幅が広いときは入るだけの列数が自動で並び、余ったスペースは均等に引き伸ばされて綺麗にフィットします。
.widget-entry-cards {
display: grid;
gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}さいごに
今回紹介した方法を使えば、フロントページで「新着記事」や「人気記事」を効率よく横並びにレイアウトできます。gridを使用することで、正確に列数を制御し、整然としたデザインが可能です。
特に、フロントページを固定ページとして作成し、カード形式で記事を横並びに表示したい場合に非常に役立つでしょう。
