他の人のブログを見ると、トップページにカード型のメニューが表示されていて、おしゃれだと思ったことはありませんか?
![](https://i0.wp.com/nekolicense.com/wp-content/themes/cocoon-master/images/woman.png?w=1120&ssl=1)
私も表示させたいけど、どうすればいいの?
今回は、おすすめカードをブログのトップに表示する方法を紹介します。
表示するためにすることは、以下の3つです。
- サムネイル画像の設定
- カテゴリーメニューの作成
- 作成したメニューを表示する設定
順番に説明します。
サムネイル画像の設定
まず最初に、おすすめカードに表示する、サムネイル画像の設定を行います。
おすすめカードに表示する画像を用意しましょう。
ワードプレスのダッシュボードから、「Cocoon設定」→「Cocoon設定」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643184936409.jpg?resize=633%2C717&ssl=1)
Cocoon設定のメニューから、「画像」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643179562903.jpg?resize=721%2C254&ssl=1)
「本文画像設定」画面の一番下側にある、「NO IMAGE設定」で「選択」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643179959021.png?resize=717%2C250&ssl=1)
ファイルを選択する画面になるので、先ほど準備した画像を選びます。一番右下にある、「画像の選択」をクリックします。
表示された画像に間違いがなければ、「変更をまとめて保存」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643180362835.jpg?resize=594%2C500&ssl=1)
これでおすすめカードの、サムネイル画像が設定できました。
投稿記事や固定記事にサムネイル画像を設定していない場合、ここで設定した画像が自動で表示されます。
おすすめカードの表示方法
おすすめカードは、このようにカテゴリーなどを、サムネイル画像付きで表示させることができます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220126_160350.jpg?resize=709%2C369&ssl=1)
それでは順番に表示方法を説明します。
カテゴリーメニューを作成する
おすすめカードに表示する、メニューを作成します。
ワードプレスのダッシュボードから「外観」→「メニュー」を選びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643181302239-1.jpg?resize=603%2C681&ssl=1)
メニュー画面にある、「新しいメニューを作成しましょう」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643181652786.jpg?resize=631%2C195&ssl=1)
「メニュー名」に、好きな名前を入れます。
今回は分かりやすく、メニュー名を「card」と入力して→「メニューを作成」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643183071699.jpg?resize=671%2C577&ssl=1)
次はメニューに表示するカテゴリーを設定します。
「編集するメニューを選択」で、先ほど作った「card」を選び、「選択」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643184606382.png?resize=677%2C158&ssl=1)
「カテゴリー」をクリックします。表示したいカテゴリーにチェックを入れます。
「メニューに追加」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643183805372.jpg?resize=668%2C492&ssl=1)
これでcardのメニューに、カテゴリーが追加されました。
間違いがなければ、「メニューを保存」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643184218651.jpg?resize=526%2C792&ssl=1)
作成したメニューをブログに表示する設定
次は作成したメニューを、ブログに表示する設定をします。
ダッシュボード画面から、「Cocoon設定」→「Cocoon設定」をクリックします。「おすすめカード」を選びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643185234559.jpg?resize=744%2C194&ssl=1)
「メニュー選択」を、先ほど作成したメニューの「card」を選びます。
「おすすめカードの表示」は、カードを表示するページの設定ができます。
「表示スタイル」は、表示方法の設定です。好みの表示方法を選びましょう。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643185557121.jpg?resize=585%2C776&ssl=1)
「変更をまとめて保存」をクリックして保存すれば、おすすめカードが表示されるようになります。
まとめ
今回は、ブログのトップページにおすすめカードを表示する方法を紹介しました。
おすすめカードをトップに表示すると、ブログがおしゃれになるので、ぜひ設定してみてください。