Font Awesome

当サイトは、アフィリエイト広告を含みます。

WordPress

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

WordPress
この記事は約3分で読めます。

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

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

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

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

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

順番に説明します。

サムネイル画像の設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

この記事を書いた人
ナナ

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

株式投資・資格の勉強・音楽観賞・断捨離・ネコ・ヒゲダンが好きな40代専業主婦です。

【私の資格・投資経歴】

【20代】投資家デビュー
    簿記3級取得

【30代】簿記2級取得

【40代】登録販売者取得
    FP3級・FP2級取得
    宅建取得
    簿記1級取得

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

私の学んだ知識が、ブログを通じてみなさんの役に立つとうれしいです。

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

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

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

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

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

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