【Cocoon】おすすめカードの設定方法｜画像サイズや表示されない時の対処法も解説

「おすすめカードの設定方法を知りたい」

「おすすめカードの画像サイズは？」

「おすすめカードが表示されない、どうして？」

この記事では、そんな方に向けて、Cocoonでおすすめカードの設定方法を解説します。

この記事を読めば、おすすめカードを設定はもちろん、

• 画像のサイズを統一したり
• 外部リンクを入れたり
• 表示されない対処法が分かったり

できるようになります。

私自身も最近おすすめカードを使い始めて、いろんな設定ができるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

おすすめカードとは？

おすすめカードとは、好きな記事やその他コンテンツの画像リンクをヘッダー下に目立つよう表示できる機能のことです。

_{＼クリックで拡大表示／}

Cocoonのおすすめカードには、

• 投稿記事
• 固定ページ
• カスタムリンク
• カテゴリー
• タグ

の5つ設定できます。

おすすめカードを設定することで、

• 読んでほしい記事に誘導できる
• ブログの回遊率が向上する
• ブログ全体のデザインがオシャレになる

というメリットがあります。

Cocoonおすすめカード用メニューの作り方

まず、Cocoonのおすすめカードに表示させるコンテンツを作ります。

次は、おすすめカードをどのように表示させるか設定していきます。

Cocoonおすすめカードの設定方法

Cocoonのおすすめカードを設定する方法は、下記の通りです。

おすすめカードで設定できる項目は、下記5つあります。

それぞれ詳しく解説します。

表示するページを選ぶ

「おすすめカードの表示」では、

• 表示しない
• 全ページで表示
• フロントページのみで表示
• 投稿・固定ページ以外で表示
• 投稿・固定ページのみで表示
• 投稿ページのみで表示
• 固定ページのみで表示

の7つの中から選べます。

表示するメニューを選ぶ

「メニュー選択」では、先ほど作成したおすすめカード用メニューを選びます。

表示スタイルを選ぶ

「表示スタイル」では、

• 画像のみ
• 画像中央に白文字タイトル
• 画像中央にラベルでタイトル
• 画像下段を黒背景にしタイトルを重ねる

の4つの中から選べます。

下の画像は、4つある表示スタイルの見え方です。

余白を設ける

「カード余白」では、

• おすすめカード毎に余白を設ける

かどうか選べます。

下の画像は、余白を設けた場合と設けない場合の見え方です。

左右に余白を設ける

「カードエリア左右余白」では、

• おすすめカードエリアの左右に余白を設ける

かどうか選べます。

下の画像は、左右に余白を設けた場合と設けない場合の見え方です。

Cocoonおすすめカードの画像サイズと設定方法

Cocoonのおすすめカードの画像サイズは、幅1200×高さ675pxを推奨します。

なぜなら、おすすめカードに表示される画像は、記事のアイキャッチ画像と同じものが表示され、アイキャッチ画像の推奨サイズが幅1200×高さ675pxだからです。

アイキャッチ画像の推奨サイズが幅1200×高さ675pxの理由は、

• Googleが画像サイズを幅1200px以上にすることを推奨している
• 画像の表示速度を遅くなりすぎないようにしたい
• 普段見慣れている地デジやYouTube画面と同じ比率であるアスペクト比(=幅と高さの比率)16:9にしたい

つまり、Googleが推奨しているサイズ、かつ画像の表示速度が遅くならないように幅1200px、

アスペクト比16:9になるよう計算すると、高さ675pxだからです。

よって、おすすめカードの画像サイズは、幅1200×高さ675pxを推奨します。

おすすめカードの画像を設定する方法は、アイキャッチ画像を設定すれば、自動的に表示されるようになります。

アイキャッチ画像の設定方法は、下の記事を参考にしてください。

Cocoonおすすめカードが表示されない原因は？

Cocoonでおすすめカードを設定したが、

場合の対処法を、それぞれ詳しく解説します。

画像が表示されない場合

おすすめカードの画像が表示されない原因は、リンク先のページにアイキャッチ画像が設定されていないからです。

ですので、リンク先のページにアイキャッチ画像を設定すれば、おすすめカードに画像が表示されるようになります。

アイキャッチ画像の設定方法は、下の記事を参考にしてください。

特定のページで表示されない場合

おすすめカードが

• 一部のページで表示されない
• 全ページで表示されない

場合、WordPress管理画面のCocoon設定で、表示させないよう設定してしまっていることが考えられます。

おすすめカードをページに表示させる方法は、先ほど紹介したCocoon設定のおすすめカードから設定できます。

Cocoonおすすめカードをサイドバーに表示する方法

Cocoonのおすすめカードは、基本ヘッダーに設置しますが、ウィジェット機能を使えば、

などにおすすめカードを表示できます。

ウィジェット機能でおすすめカードをサイドバーに表示する方法は、下記の通りです。

ウィジェットでも以下の４項目を設定できます。

• タイトル
• 表示スタイル
• 余白の有無
• 表示させるページ

Cocoonおすすめカードでよくある質問

Cocoonのおすすめカードでよくある質問

の3つを解説します。

おすすめカードが小さい原因は？

おすすめカードが小さい原因は、アイキャッチ画像のサイズがバラバラになっているからです。

例えば、アイキャッチ画像のサイズが

• 記事A：幅500×高さ200px
• 記事B：幅300×高さ600px
• 記事C：幅1000×高さ800px

の3つの記事を比較すると、記事Cが1番サイズが大きいです。

これら3つの記事をおすすめカードに設定すると、記事Cよりアイキャッチ画像のサイズが小さい記事A・Bは、おすすめカードも小さくなります。

ですので、おすすめカードに設定する記事のアイキャッチ画像のサイズを統一すれば、おすすめカードが小さくなるのも解消されます。

アイキャッチ画像のサイズを変更する方法は、下の記事を参考にしてください。

おすすめカードに外部リンクを入れられる？

おすすめカードに外部リンクを入れられます。

おすすめカードに外部リンクを入れる方法は、下記の通りです。

おすすめカードの画像を変更できる？

おすすめカードの画像は変更できます。

おすすめカードの画像を変更したい場合は、その画像リンク先のアイキャッチ画像を変更するとできます。

アイキャッチ画像を変更する方法は、下の記事を参考にしてください。

当ブログ使用「SWELL」はおすすめカードをデバイス別でレイアウト可能！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLでは、PC・スマホ別でおすすめカードのバナーレイアウトを変更できます。

また、バナータイトルのデザインを以下の6つから選べます。

おすすめカードをデバイス別でレイアウト変更したい人は、SWELLもおすすめですよ。

まとめ：おすすめカードで回遊率UP

今回は、Cocoonでおすすめカードの設定方法を紹介しました。

Cocoonでは、おすすめカードと似た機能で「アピールエリア」というものもあります。

アピールエリアの設定方法についても知りたい人は、下の記事も見てください。

また以下の記事では、おすすめカード以外のカスタマイズ方法も紹介しています。