Cocoonのおすすめカードの使い方と画像サイズ【表示されない原因も】

この記事では、cocoonおすすめカードの基本的な使い方から「表示されない」ときの原因チェックリスト、そして見た目を整える画像サイズの考え方まで詳しく解説していきます。

cocoonのおすすめカードとは？まず全体像を整理しよう

おすすめカードでできることと使い方のイメージ

cocoonのおすすめカードは、ブログのなかで特に見てほしい記事やページを、カード状に並べて表示できる機能です。ヘッダーの下やサイドバーなど、目立つ場所にずらっと並べて見せることで、読者に「このブログの推しコンテンツ」を一瞬で伝えられます。

役割のイメージを、簡単な表にまとめるとこんな感じです。

項目	内容	こんなときに便利
表示場所	ヘッダー下・トップページ・サイドバーなど	ブログの顔となる記事を並べたいとき
見た目	画像＋タイトルのカード	視覚的に目立つリンク導線を作りたいとき
中身	投稿・固定ページ・カテゴリなど	収益記事やまとめ記事に誘導したいとき
設定方法	メニューとCocoon設定を組み合わせて制御	テーマの機能だけで完結させたいとき

私も使い始めのころは、ブログカードと何が違うのかよく分からず、とりあえず触ってみるところからスタートしました。ただ、実際に設定してみると、トップページに「まず読んでほしい4記事」を並べたり、サイドバーに「人気カテゴリ」をまとめたりできて、内部リンクの動きが目に見えてよくなりました。

ブログカードやメニューとの違い

cocoon初心者が混乱しやすいのが、ブログカード・グローバルメニュー・おすすめカードの違いです。ざっくり比べておくと、頭の中が整理されます。

• ブログカード
  記事本文の中に差し込むリンクカードで、関連記事を紹介するときに使うもの。
• グローバルメニュー
  画面上部などに並ぶメニューで、サイト全体の大きな分類（カテゴリや固定ページなど）への導線。
• おすすめカード
  決めた場所に「特に見てほしい記事やページ」をカード形式でまとめて表示する枠。

おすすめカードの使い方をひと言でまとめると、「ブログの中で一番押さえておきたい記事をまとめて見せる看板」のようなものです。ここに何を並べるかで、サイト全体の印象や読者の回遊ルートも大きく変わってきます。

cocoonおすすめカードの基本的な使い方と設定手順

おすすめカード用メニューを作る手順

cocoonのおすすめカードは、「メニュー」を元に表示される仕組みです。ここができていないと、どれだけCocoon設定をいじってもカードは出てこないので、まずメニュー作成から始めましょう。

流れは次の通りです。

• 管理画面の「外観 → メニュー」を開く
• 「新しいメニューを作成」から、分かりやすい名前（例：おすすめカード用）でメニューを作る
• 左側の「投稿」「固定ページ」「カテゴリ」などから、おすすめしたいものにチェックを入れて「メニューに追加」
• メニュー内の並び順をドラッグで調整する
• 「メニューを保存」をクリックする

この段階でつまずくと、「cocoonおすすめカードが表示されない」という典型的な状態になります。おすすめカードに詰め込みすぎるとごちゃつきやすいので、最初は4件前後に絞っておくと、デザインも崩れにくくて扱いやすいです。

Cocoon設定からおすすめカードを表示する方法

メニューが作れたら、つぎにCocoon設定で「どのメニューを」「どこに出すか」を指定します。ここまで終わって、はじめて画面におすすめカードが表示されます。

作業のイメージを表にまとめると、次のようになります。

手順	設定場所	すること
1	Cocoon設定 → おすすめカード	おすすめカードのタブを開く
2	表示場所	ヘッダー下・フロントページなど、表示させたい位置を選ぶ
3	メニュー	先ほど作った「おすすめカード用メニュー」を選択する
4	表示スタイル	画像とテキストの表示パターンを選ぶ
5	保存	画面下の「変更をまとめて保存」をクリックする

特に、メニューの選択と表示場所の設定を忘れると、いくらやってもおすすめカードは出てきません。「今、自分はどのメニューをどこに表示しようとしているのか」を意識しながら作業するだけでも、ミスはかなり減ります。

cocoonおすすめカードが表示されないときの原因と対処法

まず確認したい5つのチェックポイント

おすすめカードが表示されないときは、焦る前に基本の5項目を落ち着いて確認してみてください。意外と、単純な見落としで止まっていることが多いです。

