はじめに
今回はWordPress「Cocoon」⇒「おすすめカード」の項目について説明します。
![](https://mind-create.com/wp-content/uploads/2022/04/o2.jpg)
おすすめカードとは
![](https://mind-create.com/wp-content/uploads/2022/04/o1-1024x162.jpg)
Cocoonの設定にある「おすすめカード」は、メニューで設定した内容をカード形式でヘッダー部分に表示し、サイトの見栄えをよくする機能です。
ナビゲーションメニューのおしゃれ版ね。
メニュー設定
固定ページでメニューに表示するページを作成します。
下の画面の、「 外観 」 → 「 メニュー 」 →
①「 新しいメニューの作成 」 →
②「 おすすめカード」の入力 →
③「 メニューの作成 」の設定
でメニュー設定します。詳細は下記参照。
設定方法
![](https://mind-create.com/wp-content/uploads/2022/03/240_F_337635549_R5fsFAAcqxC2A6wXKnUZa0bQPZ1jSUxj.jpg)
「Cocoon」⇒「おすすめカード」の設定説明です。
![](https://mind-create.com/wp-content/uploads/2022/04/o3.jpg)
おすすめカードの表示
![](https://mind-create.com/wp-content/uploads/2022/04/o4.jpg)
おすすめカードをどのページで表示するのかを設定します。
メニュー選択
![](https://mind-create.com/wp-content/uploads/2022/04/o5.jpg)
どのメニュー(ヘッダーカッターか)をおすすめカードメニューにするか設定します。
表示スタイル
表示をどのようなスタイルにするか設定します。
画像のみ
![](https://mind-create.com/wp-content/uploads/2022/04/o6.jpg)
画像中央に白文字タイトル
![](https://mind-create.com/wp-content/uploads/2022/04/o8.jpg)
画像中央にラベルでタイトル
![](https://mind-create.com/wp-content/uploads/2022/04/o9.jpg)
画像下段を黒背景にしタイトルを重ねる
![](https://mind-create.com/wp-content/uploads/2022/04/o10.jpg)
カード余白
カード余白にチェックを入れると、画像部に隙間ができます。
![](https://mind-create.com/wp-content/uploads/2022/04/o12-1024x91.jpg)
カードエリア左右余白
カードエリア左右余白にチェックをいれると、左右に揺白ができます。
余白なし
![](https://mind-create.com/wp-content/uploads/2022/04/o11-1024x70.jpg)
余白あり
![](https://mind-create.com/wp-content/uploads/2022/04/o13-1024x58.jpg)