トップページにジャンルのアイコンが並んでるのってカッコいいよね。
おすすめカードのことだね？
ウチのサイトはそんなにいろいろ無いから要らないけど
作ってみる？
ということで、おすすめカードの設定についてです。
表示するカテゴリーを設定する
まず表示させるもののメニューを作成します。
「おすすめカード」用のメニューを作成します。
- 新しく作成する場合は「新しくメニューを作りましょう」から
- 既存のメニューを使う場合は選択窓から
表示させるメニューを用意します。
メニュー名を決めて
「メニュー項目の追加」から「カテゴリー」を選択します。
そこから「おすすめ表示」したいカテゴリーを選択します。
メニューに追加」をします。
アイキャッチの設定をする
表示するカテゴリーを決めたところで表示される「アイキャッチ」を設定します。
もともとカテゴリーを設定した時にアイキャッチまでできていればこの項は不要です。
設定は、「ダッシュボード」から「投稿」＞「カテゴリー」で設定します。
表示させる「カテゴリー」を選択します。
新しく作る場合は「新規カテゴリー追加」に名前を入力します。
すでにあるカテゴリーを使う場合は
「名前」にカーソルを合わせて表示される「編集」をクリックします。
新規カテゴリーを追加した場合でも、追加後にあらためて「編集」に入りなおします。
「カテゴリーを編集」に入ったら下にスクロールして
アイキャッチの所の「選択」をクリックして、画像の選択を表示します。
使用したい画面を選択して「画面を選択」をクリックします。
詳しい操作方法はこちらを参考にしてください。
ちなみにここで選択した画像サイズは300ｘ200です。
画像を選択したら「更新」をクリックして終了です。
表示の設定をする
カテゴリーと画像の設定で準備ができましたのでいよいよ表示の設定です。
「Cocoon設定」＞「おすすめカード」で設定します。
①おすすめカードの表示 設定
おすすめカードを表示するページを設定します。
どこにおすすめカードを表示させるか？
サイトやブログの構成で決めればいいと思います。
②メニュー選択
表示するカテゴリーメニューを選択します。
この記事では「おすすめカード」を作成しましたので、それを使います。
③表示スタイル
おすすめカードの画像とタイトルの表示を選択します。
項目選択の「アイコン」にマウスカーソルを合わせるとサンプルが表示されます。
画像と文字位置の関係を見て選択しましょう。
④カード余白
カードの余白を設定します。
余白が無いとカードは隙間なく着いています。
これもお好みですね。
当サイトではカードの数が少ないので密集感が無いよう余白を開けています。
⑤カードエリア左右余白
カードエリアの左右に余白を設定します。
デフォルトでは画面いっぱいになっています。
ただしカードが少ないウチは中央寄せになっていますので影響はありません。
まとめ
おすすめカードの設定手順として、
- カテゴリーを選ぶ
- アイキャッチを設定する
- 表示の設定をする
- カードの表示設定
- メニュー選択
- 表示スタイル
- カードの余白
の説明をしました。
カテゴリーの選択とジャンプは「グローバルナビメニュー」でも可能ですが、やはりカードで案内されているのが見やすくて良いですね。
最後までお付き合いくださりありがとうございました。
よろしければこちらもご覧いただき、サイトの変身にお役立ていただければと思います。