チェック項目	確認内容	よくあるミス
メニュー	おすすめカード用のメニューが作成されているか	中身が空のまま保存している
メニュー選択	Cocoon設定で正しいメニューを指定しているか	別のメニューを選んでいる
表示場所	ヘッダー下など表示位置が有効になっているか	「表示しない」のままになっている
公開状態	メニュー内の投稿・固定ページが公開済みか	下書きや非公開のままでリンクしている
アイキャッチ	各ページにアイキャッチ画像が設定されているか	アイキャッチがなくNo Image表示になっている

この5つで解決するケースは本当に多いです。とくに多いのが、「メニューは作ったけれど、Cocoon設定でそのメニューを選び忘れている」というパターン。カテゴリをおすすめカードに入れているのにカテゴリ画像を設定しておらず、カードが全部No Imageになってしまう、という相談もよく見かけます。

それでも表示されないときに試したいこと

基本の5項目を見直してもcocoonおすすめカードが表示されない場合は、もう少し踏み込んで原因を探っていきます。

• キャッシュを削除する
  テーマやサーバーのキャッシュを使っている場合は一度削除し、表示が変わるか確認します。キャッシュ系プラグインを入れているなら、一時的に無効化してチェックしてみてください。
• プラグインの競合を疑う
  デザイン変更や高速化系のプラグインが、Cocoonの表示に影響していることもあります。心当たりのあるものを一度まとめて止めて、表示が戻るかを見てみましょう。
• 追加CSSや子テーマの編集ミス
  追加CSSをいじった直後や、子テーマのテンプレートを触ったあとに崩れた場合は、その変更部分をコメントアウトしたり元に戻したりして様子を見ます。
• テンプレートファイルの編集履歴を振り返る
  functions.phpやテンプレートファイルを編集した直後からおかしくなったなら、その編集をいったん取り消してみるのが確実です。

とくに、PHPファイルの編集に慣れていないのに子テーマを触ると、Warningやエラーが出て、おすすめカードどころかサイト全体の表示がおかしくなることもあります。心当たりがある場合は、編集前の状態に戻してから再度おすすめカードの表示を確認してみてください。

cocoonおすすめカードの画像サイズとデザインの整え方

おすすめカードに合う画像サイズの目安

cocoonのおすすめカードに表示される画像は、基本的に各ページで設定したアイキャッチ画像です。つまり、アイキャッチのサイズと比率をそろえておくことが、そのままおすすめカードの整い具合につながります。

よく使われるのは、横長の16:9くらいの比率です。具体的なサイズの目安をいくつか挙げておきます。

画像サイズの例	比率	特徴
1200 × 675	16:9	一般的な横長サムネ。SNSシェアにも使いやすい。
1280 × 720	16:9	動画サムネっぽい雰囲気。大きめに見せたいときに便利。
1000 × 562	16:9	少し軽めにしたいときにちょうどいいバランス。
800 × 450	16:9	軽量重視。画像の容量を抑えたいブログ向き。

大事なのは「ぴったりこの数字にしなければいけない」ということではなく、「同じ比率で作る」という考え方です。Canvaなどの画像編集ツールでテンプレートを1つ作り、いつも同じサイズで書き出すようにしておくと、自然とおすすめカードの見た目もそろってきます。

画像サイズがバラバラになる原因とそろえ方

「同じテーマを使っているはずなのに、おすすめカードの画像だけアンバランスに見える」というケースもよくあります。原因として多いのは、次のようなパターンです。

きれいにそろえたいときは次の順番で見直してみてください。まず、「これから作るアイキャッチは16:9で統一する」とざっくり決める。次に、新しい記事から順番に、その比率でアイキャッチを作り直していく。余裕が出てきたら、アクセスの多い記事だけ過去画像も入れ替える。このくらいのペースで進めていくと、負担なく整っていきます。

表示枚数やレイアウトを調整してクリック率を上げる

PC・スマホ別に見たおすすめカードの枚数の目安

おすすめカードの枚数を決めるときは、PCだけでなくスマホの見え方もセットで考えるのがコツです。代表的なパターンを表にまとめてみました。

デバイス	枚数の目安	特徴・注意点
PC	4枚	横一列に並びやすく、バランスが良い基本形。
PC	6〜8枚	情報量は増えるが、1枚あたりが小さくなりがち。
スマホ	2〜4枚	スクロールの邪魔になりにくく、本文にもすぐ辿り着ける。
スマホ	6枚以上	縦に長くなり、本文がかなり下の方になってしまうことも。

私の感覚では、トップページのヘッダー下に置くおすすめカードは、PCもスマホも4枚前後がいちばん扱いやすいと感じました。あまり欲張って詰め込みすぎると、読者がどれをクリックすればいいか分からなくなってしまい、結果的に反応が落ちることもあります。

