Cocoon新着記事・人気記事・ナビカード対応｜カラム数をワンクリックで変更する方法（横並び）

Cocoonテーマはとても便利。

「新着記事」「人気記事」「ナビカード」などのブロック機能が用意されていて、トップページの作成も簡単です。

ただ、こんなお悩みを感じたことはないでしょうか？

• 記事カードを横並び（カラム形式）で見せたい
• カラム数を自由に調整したい（例：PCは3列、スマホは2列）
• 静的に整ったデザインにしたい（横スクロールではなく）

そうです、表示しただけだと縦に並んでしまうんです…

Cocoonにも「横並び表示」設定はありますが、それは横にスクロールさせる方式。カードをすべて表示して並べたい場合には少し工夫が必要です。

そこでこの記事では、表示する記事カードを横並びにして、さらにワンクリックでカラム数（= 横に何列並ぶか）を切り替えるカスタマイズ方法をご紹介します。

コードの知識がなくても、コピペで導入できます。

カスタマイズ概要｜新着記事・人気記事のカラム数をサイドバーで切り替える

このカスタマイズを使えば、サイドバーから簡単にカラム数を切り替えられる機能を実現できます。作業時間はわずか5分。コーディング初心者でも気軽に導入可能です。

サイドバーから簡単操作でレイアウト切り替え

表示スタイルは、以下の6種類のカラムレイアウトから選べます。

実際の選択画面・切り替え操作は下記動画をご覧ください。

1. ブロックで「新着記事」を表示
2. 表示スタイルを「大きなサムネイル表示」に設定
3. サイドバーで【デフォルト → 2カラム → 3カラム】とスムーズに切り替え可能

ブロックエディタ対応｜新着・人気・ナビカードで使える

このカスタマイズは、以下のCocoon標準ブロックに対応しています。

• 新着記事ブロック
• 人気記事ブロック
• ナビカードブロック

既存のレイアウトにもそのまま導入できるので、現在ブロックエディタで構築中の方にもおすすめです。

初心者でも導入が簡単

• 設定に必要な作業は2ヶ所にコードをコピペするだけ
• 不要になったら元に戻すのも簡単（貼り付けたコードを削除すればOK）
• コーディング初心者でも安心してチャレンジできます

活用例｜トップページの見やすさUPに

この機能は、当サイトで紹介しているサイト型トップページの作成にも活用できます。

例：

• 新着記事 → 2カラム表示
• 人気記事 → 3カラム表示

目的に応じてカラム数を変えることで、見た目も整った、分かりやすい構成になります。

カラムレイアウト例

各カラム数は、グリッドレイアウトを活用した均等な横並び表示で実現しています。

4カラム（モバイル2カラム）

同一ページ内で自由に切り替え可能！

通常、カラム数を変えるにはCSSやカスタムクラスを都度変更する必要がありますが、このカスタマイズを使えば同じページ内で簡単に表示スタイルを切り替えることができます。

Cocoon「新着記事」「人気記事」「ナビカード」ブロックの使い方

Cocoonテーマの「新着記事」「人気記事」「ナビカード」ブロックは、ブロックエディタから簡単に追加・カスタマイズできる便利なパーツです。

このカスタマイズを導入することで、サイドバーに「カラムスタイル」選択機能が追加され、より柔軟なレイアウト変更が可能になります。基本的な使い方は通常のブロック操作と同じですが、以下の手順に従って設定することで効果的に活用できます。

当カスタマイズの注意点と特徴

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。

• スキンによる影響
  • このカスタマイズはスキン「なし」で検証しています。お使いのスキンによっては、CSSの重複等で意図しないスタイルになる場合があります。
• 子テーマを利用
  • 必要なコードは必ず子テーマに記述してください。
• バックアップの重要性
  • 編集前に必ずバックアップをおこなってください。
  • バックアップ＆復元方法
  • 特にPHPに記述ミスがあるとサイトが表示されなくなる可能性があるため、FTPソフト等で元に戻せるようにしておくと安心です。
• PHPエラーが発生した場合の対処

実装手順｜Cocoon新着記事・人気記事ブロックのカラム数をサイドバーで切り替える

実装手順は以下の２ステップ。

それぞれのコードを子テーマに貼り付けるだけでOKです。

ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。