こんにちは、さくらです。
人のブログを見ていて、下記のような「ヘッダーメニューの下に画像付きで入っているメニュー」を見たことはありませんか？
これ、Cocoon設定で簡単にできるんです！
本日はこの「おすすめカード」を使ってカテゴリーのメニューを表示する方法を解説していきます。
おすすめカードに表示したいメニューを作成
まずは、おすすめカードに表示をしたいものを「外観」⇒「メニュー」で作成します。
- 「新しいメニューを作成しましょう」をクリック
- 「メニュー名」に「おすすめカード」と記入
- 「カテゴリー」を開いて、表示したいカテゴリーをチェックし、「メニューに追加」をクリック
- 「メニューを保存」をクリック
これでメニューの作成は終了です。
おすすめカード用のアイキャッチ画像の作り方
いつも記事のアイキャッチは下記のような形にしている方が多いと思います。
おすすめカードも記事のアイキャッチ画像と同じ形で良いという方はいつもと同じように作ればＯＫです。
もし、私のサイトのおすすめカードのように「桜」など長方形以外の形にしたい場合は背景透過のアイキャッチ画像を作ることをお勧めします。
背景透過をしていないと下記のようになってしまいます。
私はいつもCanvaでアイキャッチを作成していますが、有料版のCanva Pro 
にはワンクリックで背景透過をできる機能があります。
いつも通りアイキャッチ画像を作成したら、ダウンロードをする際に「透過背景」にチェックを入れてください。
Canvaに課金をすることに抵抗のある方もいると思いますが、安心してください。
30日間は無料で利用することが可能です。
おすすめカード用のアイキャッチ画像を作るのに30日もかからないですよね(笑)
利用できる素材も無料版と比べて7500万点も増えます。
おすすめカードはサイトを開いた時に一番最初に目に入るところですので、無料でCanva Pro を活用して作成することをお勧めします。
ついでにサイトのロゴやホームイメージ画像なども無料期間中に作成してしまいましょう！
私はサイトのロゴだけ作成したら解約するつもりが、Canva Proの便利さに惚れ込んでしまって、無料期間終了後もそのまま利用しています(^^)/
カテゴリーのアイキャッチを設定
次に、作成したアイキャッチ画像を設定します。
「投稿」⇒「カテゴリー」⇒アイキャッチを設定したいカテゴリーをクリックしてください。
編集画面を開いたら下にスクロールをするとアイキャッチが設定できるところがあります。
ここで表示したい画像を選択したら、設定完了です。
これを全てのカテゴリーに設定しましょう。
Cocoon設定でおすすめカードの設定
「Cocoon設定」⇒「おすすめカード」を開いてください。
おすすめカードの表示の欄でどこに表示をしたいかを選びます。
私は「フロントページのみで表示」を選んでるよ！
下にスクロールをしてください。
「メニューの選択」で先ほど作成した「おすすめカード」のメニューを選んでください。
「表示スタイル」は赤枠のところにカーソルを合わせるとプレビュー画面が見られます。
アイキャッチ画像にタイトルを入れている方は「画像のみ」の選択でOKです。
「カード余白」と「カードエリア左右余白」はお好みで決めてください。
私は左右余白にだけチェックを入れています！
最後に「変更をまとめて保存」をクリックしたら、完成です！
トップページを確認したら下記のようになっているかと思います。
まとめ：おすすめカードのカスタマイズ方法
このようにCocoonでは難しいカスタマイズなしに画像付きのカテゴリーメニューを入れることができます。
ヘッダーメニューとは違い、開いた瞬間にパッと目に入ってくるので、読者が見たいカテゴリーをすぐに見つけることができますよね！
下記の記事では他にもCocoonで出来る簡単なカスタマイズをご紹介しています。
記事を読んでいて分からないところがあれば、お気軽にコメントを頂ければと思います。
最後まで読んで頂き、ありがとうございました！！
コメント