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

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

とはいえ、こんなお悩みはありませんか？

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

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

コード知識がなくてもコピペで導入可能です。

完成コードは記事後半で有料公開中。

「コピペでサクッと導入したい！」方はぜひ最後までご覧ください。

こんなレイアウトが可能に！新着記事・人気記事・ナビカードのカスタマイズ例

今回紹介するカスタマイズを導入すると、PCやスマホに合わせて 2列・3列・4列 のレイアウトをワンクリックで切り替え可能になります。

対象ブロックはCocoon「新着記事」「人気記事」「ナビカード」の３つ。

選べるレイアウトは以下の6種類。

• 2カラム（モバイル：1 / 2カラム）
• 3カラム（モバイル：1 / 2カラム）
• 4カラム（モバイル：1 / 2カラム）

▶ 実際の操作イメージは動画でも確認できます。

表示サンプル

以下、実際の表示例付でレイアウトをご確認いただけます。

2カラム（モバイル1～２カラム）

3カラム（モバイル1～２カラム）

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

トップページをもっと見やすく

サイト型トップページの作成にもピッタリです。

以下で紹介しているサイト型トップページ作成の記事でも便利に使えます！

以上のレイアウトは、記事後半でPHP＋CSSの実装方法を有料公開しています。

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

Cocoonのブロックは初心者でも直感的に操作できます。簡単に設定できるので、以下のステップで使い方をマスターしましょう。

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

カスタマイズは基本的にコードを貼り付けるだけで安全に導入できますが、利用しているスキンやサーバー環境によっては影響がでる場合があります。安心して作業を進めるために次の点を確認しておくとスムーズです。

• スキンによる影響
  • この記事のカスタマイズはスキン「なし」で検証済みです。お使いのスキンによってはCSSが重複し表示が崩れることがありますが調整は可能です。（スキンと併用できるかはお問い合わせください）
• 子テーマを利用
  • コードは必ず子テーマに記述してください。親テーマに書くとアップデートで上書きされる可能性があります。
• バックアップの推奨
  • 念のため、編集前にバックアップを取っておくと安心です。特にPHP編集時にミスがあるとサイトが一時的に表示されなくなることがありますが、FTPソフトなどで復元できればすぐに解決できます。
    
  • 関連記事 バックアップ＆復元方法
• サーバー設定の影響
  • WAF（セキュリティ設定）が有効だと保存エラーが出る場合があります。一時的にOFFにして作業し、終わったら元に戻してください。ベーシック認証を有効にしている場合も同様です。

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

ここから先は有料記事での公開となります。すぐに導入できる「完成版コード」をご用意しました。

• PHP＋CSSの完成版コード（コピペで導入可能）
• 2～4カラムをサイドバーからワンクリック切り替え

作業時間はわずか約5分。最短で「新着記事・人気記事・ナビカード対応の簡単カラム変更」を導入したい方はぜひご活用ください。