Cocoonナビカードの設定と使い方｜記事ピックアップ・レイアウト調整・リボンカスタマイズ

Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。

新着記事や人気記事のような自動表示とは違い、「読んでほしい記事だけ」 をピンポイントでアピールできるのが大きなメリット。

この記事では、ナビカードの基本的な設定方法からリボンを可愛くアレンジするカスタマイズまで分かりやすく解説します。

まだ使ったことがない方も、これを機にぜひナビカードを活用してみてください。

Cocoonナビカードとは？できること・できないこと

ナビカードは「WordPressメニューで選んだ記事だけ」をカード形式で表示できる、手動ピックアップ専用の一覧ブロックです。新着・人気の自動抽出ではなく、自分で登録した記事のみが表示されます。

補足｜特定記事のピックアップは new_list でも可能

Cocoonで特定の記事をピックアップ表示する方法として、Cocoonには「new_list」というショートコードも用意されており同じく特定記事をカード型で表示できます。

違いは「管理方法」と「表示方法」にあります。

項目	ナビカード	new_list
記事の指定方法	メニューで管理	ordered_postsで記事ID指定
メニュー作成	必要	不要
説明文（スニペット）	手動入力	なし（抜粋利用）
リボン表示	対応	非対応
表示方法	ブロック／ウィジェット／ショートコード	ショートコードのみ

どちらも「特定の記事をピックアップする」機能は同じなので、管理しやすさや設置場所に合わせて使い分けるのがおすすめです。

new_listを使う方法については以下の記事で解説しています。

Cocoonナビカード導入でやること（3ステップ）

ナビカード導入は3ステップで完了します。

順番に見ていきましょう。

Cocoonナビカード用メニューの作成

WordPress管理画面から「外観 → メニュー」を開き、以下の手順で設定します。

この「メニュー」が、ナビカードの表示内容になります。

スニペット（抜粋テキスト）・リボン設定（おすすめ・新着・注目など）

スニペット（抜粋テキスト）はサタイトル下、リボンはカードの左上に表示され、クリック率UPに効果的なラベル装飾です。

設定方法

1. メニュー内の記事アイテムをクリックして展開
2. 「説明」欄にスニペット（抜粋テキスト）」 を入力（任意）
3. 「CSS class（CSSクラス）」欄に 1〜5 の番号を入力（リボン種類）

1. おすすめ→「1」
2. 新着→「2」
3. 注目→「3」
4. 必見→「4」
5. お得→「5」

設定方法やオプションの詳細はCocoon公式「ナビカードの使い方」をご覧ください。

Cocoonナビカード｜3つの表示方法の違いと使い分け

表示方法	使える場所	メリット	注意点
ブロック	投稿 / 固定ページ	直感操作・プレビュー確認できる	記事ごとの編集が必要
ショートコード	どこでもOK	自由な位置に貼るだけで表示	見た目確認はプレビューで
ウィジェット	サイドバー / フッター / コンテンツ上部など	1回の設定で全ページ反映	記事内の細かい配置は不可

注意：Cocoonの「おすすめカード」機能でもカビカード用メニューを表示できますが、リボンは表示されません。リボンを使いたい場合は上記3つの方法で表示してください。

ブロック（初心者向け・位置調整◎）

投稿・または固定ページ内、ブロック機能で簡単にナビカードを表示する方法です。

ショートコード（再利用◎）

Cocoonのナビカードは、ショートコード1行で好きな場所に呼び出せるのが強みです。投稿・固定ページ・カスタムHTML・ショートコードブロックなど、どこに貼っても表示できます。

• 基本の書き方

[navi_list name="navi-card"]

• ツールバーからの挿入
  1. ブロックエディター上部の ショートコードアイコン をクリック
  2. ドロップダウンメニューから「ナビカード一覧」を選択
  3. サイドパネルでオプションを設定（任意）

• カスタムHTML（またはショートコードブロック）に直接入力でもOK

メニュー名や表示スタイルを指定して使いたい時は、以下のように書きます。

[navi_list name="メニュー名" type="default" bold="0" arrow="0"]

