![](https://starting-marketing.com/wp-content/uploads/2021/11/maxwell-nelson-VJeAZr-Bu9E-unsplash.jpg)
この記事ではCocoon設定の【おすすめカード】のタブについて解説していきます。
ここではオススメの記事をヘッダーの下に表示させることができます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/16d92164f542affa3be4e96b0231e2f7.jpg)
それでは順に解説していきます。
おすすめカード設定
プレビュー
![](https://starting-marketing.com/wp-content/uploads/2021/11/c500a287221ddcb9e16a0397e57d929d-1024x235.jpg)
デフォルトではおすすめカードが表示されないようになっているので、プレビュー画面は表示されていません。
プレビューの下の【おすすめカードの表示】で「表示しない」以外を選択すると表示されるようになります。
編集していく際は、適宜プレビューを確認しながら進めましょう。
おすすめカードの表示
![](https://starting-marketing.com/wp-content/uploads/2021/11/7111075876fcb60552f555e1a09b581b.jpg)
【おすすめカードの表示】では、おすすめカードを表示するかの設定に加え、表示したいページを選択できます。
表示できるページは、
- 表示しない
- 全ページで表示
- フロントページのみで表示(TOPページのみで表示)
- 投稿・固定ページ以外で表示(TOPやカテゴリーページで表示)
- 投稿・固定ページのみで表示(TOPやカテゴリーページで非表示)
- 投稿ページのみで表示
- 固定ページのみで表示
この中から選択します。
![](https://starting-marketing.com/wp-content/uploads/2021/11/283f276d0c7179b646fe3bc0b39189d7.jpg)
メニュー選択
![](https://starting-marketing.com/wp-content/uploads/2021/11/c0e69d381553d6e3c5283e530f613f21.jpg)
その下の【メニュー選択】では、ご自身で作成したメニューを選択することができます。
「未選択」の場合はおすすめカードが表示されません。
メニューの作成は、サイドメニューの【外観】から「メニュー」へ入って作成します。
メニューの作成方法については別の記事で解説していますので、そちらをご覧ください。
表示スタイル
![](https://starting-marketing.com/wp-content/uploads/2021/11/f43f807f12d9d31baf08d15faa144d0a.jpg)
「表示スタイル」では画像をどのように表示するかを設定することができます。
画像マークにカーソルを合わせるとサンプルを確認することができます。
![](https://starting-marketing.com/wp-content/uploads/2021/11/a533b6a90728c2b38f51ad400933a748-1.jpg)
スタイルの種類は、
- 画像のみを表示するスタイル
- 画像の中央に白文字のタイトルを表示させるスタイル
- 画像の中央にラベルでタイトルを表示させるスタイル
- 画像の下側を黒背景にしてタイトルを表示するスタイル
この4種類から選ぶことが可能です。
カード余白
![](https://starting-marketing.com/wp-content/uploads/2021/11/88e0fa00a586e2a7064cbd05078342cb.jpg)
「カード余白」では、表示したカードの周囲に、余白を作るかどうかの設定になります。
画像マークにカーソルを合わせるとイメージ画像を確認することが可能です。
![](https://starting-marketing.com/wp-content/uploads/2021/11/5d692b774d8593449ae5ed954ceb573b.jpg)
・余白なし
![](https://starting-marketing.com/wp-content/uploads/2021/11/42ab6fb169956ac06acfca6745fdaf8e-1024x183.jpg)
・余白あり
![](https://starting-marketing.com/wp-content/uploads/2021/11/f461155b3cce53066fac341fbe86a585-1024x176.jpg)
カードエリア左右余白
![](https://starting-marketing.com/wp-content/uploads/2021/11/cc018fbb4c1d365455abcbec6c586a38.jpg)
この項目はパソコン表示のみの設定になります。
デフォルトでは、画面幅いっぱいにカードエリアが設置されていますが、「おすすめカードエリアの左右に余白を設ける」にチェックを入れると、左右に余白ができて表示される幅が狭くなります。
画像マークにカーソルを合わせると説明画像がありますので、実際に見てみると分かりやすいかと思います。
![](https://starting-marketing.com/wp-content/uploads/2021/11/a4cf923a0e6e21f318363dc8ab40f0e4.jpg)
・余白なし
![](https://starting-marketing.com/wp-content/uploads/2021/11/1b8536c2615037bd977a17b4d37d2397-1024x208.jpg)
・余白あり
![](https://starting-marketing.com/wp-content/uploads/2021/11/579ea447265486bd374666d87b979326-1024x195.jpg)