他の人のブログを見ると、トップページにカード型のメニューが表示されていて、おしゃれだと思ったことはありませんか？
私も表示させたいけど、どうすればいいの？
今回は、おすすめカードをブログのトップに表示する方法を紹介します。
表示するためにすることは、以下の3つです。
- サムネイル画像の設定
- カテゴリーメニューの作成
- 作成したメニューを表示する設定
順番に説明します。
サムネイル画像の設定
まず最初に、おすすめカードに表示する、サムネイル画像の設定を行います。
おすすめカードに表示する画像を用意しましょう。
ワードプレスのダッシュボードから、「Cocoon設定」→「Cocoon設定」をクリックします。
Cocoon設定のメニューから、「画像」をクリックします。
「本文画像設定」画面の一番下側にある、「NO IMAGE設定」で「選択」をクリックします。
ファイルを選択する画面になるので、先ほど準備した画像を選びます。一番右下にある、「画像の選択」をクリックします。
表示された画像に間違いがなければ、「変更をまとめて保存」をクリックします。
これでおすすめカードの、サムネイル画像が設定できました。
投稿記事や固定記事にサムネイル画像を設定していない場合、ここで設定した画像が自動で表示されます。
おすすめカードの表示方法
おすすめカードは、このようにカテゴリーなどを、サムネイル画像付きで表示させることができます。
それでは順番に表示方法を説明します。
カテゴリーメニューを作成する
おすすめカードに表示する、メニューを作成します。
ワードプレスのダッシュボードから「外観」→「メニュー」を選びます。
メニュー画面にある、「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に、好きな名前を入れます。
今回は分かりやすく、メニュー名を「card」と入力して→「メニューを作成」をクリックします。
次はメニューに表示するカテゴリーを設定します。
「編集するメニューを選択」で、先ほど作った「card」を選び、「選択」をクリックします。
「カテゴリー」をクリックします。表示したいカテゴリーにチェックを入れます。
「メニューに追加」をクリックします。
これでcardのメニューに、カテゴリーが追加されました。
間違いがなければ、「メニューを保存」をクリックします。
作成したメニューをブログに表示する設定
次は作成したメニューを、ブログに表示する設定をします。
ダッシュボード画面から、「Cocoon設定」→「Cocoon設定」をクリックします。「おすすめカード」を選びます。
「メニュー選択」を、先ほど作成したメニューの「card」を選びます。
「おすすめカードの表示」は、カードを表示するページの設定ができます。
「表示スタイル」は、表示方法の設定です。好みの表示方法を選びましょう。
「変更をまとめて保存」をクリックして保存すれば、おすすめカードが表示されるようになります。
まとめ
今回は、ブログのトップページにおすすめカードを表示する方法を紹介しました。
おすすめカードをトップに表示すると、ブログがおしゃれになるので、ぜひ設定してみてください。
