Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。
ただし、以下のような悩みを持つ方も多いのではないでしょうか？
Cocoonには「横並び表示」設定もありますが、これは横スクロール仕様のため、カードを静的に並べたい場合にはCSSカスタマイズが必要になります。
この記事で紹介するのは、サイドバーからカラム数を切り替えられるカスタマイズ方法です。デフォルト表示に加えて、2カラム・3カラム・4カラムなど最大6パターンのレイアウトに対応。複雑なコードを覚えることなく、より柔軟なトップページ設計が可能になります。
実際に当サイトに導入し、トップページ作成がぐっと楽になりました！
- Cocoon タブブロック
- Cocoon ブログカード
- Cocoon 白抜きボックス
- Cocoon タブ見出しボックス
- Cocoon ラベルボックス
- Cocoon アイコンボックス
- Cocoon アコーディオン（トグル）
- Cocoon 新着記事・人気記事ブロック
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー45（2025年4月現在）
- 2023年～有料記事公開
- →累計400件（月間約20件）購入いただいています
カスタマイズ概要｜新着記事・人気記事のカラム数をサイドバーで切り替える
このカスタマイズを使えば、サイドバーから簡単にカラム数を切り替えられる機能を実現できます。作業時間はわずか5分。コーディング初心者でも気軽に導入可能です。
サイドバーから簡単操作でレイアウト切り替え
表示スタイルは、以下の6種類のカラムレイアウトから選べます。
- 2カラム（モバイル：1カラム／2カラム）
- 3カラム（モバイル：1カラム／2カラム）
- 4カラム（モバイル：1カラム／2カラム）
▶サイドバーの操作イメージ
実際の選択画面・切り替え操作は下記動画をご覧ください。
- ブロックで「新着記事」を表示
- 表示スタイルを「大きなサムネイル表示」に設定
- サイドバーで【デフォルト → 2カラム → 3カラム】とスムーズに切り替え可能
ブロックエディタ対応｜新着・人気・ナビカードで使える
このカスタマイズは、以下のCocoon標準ブロックに対応しています。
- 新着記事ブロック
- 人気記事ブロック
- ナビカードブロック
既存のレイアウトにもそのまま導入できるので、現在ブロックエディタで構築中の方にもおすすめです。
初心者でも導入が簡単
- 設定に必要な作業は2ヶ所にコードをコピペするだけ
- 不要になったら元に戻すのも簡単（貼り付けたコードを削除すればOK）
- コーディング初心者でも安心してチャレンジできます
活用例｜トップページの見やすさUPに
この機能は、当サイトで紹介しているサイト型トップページの作成にも活用できます。
例：
- 新着記事 → 2カラム表示
- 人気記事 → 3カラム表示
目的に応じてカラム数を変えることで、見た目も整った、分かりやすい構成になります。
カラムレイアウト例
各カラム数は、display: grid を活用した均等な横並び表示で実現しています。
4カラム（モバイル2カラム）
同一ページ内で自由に切り替え可能！
通常、カラム数を変えるにはCSSやカスタムクラスを都度変更する必要がありますが、このカスタマイズを使えば同じページ内で簡単に表示スタイルを切り替えることが可能です。
Cocoon「新着記事」「人気記事」「ナビカード」ブロックの使い方
Cocoonテーマの「新着記事」「人気記事」「ナビカード」ブロックは、ブロックエディタから簡単に追加・カスタマイズできる便利なパーツです。
このカスタマイズを導入することで、サイドバーに「カラムスタイル」選択機能が追加され、より柔軟なレイアウト変更が可能になります。基本的な使い方は通常のブロック操作と同じですが、以下の手順に従って設定することで効果的に活用できます。
- Step1ブロックを追加する
投稿ページまたは固定ページで、エディタのブロック追加メニューを開きます。
使用できるブロック一覧
- 「新着記事」ブロック
- 「人気記事」ブロック
- 「ナビカード」ブロック
「ナビカード」の場合は、表示するリンク（メニュー）を設定する必要があります。
- Step2表示設定をおこなう
追加したブロックを選択し、エディタ右側の「ブロック」タブを開きます。
設定できる項目の例。
- 表示する記事数
- 表示タイプ
└ 通常のリスト（小カード）
└ 大きなサムネイル表示（本カスタマイズ使用時におすすめ）
※「大きなサムネイル表示」にすると、カラムレイアウトがより見やすくなります。
- Step3カラムスタイルを選択（カスタマイズで追加される機能）
カスタマイズ済みの状態では、サイドバーに「スタイル選択（カラム数）」が表示されます。
選べるカラムスタイル
- デフォルト（縦並び）
- 2カラム（モバイル：1カラム or 2カラム）
- 3カラム（モバイル：1カラム or 2カラム）
- 4カラム（モバイル：1カラム or 2カラム）
任意のスタイルをクリックするだけで、即座にレイアウトが切り替わります。
- Step4プレビュー＆動作確認
変更内容を確認するために「プレビュー」で表示を確認しましょう。
- カラム数の変更が正しく反映されているか
- モバイルでもレイアウトが崩れていないか
確認できたら完成です！
当カスタマイズの注意点と特徴
カスタマイズはスキンやサーバー環境の影響を受けることがあるため、以下の注意点を確認しながら進めてください。
- WAF設定
サーバーのWAF（Web Application Firewall）がONになっているか確認してください。必要に応じて一時的に設定を解除し、作業完了後に元に戻すことで対応可能です。 - ベーシック認証
- サーバー側でアクセス制限（ベーシック認証）を設定していませんか。設定が有効な場合、エラーで編集できない可能性があります。
実装手順｜Cocoon新着記事・人気記事ブロックのカラム数をサイドバーで切り替える
実装手順は以下の２ステップ。
それぞれのコードを子テーマに貼り付けるだけでOKです。
「スタイル切り替え機能」を追加
PHPを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: テーマのための関数 (functions.php)です。
「各スタイルのデザイン」を定義
CSSを貼り付ける場所は、ダッシュボード→「外観」→「テーマファイルエディター」→Cocoon Child: スタイルシート (style.css)です。
ここから先は有料公開です。コピペで実装できる具体的なコードを掲載します。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
500円（税込）
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%に設定 */
}
}