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」を選びます。

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

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

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

まとめ

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

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

この記事を書いた人
ナナ

こんにちは、「ねこのライセンス」のサイトを運営しているナナです。

ねこ・株式投資・節約&貯金・資格の勉強・音楽鑑賞・美術鑑賞・断捨離が好きです。

何の取り柄もない専業主婦の私が、「自分に自信をつけたい!」という思いで資格の勉強やブログをしています。

私の学んだ知識が、ブログを通じて私と同じ40代の専業主婦の人に役立つとうれしいです。

そして、私の夢はいつかブログで稼げるようになること。

私は人見知りで人付き合いが苦手なので、外で働くのは正直怖いです。なので、自宅に居ながら好きなことで稼げたらいいなと思っています。

詳しい私の自己紹介記事は、こちらのページにあります。

専業主婦限定の初心者向け断捨離・お金の無料相談は、こちらのページからお気軽にどうぞ。

お仕事のご依頼・お問い合わせは、こちらのページからお願いします。

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