Cocoon記事カードを横並びにする方法｜新着記事・人気記事・ナビカード2〜4カラム切替・PCスマホ対応カスタマイズ

Cocoonで記事カードを横並びに表示させたいけど、横スクロールしかできなくて困っている方へ。

この記事では、ブロック機能で表示した新着記事・人気記事・ナビカードをPCは3列・スマホは2列など、自由にカラム数を切り替えて横スクロールなしでキレイに並べる方法を紹介します。

トップページをサイト型に整えたい方、記事カードを整然と並べたい方に最適です。

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

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

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

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

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

2〜4カラム切替サンプル

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

4カラム

モバイル対応のカラム切替例

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

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

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

Cocoonには他にも多くの装飾ブロックがあり、目的に応じて使い分けることで記事の見やすさが大きく向上します。

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

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

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

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

このコードは固定3カラムの簡易サンプルです。

新着記事・人気記事・ナビカードブロック全体に一括で適用されます。

■ スタイル切替方式を使うメリット

完成版の「スタイル切替方式」では、エディタ操作だけで以下が可能になります。

• 2〜4カラムをクリック操作だけで切替
• ブロック単位で個別調整が可能
• スマホ表示にも自動対応

実際のサイト運用では、「ページごとに列数を変えたい」「後から微調整したい」といったケースが必ず発生するため、手書きCSS管理に比べて、設定・変更・微調整がすべて簡単になります。

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

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

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

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

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

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

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

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

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。