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

Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。

ただし、以下のような悩みを持つ方も多いのではないでしょうか？

• 記事カードを横並び（カラム形式）にしたい
• カラム数を自由に変更できるようにしたい
• PCとモバイルで表示を切り替えたい

Cocoonには「横並び表示」設定もありますが、これは横スクロール仕様のため、カードを静的に並べたい場合にはCSSカスタマイズが必要になります。

この記事で紹介するのは、サイドバーからカラム数（=横に何列並ぶか）を切り替えられるカスタマイズ方法です。デフォルト表示に加えて、2カラム・3カラム・4カラムなど最大6パターンのレイアウトに対応。複雑なコードを覚えることなく、より柔軟なトップページ設計が可能になります。

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

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

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

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

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

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

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

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

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

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

初心者でも導入が簡単

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

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

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

例：

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

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

カラムレイアウト例

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

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

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

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

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

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

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

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

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

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

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

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

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

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