Cocoon新着・人気記事ブロックを横並びにする方法｜2〜4列簡単切り替えカスタマイズ

Cocoonの新着記事や人気記事ブロックは便利ですが、そのままだと縦並びになり少し使いにくいなと感じることがあります。

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

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

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

そこで今回は、Cocoonの「新着記事」「人気記事」「ナビカード」ブロックを横並び表示にするカスタマイズ方法を紹介します。

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

Cocoon記事カードを横並びにするCSS

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

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

ただし以下のような制限があります。

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

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

Cocoon記事カード横並びカスタマイズ例（PC・スマホ対応）

このカスタマイズを導入すると、PC・スマホ表示に合わせて 2カラム／3カラム／4カラム を自由に選べるようになります。

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

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

サイト型トップページの作成にも最適。

こちらの記事と組み合わせると、さらに整えやすくなります。

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

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

Cocoon記事カード横並びカスタマイズの完成コードと設定方法

ここから先は実際に使用している完成コードを公開しています。

今回公開しているコードは、単なる横並びだけではなく、

• カラム切り替え対応
• レスポンシブ対策
• 幅が均等にならないときの代替方法

まで含めて整理しています。

一度導入しておけば、以後はブロック編集画面からスタイルを選ぶだけでレイアウト変更できます。

カスタマイズ全体の流れ

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

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