Font Awesome
WordPress

ワードプレスのトップページにおすすめカード(カテゴリー)をカード型メニューで表示する方法【Cocoon】

WordPress
この記事は約3分で読めます。
記事を書いた人
プロフィールナナ
ねこ好きの40代専業主婦
【保有資格】FP2級、簿記2級、宅建、登録販売者
簿記1級勉強中!

他の人のブログを見ると、トップページにカード型のメニューが表示されていて、おしゃれだと思ったことはありませんか?

私も表示させたいけど、どうすればいいの?

今回は、おすすめカードをブログのトップに表示する方法を紹介します。

表示するためにすることは、以下の3つです。

  1. サムネイル画像の設定
  2. カテゴリーメニューの作成
  3. 作成したメニューを表示する設定

順番に説明します。

サムネイル画像の設定

まず最初に、おすすめカードに表示する、サムネイル画像の設定を行います。

おすすめカードに表示する画像を用意しましょう。

ワードプレスのダッシュボードから、「Cocoon設定」→「Cocoon設定」をクリックします。

Cocoon設定のメニューから、「画像」をクリックします。

「本文画像設定」画面の一番下側にある、「NO IMAGE設定」で「選択」をクリックします。

ファイルを選択する画面になるので、先ほど準備した画像を選びます。一番右下にある、「画像の選択」をクリックします。

表示された画像に間違いがなければ、「変更をまとめて保存」をクリックします。

これでおすすめカードの、サムネイル画像が設定できました。

投稿記事や固定記事にサムネイル画像を設定していない場合、ここで設定した画像が自動で表示されます。

おすすめカードの表示方法

おすすめカードは、このようにカテゴリーなどを、サムネイル画像付きで表示させることができます。

それでは順番に表示方法を説明します。

カテゴリーメニューを作成する

おすすめカードに表示する、メニューを作成します。

ワードプレスのダッシュボードから「外観」→「メニュー」を選びます。

メニュー画面にある、「新しいメニューを作成しましょう」をクリックします。

「メニュー名」に、好きな名前を入れます。

今回は分かりやすく、メニュー名を「card」と入力して→「メニューを作成」をクリックします。

次はメニューに表示するカテゴリーを設定します。

「編集するメニューを選択」で、先ほど作った「card」を選び、「選択」をクリックします。

「カテゴリー」をクリックします。表示したいカテゴリーにチェックを入れます。

「メニューに追加」をクリックします。

これでcardのメニューに、カテゴリーが追加されました。

間違いがなければ、「メニューを保存」をクリックします。

作成したメニューをブログに表示する設定

次は作成したメニューを、ブログに表示する設定をします。

ダッシュボード画面から、「Cocoon設定」→「Cocoon設定」をクリックします。「おすすめカード」を選びます。

「メニュー選択」を、先ほど作成したメニューの「card」を選びます。

「おすすめカードの表示」は、カードを表示するページの設定ができます。

「表示スタイル」は、表示方法の設定です。好みの表示方法を選びましょう。

「変更をまとめて保存」をクリックして保存すれば、おすすめカードが表示されるようになります。

まとめ

今回は、ブログのトップページにおすすめカードを表示する方法を紹介しました。

おすすめカードをトップに表示すると、ブログがおしゃれになるので、ぜひ設定してみてください。

この記事を書いた人
ナナ

このサイトを運営しているナナです。

ねこ・株式投資・節約・資格取得・音楽鑑賞・断捨離が好きです。
何でもやりたいことはやってみる!
というチャレンジ精神でブログを始めました。

1度きりの人生楽しまなきゃ損!がモットーです。

お問い合わせやご意見はこちらからお願いします。

ナナをフォローする
ナナをフォローする
ねこのライセンス
error:Content is protected !!
タイトルとURLをコピーしました