どの記事をおすすめカードに置くべきか

枚数が決まったら、「何を並べるか」を考えていきます。ただ人気記事を上から順に並べるのではなく、役割ごとに整理しておくと、運用がぐっと楽になります。

置く記事のタイプ	例	役割
収益につながる記事	アフィリエイト記事・サービス紹介記事	ブログの収益化につながる導線を強化する。
まとめ・ハブ記事	カテゴリのまとめ記事・入門ガイド	関連する個別記事へ読者を送り出す起点。
プロフィールやコンセプト	自己紹介・運営者の思いを語った記事	ブログのファンを増やし、信頼感を高める。
時期もの・特集記事	イベントや企画の特集記事	一時的な需要をしっかり取りにいく。

おすすめカードの使い方に迷っている場合は、まず「収益記事を1〜2本」「ブログの方向性が伝わる記事を1本」「カテゴリのまとめ記事を1本」といった構成から始めると、無理なく運用できます。

ちょっと差がつくおすすめカードのカスタマイズ例

CSSを使ったデザイン調整のヒント

cocoonは、そのままでも十分見やすく作られていますが、追加CSSを数行足すだけでも雰囲気がガラッと変わります。よくある調整ポイントはこんなところです。

追加CSSに貼り付けて使えるサンプルコードを公開しているブログも多いので、「何をどう変えているのか」を意識しながら試してみると、自然と自分好みのデザインが見つかっていきます。表示自体に問題がない状態になってから、次のステップとしてデザイン調整にチャレンジしてみるイメージです。

おすすめカードを使った内部リンク設計の考え方

おすすめカードは、単なる飾りではなく、内部リンクを整理するハブとしてもとても優秀です。考え方の例をいくつか挙げておきます。

• トップページのおすすめカードに、各カテゴリのまとめ記事を並べる
• まとめ記事の中では、関連する個別記事をブログカードで紹介する
• サイドバーのおすすめカードには、収益記事だけを集中的に置く

こうしておくと、「トップページ → おすすめカード → まとめ記事 → 個別記事」という流れが自然にできあがり、読者がどこに進めばいいか迷いにくくなります。cocoonおすすめカードの使い方は、設定の話だけで完結させず、サイト全体の動線設計とセットで考えてあげると、効果がぐっと大きくなります。

よくある質問：cocoonおすすめカードQ&A

Q1. cocoonおすすめカードがどうしても表示されません。最後に何を確認すればいいですか？

A. まずは「おすすめカード用のメニューがきちんと作られているか」「Cocoon設定でそのメニューを選んでいるか」「表示場所が有効になっているか」の3つを、落ち着いてもう一度確認してみてください。それでもダメな場合は、キャッシュ系プラグインや追加CSS、子テーマの編集内容を順番に疑っていきます。プラグインを最低限の数だけ有効にした状態で表示を確認し、それでも解決しないときは、Cocoonの公式フォーラムなどに状況を書いて相談してみるのもおすすめです。

Q2. cocoonおすすめカードに使う画像は、必ず16:9じゃないといけませんか？

A. 絶対に16:9でないといけないわけではありません。ただ、「毎回同じ比率で作る」ことが、見た目をそろえるうえでは一番大事です。縦長・正方形・横長が混ざると、どうしてもカードの高さがバラバラになってしまいます。まずは、自分のブログに合いそうな比率（16:9など）をひとつ決めて、新しく作るアイキャッチからその比率でそろえていくのがおすすめです。

Q3. おすすめカードの使い方がいまいちピンと来ません。どんなブログと相性が良いですか？

A. 雑記ブログ・特化ブログ問わず使えますが、とくに「読んでほしい記事がはっきりしているブログ」と相性が良いです。たとえば、収益記事やサービスの案内ページ、プロフィール記事などを目立たせたい場合に、おすすめカードはとても便利です。記事数が少ないうちは、無理にたくさん並べるのではなく、2〜4枚ほどに絞って「ブログの方向性が伝わる記事」だけを置くと、読者にも親切な構成になります。

まとめ：cocoonおすすめカードをうまく使ってブログの導線を強化しよう

この記事のポイントを整理しておきます

今日できる最初の一歩としては、「おすすめカード用のメニュー」をひとつ作り、今いちばん読んでほしい記事を4つだけ選んで登録してみてください。

そのうえで、Cocoon設定から表示場所を決め、実際の見え方を確認しながら、画像サイズや枚数を少しずつ調整していきましょう。そうして手を動かしていくうちに、あなたのブログらしいおすすめカードの使い方が自然と見つかっていきます。