![](https://www.kamecompass.com/wp-content/uploads/2024/01/0-4.png)
「おすすめカードの設定方法を知りたい」
「おすすめカードの画像サイズは?」
「おすすめカードが表示されない、どうして?」
この記事では、そんな方に向けて、Cocoonでおすすめカードの設定方法を解説します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
こんにちは、かめコンパスです!
この記事を読めば、おすすめカードを設定はもちろん、
- 画像のサイズを統一したり
- 外部リンクを入れたり
- 表示されない対処法が分かったり
できるようになります。
私自身も最近おすすめカードを使い始めて、いろんな設定ができるようになりました。
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-2.jpg)
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
\もっと早く乗り換えればよかった…/
使い心地バツグン、高機能でオシャレ!
おすすめカードとは?
おすすめカードとは、好きな記事やその他コンテンツの画像リンクをヘッダー下に目立つよう表示できる機能のことです。
\クリックで拡大表示/
![PCでのおすすめカードの表示方法](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-5.png)
![PCでのおすすめカードの表示方法](https://www.kamecompass.com/wp-content/uploads/2024/01/1-1-5.png)
![スマホでのおすすめカードの表示方法](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-5.png)
![スマホでのおすすめカードの表示方法](https://www.kamecompass.com/wp-content/uploads/2024/01/1-2-5.png)
Cocoonのおすすめカードには、
- 投稿記事
- 固定ページ
- カスタムリンク
- カテゴリー
- タグ
の5つ設定できます。
おすすめカードを設定することで、
- 読んでほしい記事に誘導できる
- ブログの回遊率が向上する
- ブログ全体のデザインがオシャレになる
というメリットがあります。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
収益用記事をおすすめカードに設定してもいいね!
Cocoonおすすめカード用メニューの作り方
![](https://www.kamecompass.com/wp-content/uploads/2024/01/2-7.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/2-7.png)
まず、Cocoonのおすすめカードに表示させるコンテンツを作ります。
WardPress管理画面で、外観⇒メニューの順にクリックする
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-6.png)
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-6.png)
「新しいメニューを作成しましょう」をクリックする
![「新しいメニューを作成しましょう」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-2-4.png)
![「新しいメニューを作成しましょう」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-2-4.png)
メニュー名を入力し、メニューを保存をクリックする
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
メニュー名はシンプルに「おすすめカード」でOK
![メニュー名を入力する場所と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-3-4.png)
![メニュー名を入力する場所と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-3-4.png)
メニュー項目の中からおすすめカードに設定したいコンテンツを選び、メニューに追加をクリックする
![おすすめカードに設定したいコンテンツを選んでいる様子と、「メニューに追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-4-3.png)
![おすすめカードに設定したいコンテンツを選んでいる様子と、「メニューに追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-4-3.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
コンテンツは2つ以上選んでもいいよ
メニューに追加したコンテンツを並び替えて、メニューを保存をクリックする
![メニューに追加したコンテンツを並び替えている様子と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-5-3.png)
![メニューに追加したコンテンツを並び替えている様子と、「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-5-3.png)
おすすめカード用メニューの完成!
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
おすすめカードにタイトルをつけられるよ
- コンテンツをプルダウンする
- 「ナビゲーションラベル」でタイトルを編集する
![おすすめカードのタイトルをつける場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-6.png)
![おすすめカードのタイトルをつける場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-6.png)
タイトルを非表示にしたい場合は、後ほど解説します。
次は、おすすめカードをどのように表示させるか設定していきます。
Cocoonおすすめカードの設定方法
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4.png)
Cocoonのおすすめカードを設定する方法は、下記の通りです。
WordPress管理画面で、Cocoon設定⇒おすすめカードの順にクリックする
![「Cocoon設定」、「おすすめカード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-1-3.png)
![「Cocoon設定」、「おすすめカード」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-1-3.png)
設定し終えたら、変更をまとめて保存をクリックする
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-3-1.png)
![「変更をまとめて保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-1-3-1.png)
おすすめカードの設定完了!
おすすめカードで設定できる項目は、下記5つあります。
- おすすめカードの表示
- メニュー選択
- 表示スタイル※タイトル非表示あり
- カード余白
- カードエリア左右余白
それぞれ詳しく解説します。
表示するページを選ぶ
![「おすすめカードの表示」で選べる項目](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-3.png)
![「おすすめカードの表示」で選べる項目](https://www.kamecompass.com/wp-content/uploads/2024/01/3-2-3.png)
「おすすめカードの表示」では、
- 表示しない
- 全ページで表示
- フロントページのみで表示
- 投稿・固定ページ以外で表示
- 投稿・固定ページのみで表示
- 投稿ページのみで表示
- 固定ページのみで表示
の7つの中から選べます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
どのページに表示させるか自由に選べるよ
表示するメニューを選ぶ
![「メニュー選択」でおすすめカード用メニューを選んでいる様子](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-3.png)
![「メニュー選択」でおすすめカード用メニューを選んでいる様子](https://www.kamecompass.com/wp-content/uploads/2024/01/3-3-3.png)
「メニュー選択」では、先ほど作成したおすすめカード用メニューを選びます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
先ほど作ったメニュー名が表示されるよ
表示スタイルを選ぶ
![「表示スタイル」で選べる項目](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-1.png)
![「表示スタイル」で選べる項目](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-1.png)
「表示スタイル」では、
- 画像のみ
- 画像中央に白文字タイトル
- 画像中央にラベルでタイトル
- 画像下段を黒背景にしタイトルを重ねる
の4つの中から選べます。
下の画像は、4つある表示スタイルの見え方です。
![表示スタイルが「画像のみ」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![表示スタイルが「画像のみ」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![表示スタイルが「画像中央に白文字タイトル」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-3.png)
![表示スタイルが「画像中央に白文字タイトル」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-3.png)
![表示スタイルが「画像中央にラベルでタイトル」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-4.png)
![表示スタイルが「画像中央にラベルでタイトル」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-4.png)
![表示スタイルが「画像下段を黒背景にしタイトルを重ねる」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-5.png)
![表示スタイルが「画像下段を黒背景にしタイトルを重ねる」の場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-5.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
タイトルを表示させたくない場合は、画像のみを選ぼう
余白を設ける
![「カード余白」の「おすすめカード毎に余白を設ける」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-5.png)
![「カード余白」の「おすすめカード毎に余白を設ける」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/3-5.png)
「カード余白」では、
- おすすめカード毎に余白を設ける
かどうか選べます。
下の画像は、余白を設けた場合と設けない場合の見え方です。
![「カード余白」でおすすめカード毎に余白を設けない場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![「カード余白」でおすすめカード毎に余白を設けない場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![「カード余白」でおすすめカード毎に余白を設けた場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-5-2.png)
![「カード余白」でおすすめカード毎に余白を設けた場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-5-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
背景色とおすすめカードの画像の色が違う場合は余白を設けるのもアリだね
左右に余白を設ける
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-6.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/3-6.png)
「カードエリア左右余白」では、
- おすすめカードエリアの左右に余白を設ける
かどうか選べます。
下の画像は、左右に余白を設けた場合と設けない場合の見え方です。
![「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けない場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けない場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-4-2.png)
![「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けた場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-6-2.png)
![「カードエリア左右余白」でおすすめカードエリアの左右に余白を設けた場合の見え方](https://www.kamecompass.com/wp-content/uploads/2024/01/3-6-2.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
あまり変化が分からなかった…
Cocoonおすすめカードの画像サイズと設定方法
Cocoonのおすすめカードの画像サイズは、幅1200×高さ675pxを推奨します。
なぜなら、おすすめカードに表示される画像は、記事のアイキャッチ画像と同じものが表示され、アイキャッチ画像の推奨サイズが幅1200×高さ675pxだからです。
アイキャッチ画像の推奨サイズが幅1200×高さ675pxの理由は、
- Googleが画像サイズを幅1200px以上にすることを推奨している
- 画像の表示速度を遅くなりすぎないようにしたい
- 普段見慣れている地デジやYouTube画面と同じ比率であるアスペクト比(=幅と高さの比率)16:9にしたい
つまり、Googleが推奨しているサイズ、かつ画像の表示速度が遅くならないように幅1200px、
アスペクト比16:9になるよう計算すると、高さ675pxだからです。
よって、おすすめカードの画像サイズは、幅1200×高さ675pxを推奨します。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
当ブログの画像サイズも幅1200×高さ675pxにしているよ!
おすすめカードの画像を設定する方法は、アイキャッチ画像を設定すれば、自動的に表示されるようになります。
アイキャッチ画像の設定方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
Cocoonおすすめカードが表示されない原因は?
Cocoonでおすすめカードを設定したが、
- 画像が表示されない
- 特定のページで表示されない
場合の対処法を、それぞれ詳しく解説します。
画像が表示されない場合
おすすめカードの画像が表示されない原因は、リンク先のページにアイキャッチ画像が設定されていないからです。
ですので、リンク先のページにアイキャッチ画像を設定すれば、おすすめカードに画像が表示されるようになります。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
この機会に全ての記事にアイキャッチ画像を設定しようね!
アイキャッチ画像の設定方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
特定のページで表示されない場合
おすすめカードが
- 一部のページで表示されない
- 全ページで表示されない
場合、WordPress管理画面のCocoon設定で、表示させないよう設定してしまっていることが考えられます。
おすすめカードをページに表示させる方法は、先ほど紹介したCocoon設定のおすすめカードから設定できます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
かんたんに設定できるよ!
Cocoonおすすめカードをサイドバーに表示する方法
Cocoonのおすすめカードは、基本ヘッダーに設置しますが、ウィジェット機能を使えば、
- サイドバー
- サイドバースクロール追従
- メインカラムスクロール追従
- 投稿タイトル上/下
- フッター左/中/右
などにおすすめカードを表示できます。
ウィジェット機能でおすすめカードをサイドバーに表示する方法は、下記の通りです。
WardPress管理画面で、外観⇒ウィジェットの順にクリックする
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/6-1.png)
![「外観」、「ウィジェット」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/6-1.png)
- 「おすすめカード」をプルダウン
- 「サイドバー」を選ぶ
- ウィジェットを追加をクリックする
![おすすめカードをプルダウンしてサイドバーを選んでいる様子と、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/6-2.png)
![おすすめカードをプルダウンしてサイドバーを選んでいる様子と、「ウィジェットを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/6-2.png)
おすすめカードをサイドバーに設置完了!
ウィジェットでも以下の4項目を設定できます。
- タイトル
- 表示スタイル
- 余白の有無
- 表示させるページ
![ウィジェットで設定できるおすすめカードの項目](https://www.kamecompass.com/wp-content/uploads/2024/01/6-3.png)
![ウィジェットで設定できるおすすめカードの項目](https://www.kamecompass.com/wp-content/uploads/2024/01/6-3.png)
Cocoonおすすめカードでよくある質問
Cocoonのおすすめカードでよくある質問
の3つを解説します。
おすすめカードが小さい原因は?
おすすめカードが小さい原因は、アイキャッチ画像のサイズがバラバラになっているからです。
例えば、アイキャッチ画像のサイズが
- 記事A:幅500×高さ200px
- 記事B:幅300×高さ600px
- 記事C:幅1000×高さ800px
の3つの記事を比較すると、記事Cが1番サイズが大きいです。
これら3つの記事をおすすめカードに設定すると、記事Cよりアイキャッチ画像のサイズが小さい記事A・Bは、おすすめカードも小さくなります。
ですので、おすすめカードに設定する記事のアイキャッチ画像のサイズを統一すれば、おすすめカードが小さくなるのも解消されます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
私は推奨サイズである幅1200×高さ675pxに統一してるよ!
アイキャッチ画像のサイズを変更する方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/11/a98b1120712ae2558c294773114e59b3.jpg)
おすすめカードに外部リンクを入れられる?
おすすめカードに外部リンクを入れられます。
おすすめカードに外部リンクを入れる方法は、下記の通りです。
WordPress管理画面で、外観⇒メニューの順にクリックする
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-6.png)
![「外観」、「メニュー」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/2-1-6.png)
\タブの切り替え/
- 「編集するメニューを選択」からおすすめカード用メニューを選ぶ
- 選択をクリックする
![「編集するメニューを選択」からおすすめカード用メニューを選んでいる様子と、「選択」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-1.png)
![「編集するメニューを選択」からおすすめカード用メニューを選んでいる様子と、「選択」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-1.png)
- 「カスタムリンク」をプルダウンする
- 「URL」に外部リンクを入力する
- 「リンク文字列」にタイトルを入力する
- メニューを追加をクリックする
![カスタムリンク内の項目を設定している様子と、「メニューを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-2.png)
![カスタムリンク内の項目を設定している様子と、「メニューを追加」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-2.png)
メニューを保存をクリックする
![「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-3.png)
![「メニューを保存」がある場所](https://www.kamecompass.com/wp-content/uploads/2024/01/7-1-3.png)
おすすめカードに外部リンクを入れられた!
おすすめカードの画像を変更できる?
おすすめカードの画像は変更できます。
おすすめカードの画像を変更したい場合は、その画像リンク先のアイキャッチ画像を変更するとできます。
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
おすすめカードとアイキャッチ画像はリンクしてるよ!
アイキャッチ画像を変更する方法は、下の記事を参考にしてください。
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/10/a98b1120712ae2558c294773114e59b3-1-1.jpg)
当ブログ使用「SWELL」はおすすめカードをデバイス別でレイアウト可能!
当ブログでは、2024年4月からWordPressテーマ「SWELL
SWELLでは、PC・スマホ別でおすすめカードのバナーレイアウトを変更できます。
- 固定幅4列
![PC画面でみたおすすめカードのバナーレイアウト「固定幅4列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-5.png)
![PC画面でみたおすすめカードのバナーレイアウト「固定幅4列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL1-5.png)
- 固定幅3列
![PC画面でみたおすすめカードのバナーレイアウト「固定幅3列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL2-5.png)
![PC画面でみたおすすめカードのバナーレイアウト「固定幅3列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL2-5.png)
- 固定幅2列
![PC画面でみたおすすめカードのバナーレイアウト「固定幅2列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL3-4.png)
![PC画面でみたおすすめカードのバナーレイアウト「固定幅2列」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL3-4.png)
- フレックス(横1列にすべて並べる)
![PC画面でみたおすすめカードのバナーレイアウト「フレックス(横1列にすべて並べる)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL4-4.png)
![PC画面でみたおすすめカードのバナーレイアウト「フレックス(横1列にすべて並べる)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL4-4.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
PCとスマホそれぞれで設定できるのは嬉しいね
また、バナータイトルのデザインを以下の6つから選べます。
![おすすめカードのバナータイトルのデザイン「表示しない」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL8.png)
![おすすめカードのバナータイトルのデザイン「表示しない」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL8.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL9.png)
![](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL9.png)
![おすすめカードのバナータイトルのデザイン「右下に表示」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL10.png)
![おすすめカードのバナータイトルのデザイン「右下に表示」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL10.png)
![おすすめカードのバナータイトルのデザイン「中央(シンプル)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL11.png)
![おすすめカードのバナータイトルのデザイン「中央(シンプル)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL11.png)
![おすすめカードのバナータイトルのデザイン「中央(ボタン風)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL12.png)
![おすすめカードのバナータイトルのデザイン「中央(ボタン風)」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL12.png)
![おすすめカードのバナータイトルのデザイン「下にワイド表示」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL13.png)
![おすすめカードのバナータイトルのデザイン「下にワイド表示」](https://www.kamecompass.com/wp-content/uploads/2024/06/SWELL13.png)
おすすめカードをデバイス別でレイアウト変更したい人は、SWELLもおすすめですよ。
\おすすめカードのレイアウト変更をデバイス別で!/
まとめ:おすすめカードで回遊率UP
今回は、Cocoonでおすすめカードの設定方法を紹介しました。
Cocoonでは、おすすめカードと似た機能で「アピールエリア」というものもあります。
アピールエリアの設定方法についても知りたい人は、下の記事も見てください。
![](https://www.kamecompass.com/wp-content/uploads/2024/01/a98b1120712ae2558c294773114e59b3-2-3.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/01/a98b1120712ae2558c294773114e59b3-2-3.jpg)
また以下の記事では、おすすめカード以外のカスタマイズ方法も紹介しています。
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2024/04/a98b1120712ae2558c294773114e59b3-1.jpg)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
![](https://www.kamecompass.com/wp-content/uploads/2023/09/863c64eb2b628f43ab81cae8b09ccac7-150x150.png)
ためになったという人は“コメント”してくれると嬉しいです!
コメント