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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

できるようになります。

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

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

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

目次

おすすめカードとは?

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

\クリックで拡大表示/

PCでのおすすめカードの表示方法
PC画面
スマホでのおすすめカードの表示方法
スマホ画面

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

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

の5つ設定できます。

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

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

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

かめコンパス

収益用記事をおすすめカードに設定してもいいね!

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

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

STEP

WardPress管理画面で、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP

「新しいメニューを作成しましょう」をクリックする

「新しいメニューを作成しましょう」がある場所
STEP

メニュー名を入力し、メニューを保存をクリックする

かめコンパス

メニュー名はシンプルに「おすすめカード」でOK

メニュー名を入力する場所と、「メニューを保存」がある場所
STEP

メニュー項目の中からおすすめカードに設定したいコンテンツを選び、メニューに追加をクリックする

おすすめカードに設定したいコンテンツを選んでいる様子と、「メニューに追加」がある場所
かめコンパス

コンテンツは2つ以上選んでもいいよ

STEP

メニューに追加したコンテンツを並び替えて、メニューを保存をクリックする

メニューに追加したコンテンツを並び替えている様子と、「メニューを保存」がある場所

おすすめカード用メニューの完成!

かめコンパス

おすすめカードにタイトルをつけられるよ

  1. コンテンツをプルダウンする
  2. 「ナビゲーションラベル」でタイトルを編集する
おすすめカードのタイトルをつける場所

タイトルを非表示にしたい場合は、後ほど解説します。

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

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

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

STEP

WordPress管理画面で、Cocoon設定おすすめカードの順にクリックする

「Cocoon設定」、「おすすめカード」がある場所
STEP

表示されたページで設定する

おすすめカードを設定する場所

設定する項目が変更できない場合は、スキン制御されているのが原因です。

スキン制御されている場合の表示のされ方

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

設定し終えたら、変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

おすすめカードの設定完了!

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

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

表示するページを選ぶ

「おすすめカードの表示」で選べる項目

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

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

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

かめコンパス

どのページに表示させるか自由に選べるよ

表示するメニューを選ぶ

「メニュー選択」でおすすめカード用メニューを選んでいる様子

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

かめコンパス

先ほど作ったメニュー名が表示されるよ

表示スタイルを選ぶ

「表示スタイル」で選べる項目

「表示スタイル」では、

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

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

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

表示スタイルが「画像のみ」の場合の見え方
画像のみ
表示スタイルが「画像中央に白文字タイトル」の場合の見え方
画像中央にラベルでタイトル
表示スタイルが「画像中央にラベルでタイトル」の場合の見え方
画像中央に白文字タイトル
表示スタイルが「画像下段を黒背景にしタイトルを重ねる」の場合の見え方
画像下段を黒背景にしタイトルを重ねる
かめコンパス

タイトルを表示させたくない場合は、画像のみを選ぼう

余白を設ける

「カード余白」の「おすすめカード毎に余白を設ける」がある場所

「カード余白」では、

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

かどうか選べます。

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

「カード余白」でおすすめカード毎に余白を設けない場合の見え方
余白を設けない
「カード余白」でおすすめカード毎に余白を設けた場合の見え方
余白を設けた
かめコンパス

背景色とおすすめカードの画像の色が違う場合は余白を設けるのもアリだね

左右に余白を設ける

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

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

かどうか選べます。

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

「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けない場合の見え方
左右に余白を設けない
「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けた場合の見え方
左右に余白を設けた
かめコンパス

あまり変化が分からなかった…

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

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

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

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

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

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

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

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

かめコンパス

当ブログの画像サイズも幅1200×高さ675pxにしているよ!

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

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

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

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

  • 画像が表示されない
  • 特定のページで表示されない

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

画像が表示されない場合

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

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

かめコンパス

この機会に全ての記事にアイキャッチ画像を設定しようね!

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

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

おすすめカードが

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

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

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

かめコンパス

かんたんに設定できるよ!

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

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

  • サイドバー
  • サイドバースクロール追従
  • メインカラムスクロール追従
  • 投稿タイトル上/下
  • フッター左/中/右

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

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

STEP

WardPress管理画面で、外観ウィジェットの順にクリックする

「外観」、「ウィジェット」がある場所
STEP
  1. 「おすすめカード」をプルダウン
  2. 「サイドバー」を選ぶ
  3. ウィジェットを追加をクリックする
おすすめカードをプルダウンしてサイドバーを選んでいる様子と、「ウィジェットを追加」がある場所

おすすめカードをサイドバーに設置完了!

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

  • タイトル
  • 表示スタイル
  • 余白の有無
  • 表示させるページ
ウィジェットで設定できるおすすめカードの項目

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

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

3つを解説します。

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

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

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

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

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

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

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

かめコンパス

私は推奨サイズである幅1200×高さ675pxに統一してるよ!

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

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

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

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

STEP

WordPress管理画面で、外観メニューの順にクリックする

「外観」、「メニュー」がある場所
STEP

\タブの切り替え/

  1. 「編集するメニューを選択」からおすすめカード用メニューを選ぶ
  2. 選択をクリックする
「編集するメニューを選択」からおすすめカード用メニューを選んでいる様子と、「選択」がある場所
STEP
  1. 「カスタムリンク」をプルダウンする
  2. 「URL」に外部リンクを入力する
  3. 「リンク文字列」にタイトルを入力する
  4. メニューを追加をクリックする
カスタムリンク内の項目を設定している様子と、「メニューを追加」がある場所
STEP

メニューを保存をクリックする

「メニューを保存」がある場所

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

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

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

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

かめコンパス

おすすめカードとアイキャッチ画像はリンクしてるよ!

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

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

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

おすすめカードの設定方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次