Cocoon新着・人気記事・ナビカードを横並び表示｜カラム数をワンクリックで切替

Cocoonは「新着記事」「人気記事」「ナビカード」などのブロックが充実しており、固定ページを利用してトップページ（フロントページ）も手軽に作れます。

とはいえ、次のようなレイアウト面で悩むことも…

Cocoonにも横並び表示はありますが、標準機能では横スクロール方式のみ。

Cocoonの新着記事・人気記事・ナビカードを、横スクロールではなく「きれいなグリッド表示」で並べられたら便利ですよね。

この記事では、PCは3列・スマホは2列など、カラム数をワンクリックで切り替えられるカスタマイズ方法を紹介します。

※「すぐに導入したい方向け」に、コピペで使える完成コードを用意しています。

新着記事・人気記事・ナビカードのカスタマイズ例

このカスタマイズを導入すれば、PC・スマホ表示に応じて 2カラム／3カラム／4カラム のレイアウトをワンクリックで切り替えられるようになります。

対象ブロックはCocoon「新着記事」「人気記事」「ナビカード」の3種類です。

• 選べるレイアウト（全6パターン）
  • 2カラム（モバイル：1 / 2カラム）
  • 3カラム（モバイル：1 / 2カラム）
  • 4カラム（モバイル：1 / 2カラム）

▶ 操作方法は動画でも確認できます（カラム切り替えの動きが分かります）

表示サンプル

ここでは、実際の表示イメージを確認できます。

4カラム

モバイル1・2カラム

トップページ作成にも役立つ

このカスタマイズは、サイト型トップページの作成にも最適です。

さらに、以下の記事と組み合わせるとより効率的にトップページを整えられます。

Cocoonカードを横並びにする基本CSS｜Grid版サンプル

まずはシンプルなGrid指定で、Cocoonのカードを整ったグリッド形式に表示する例です。

※子テーマの style.css に追加すると反映されます。

/* 例：3カラムで並べる場合 */
.widget-entry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

このコードは固定3カラムの簡易サンプルです。サイト内の新着記事・人気記事・ナビカードすべてに適用されます。

■ 注意点

• ページ（ブロック）ごとにカラム数を変えたい
• PCとスマホで列数を切り替えたい
• 特定ブロックだけ調整したい

こうした場合は、手動でCSSを書き換える必要があります。

■ スタイル切替方式のメリット

完成版では、エディタ上のスタイル選択だけで以下が可能です。

• 2〜4カラムを自動切替
• スマホ最適化対応
• 特定ブロックだけの調整もクリック操作で完結

実運用では「ページごとに列数を変えたい」「あとから調整したい」場面が必ず出てくるため、手作業でCSS管理するよりも圧倒的に簡単で効率的です。

Cocoon「新着記事」「人気記事」「ナビカード」ブロックの基本操作（はじめての方向け）

この記事ではカスタマイズ方法を中心に解説していますが、はじめて使う方でも迷わないように基本操作を簡単にまとめておきます。

カスタマイズの注意点と特徴｜Cocoon新着・人気記事・ナビカードを横並び

このカスタマイズは基本的に コピペで安全に導入でき、Cocoon標準環境で動作確認済み です。ただし、利用しているスキンやサーバー設定によっては挙動が変わる場合があります。作業前に以下のポイントを押さえておくと安心して進められます。

完成コードのご案内｜Cocoon新着記事・人気記事ブロックを横並びにする手順

ここから先は、これまで紹介してきたデザインをそのまま再現できる「完成版コード」をまとめた有料パートです。「設定で迷いたくない」「確実に動く形で導入したい」という方向けに、動作確認済み・コピペで使えるコードと手順を整理して公開しています。

完成版では、基本はGridレイアウトで構成しつつ、環境やテーマ設定によってカード幅が崩れる場合にも対応できるよう、Flexレイアウトの調整パターンもあわせて公開しています。

そのため、「横並びにならない」「幅がそろわない」といったトラブルも回避しやすく、安心して導入できます。

1. functions.php に PHP コードを貼り付け
2. style.css に CSS を貼り付け
3. サイドバーで希望のスタイルを選択
4. プレビューで表示を確認 → 完成！