
私が実際に導入している、トップページ作成の効率を飛躍的に向上させるカスタマイズを紹介します!
Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。
しかし、標準設定では以下のような悩みを持つ方もいるかもしれません。
Cocoonには「横並び表示」設定もありますが、これは横スライド仕様のため静的に並べるにはCSSの追加カスタマイズが必要です。
今回のカスタマイズではカラム数をサイドバーから簡単に選択・切り替えできるようにします。複雑なCSS編集なしでデフォルトの他6種類のカラムレイアウトを実現できます。


- サイドバーから簡単操作でレイアウト切り替え
→ デフォルトに加え、以下の6種類のカラムレイアウトを選べます。- 2カラム(モバイル:1カラム/2カラム)
- 3カラム(モバイル:1カラム/2カラム)
- 4カラム(モバイル:1カラム/2カラム)
- ブロックエディタに対応
→ブロックで表示する「新着記事」「人気記事」「ナビカード」で利用可能です。 - 導入が簡単
→ コードを2ヶ所に貼り付けるだけでOK!作業時間は約5分。- →不要になった場合、追加したコードを削除すると元に戻ります。
- 初心者でも挑戦しやすい
- コーディング知識が少なくても、サイドバーからの簡単操作でレイアウトを変更できます。
このカスタマイズは、当サイトのサイト型トップページ作成でも使うことができます。
「新着記事」「人気記事」各セクションに分け、目的に応じてカラム数を変更することで、見やすく整理されたトップページを簡単に作成可能です。
他のブロックデザイン切り替えシリーズも紹介しています。よく使うブロックがありましたらぜひお試しください。
- Cocoonタブブロック
- Cocoonブログカード
- Cocoon白抜きボックス
- Cocoonラベルボックス
- Cocoonアイコンボックス
- Cocoonタブ見出しボックス
- Cocoonアコーディオン(トグル)
実装イメージ|新着記事・人気記事のカラム数をサイドバーで切り替える
このカスタマイズでは、ブロックで表示した「新着記事」「人気記事」「ナビカード」のカラム数を、6種類のスタイルからサイドバーで選択できるようにします。
レイアウトのバリエーションは以下の通りです。
- デフォルト(縦並びになっています)
- 2カラム(モバイル1カラム)
- 2カラム(モバイル2カラム)
- 3カラム(モバイル1カラム)
- 3カラム(モバイル2カラム)
- 4カラム(モバイル1カラム)
- 4カラム(モバイル2カラム)
操作イメージの動画をご覧ください。
- ブロックで「新着表示」を表示
- 表示スタイルを「大きなサムネイル表示」に変更
- サイドバーでデフォルト→2カラム→3カラムにスタイルを切り替えています
カラムレイアウト例
横並びにするためにdisplay: grid
(グリッドレイアウト)を使い、各列が同じ幅になるように均等配置しています。
2カラム(モバイル1カラム)

2カラム(モバイル2カラム)

3カラム(モバイル1カラム)

3カラム(モバイル2カラム)

4カラム(モバイル2カラム)

同一ページ内でのレイアウト切り替え
カラム数を変更したい場合、毎回手動でカスタムクラスやCSSを追加する必要がありません。同じページ内でレイアウトを切り替えられるためトップページ作成の効率化ができます。
新着記事
おすすめ記事
Cocoon「新着記事」「人気記事」「ナビカード」ブロックの使い方
「新着記事」および「人気記事」「ナビカード」ブロックの使い方は、サイドバーでスタイル選択が追加されている他は通常のブロック操作と同様です。
- Step1ブロックメニューを選択
投稿ページ、または固定ページのブロックエディタで「新着記事」「人気記事」「ナビカード」のいずれかのブロックを選択します。
「ナビカード」は表示するメニューをクリックします。
- Step2表示設定
サイドバー「ブロック」タブ→「スタイル」で表示設定をおこないます。
- 表示する記事の数
- 表示タイプ
- 通常のリスト(小さなカードです)
- 大きなサムネイル表示(当カスタマイズを使う場合はこちらを推奨します)
- Step3カラムスタイルを選択(当カスタマイズで追加)
サイドバーからお好みのスタイルをクリックします。
- Step4動作確認
動作確認をおこない、プレビューで表示できたら完成です。
当カスタマイズの注意点と特徴

カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。
- WAF設定
サーバーのWAF(Web Application Firewall)がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。 - ベーシック認証
- サーバー側でアクセス制限(ベーシック認証)を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
実装手順|Cocoon新着記事・人気記事ブロックのカラム数をサイドバーで切り替える
実装手順は以下の2ステップ。2ヶ所にコードを設定するだけなので作業時間は5分ほどです。
PHPの設定
スタイル切り替えをエディタに追加
PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。
CSSの設定
各スタイルを指定する
CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
特定商取引法に基づく表記 | |
---|---|
サイト名 | Turicco |
サイトURL | https://turicco.com/ |
お問い合わせ | https://turicco.com/contact/ |
購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
納品方法 | 記事公開 |
販売価格 | 500円 |
お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
返金・キャンセルについて | codoc株式会社利用規約 第10条(返金)に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |

Comment コメントはこちらへ
お世話になります。
とても有意義なコードを教えていただきありがとうございます。
現在、ヘッダー下におすすめカードを表示しています。
記事のアイキャッチを大きくするとおすすめカードの画像サイズも大きくなります。
アイキャッチのみを大きくしたいのですが、できますでしょうか?
> あいこ さん
ありがとうございます。
おすすめカードの画像を大きくしない場合は、下記のCSSを追加してお試しいただけますでしょうか。お手数をおかけいたします。
/* おすすめカードの画像幅調整 */
.recommended .widget-entry-cards.card-large-image .a-wrap {
width: unset; /* 幅の設定をリセット */
}
/* 画面幅834px以下の場合*/
@media screen and (max-width: 834px) {
.recommended .widget-entry-cards.card-large-image .a-wrap {
width: 48%; /* 幅を48%に設定 */
}
}