Cocoonの記事カードを横並びにする方法｜新着・人気記事を2〜4カラム＆スマホ対応

Cocoonの「新着記事」「人気記事」「ナビカード」は、CSSを追加することで横並び表示にできます。さらに今回紹介する方法なら、PCでは2〜4カラム、スマホでは1〜2カラムに切り替え可能です。

特にサイト型トップページを作りたい場合は、

• 横幅をもっと有効活用したい
• 大きなサムネイルで見やすく表示したい

と思う方も多いのではないでしょうか。

この記事では、実際に当サイトで使用しているCSS・PHPコードと設定方法を紹介します。

サイト型トップページやおすすめ記事エリアを整えたい方は、ぜひ参考にしてみてください。

Cocoonの記事カードを横並びにする方法

まずは2カラムにする簡単なCSS

以下のCSSを追加すると「新着記事」「人気記事」「ナビカード」が2カラム表示になります。

/* 2カラム化 */
.widget-entry-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
}

2カラムCSSだけではできないこと

• スマホ時の列数変更ができない
• ブロックごとに設定できない
• テーマやCSSとの干渉で崩れる場合がある

2カラム表示だけならこれだけでも十分ですが、2〜4カラム切り替えやスマホ表示の最適化まで対応したい方はこのまま読み進めてください。

2〜4カラムに切り替えるカスタマイズ例

このカスタマイズを導入すると、PCでは2〜4カラム、スマホでは1〜2カラムを組み合わせて選べるようになります。

対象ブロックは 新着記事 人気記事 ナビカード です。

PC＋スマホの組み合わせで全6パターン

サイト型トップページにもおすすめ

Cocoonでサイト型トップページを作る方法もあわせて紹介しています。

Cocoonの記事カードを横並びにするときの注意点

基本的にはコードをコピペするだけで導入でき、当サイトのCocoon標準環境で動作確認済みです。

PHP＋CSSでカラム数を切り替える方法

ここから先では、実際に当サイトで使用しているPHP＋CSSの完成コードを掲載しています。

自分でコードを組み合わせるのが面倒な方へ

一度導入しておけば、以後はブロック編集画面からスタイルを選ぶだけでレイアウト変更できます。「コードを探す時間を減らして、すぐにCocoonのトップページを整えたい」という方は、完成コードをご利用ください。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。