よく使う実用パターン	ショートコード例
小さめカード（標準）	[ navi_list name="pickup-menu" type="default" ]
大きめカード（訴求強め）	[ navi_list name="pickup-menu" type="large_thumb" ]

ウィジェット（全ページ共通◎）

1. WordPress「外観 → ウィジェット」
2. [C]ナビカード を追加
3. ドロップダウンからメニューを選ぶだけで表示
4. 太字/矢印はチェックで設定OK

Cocoonナビカード｜横並びレイアウトの調整（スライド vs カラム表示）

よりスッキリとしたデザインに仕上げるにはナビカードを横並びにすると効果的です。

Cocoon設定（スライド横並び）

ナビカードを「ブロック」で表示した場合のみ、サイドバーの設定で「横並び表示」設定ができます。矢印が表示されて右にスライドできる仕様になっています。

CSSで調整（スライドなしで表示）

スライドではなく、カラム数を設定してすべての記事を表示したい場合はこちらがおすすめです。

/*ナビカード（大きなカード）を横並びにする*/
.navi-entry-cards.large-thumb{
   display: grid; /* グリッドレイアウト */
   grid-template-columns: repeat(3, 1fr); /* 3列 */
}

 /* 768px以下の画面幅のとき */
@media (max-width: 768px) {
   .navi-entry-cards.large-thumb{
   grid-template-columns: repeat(2, 1fr); /* 2列 */
   }
}

カラム数をサイドバーで簡単切り替えるカスタマイズ

ナビカードを横並びにし、カラム数（２～４カラム）をサイドバーからクリックするだけで選べるカスタマイズを紹介しています。とても便利なのでお試しください。

• ナビカードを「ブロック」で表示した場合のみご利用できます
• ナビカードの他、ブロックで表示する「新着記事」「人気記事」も対象です

Cocoonナビカード｜リボン（リボンラベル）のカスタマイズ

リボンの色をCSSで変更

Cocoonナビカードのリボンは、CSSで色を上書きできます。

子テーマの style.css に追記し、#xxxxxx のカラーコードを好きな色に変更してください。

/* ナビカード リボン色変更（番号1〜5）*/
.ribbon-color-1 span { background-color: #ea7e7e; } /* おすすめ */
.ribbon-color-2 span { background-color: #7e95ea; } /* 新着 */
.ribbon-color-3 span { background-color: #f7c114; } /* 注目 */
.ribbon-color-4 span { background-color: #dc669b; } /* 必見 */
.ribbon-color-5 span { background-color: #e9546b; } /* お得 */

色コードの検索には「 Web色見本 原色大辞典」などのカラー見本サイトが便利です。

リボンの文字（キャプション）をPHPで変更

「おすすめ」「新着」などのラベル文字はCSSでは変更できないため、PHPフィルターで上書きします。

（※作業前にバックアップ推奨・自己責任でお願いします）

// ナビカード リボンのラベル（キャプション）を変更
add_filter('get_navi_card_ribbon_caption', function ($caption, $ribbon_no) {
    $labels = ['おすすめ','新着','注目','必見','お得'];
    return $labels[$ribbon_no - 1] ?? $caption;
}, 10, 2);

動作の仕組み

• class="1" のリボン → おすすめ
• class="2" → 新着
• 3 → 注目 / 4 → 必見 / 5 → お得
• 6 以上 → Cocoonの元テキストを維持（エラーになりません）

リボンの形デザイン2選（スッキリ/視認性UP）

色と文字を変更し、形も変えると回遊導線の訴求力がさらにUP。「斜め掛け」から雰囲気を変えたいときに使える、実用的な2スタイルです。

① 右向きリボン（横長・左上配置）

② 下向きリボン（タグ風）

まとめ

Cocoonナビカードは、見てほしい記事だけをピックアップしてカード型で紹介できる便利機能です。使い方は自由自在。読み物の案内、まとめページの導線、回遊の強化にも使えます。

この記事を参考に使いこなして、サイトをもっと楽しく充実させましょう！