こんにちは、こんばんは。たたです。
本記事では、Wordpressテーマの1つである「Cocoon」を使用した、おすすめカードのカスタマイズ方法について解説します。
おすすめカードってなに？って方にも分るように解説したいと思いますので、ぜひ参考にしてみてください！
本ブログを例に、画像サイズや、使用しているCSSについても紹介していきます！
おすすめカードとは？
おすすめカードとは、画像付きのおすすめメニューのことで、このように目立つ位置におすすめのメニューを表示することができます。
本ブログでもトップページの、目立つところに配置しております。
この後ご紹介する、画像サイズやCSSカスタマイズの参考にもなると思います。気になった方は見てみてください！
おすすめカードの設定方法
それでは、さっそくおすすめカードの設定に移りましょう！
おすすめカードに使う画像を用意する（画像サイズもこちら）
まずは、おすすめカードに設定したい画像を作成しましょう！
ここは、各々お好みの内容になると思いますので、既にご用意がある方は次の手順に行ってOKです！
本ブログでは「Canva」を使用して作成しました。
また、本ブログで使用しているおすすめカードの画像のサイズは「700px × 433px」（1.618：1）で作成しております。
画像の割合については、こちらのサイト様を参考にさせていただきました。
おすすめカードの設定手順
画像が用意できたら、いよいよおすすめカードの設定に移ります。
やることリストはこちらになります。
- おすすめカード用のメニューを作成
- Cocoonのおすすめカード設定
- 画像の設定
おすすめカード用のメニューを作成
まずは、おすすめカード用のメニューを作成します。
「外観」⇒「メニュー」から新規メニューの作成を行いましょう。
- メニュー名：後で分かりやすい名前を設定しましょう。ここでは「おすすめカード」とします。
- メニュー項目：表示したいメニューを追加しましょう。多くの場合は「カテゴリ」や「固定ページ」を設定することになると思います。
作成できたら、メニューを保存して終了です。
Cocoonのおすすめカード設定
続いて、Cocoonのおすすめカードの設定です。
「Cocoon設定」を開いて、「おすすめカード」のタブから設定を行います。
それぞれ以下の内容を設定します。基本的には各々のお好みに合わせることになります。
今回は、本サイトで使用している設定にそって解説します。
- おすすめカードの表示：「フロントページでのみ表示」を選択
- 最初のページだけのみ表示されて、記事ページなどでは表示されなくなります
- メニュー選択：「おすすめカード用のメニューを作成」で作成したメニューを選択。
- 表示スタイル：「画像のみ」を選択
- 用意した画像に直接文字を入れている場合、「画像のみ」でよいと思います
- 用意した画像に文字を入れていない場合、「画像のみ」以外を選択することで、メニュー名が表示されるようになります
- カード余白：おすすめカード間に余白が欲しい場合はチェックを入れる
- カードエリア左右余白：おすすめカードエリアの左右に余白が欲しい場合はチェックを入れる
設定が完了したら、「変更をまとめて保存」で保存しましょう。
画像の設定
最後に、おすすめカードで使用する画像の設定を行います。
ここでは、メニューに「カテゴリー」を選択したことを例にして、解説します。
まずは「投稿」⇒「カテゴリー」からカテゴリーの編集を行います。
カテゴリー編集の中の「アイキャッチ」の設定に、あらかじめ用意した画像を設定します。
これで、おすすめカードの設定はすべて完了となります！
CSSでおすすめカードのカスタマイをカスタマイズ（コピペOK！）
こちらは、応用編でCSSのカスタマイズになります。
本ブログでは、マウスがメニューの上に来た時に、「フワッと」「少しアップ」にするカスタマイズを行っています。
実際に使用しているコードはこちらになります。
#recommended .navi-entry-card-thumb {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#recommended .navi-entry-card-thumb:hover {
transform:scale(1.1);
transition:0.3s;
}CSSの設定については、「外観」⇒「テーマ」⇒「追加CSS」から設定を行います。
必ず「Cocoon Child」のほうを更新するようにしましょう！
最後に
以上で、おすすめカードの設定については完了となります。
目立つところにメニューができて、より使いやすいサイトになりましたね！
どんどん、カスタマイズして自分のお気に入りのサイトに進化させていきましょう！
