【Cocoon】おすすめカードの設定手順を初心者向けに解説

この記事では、WordPressテーマCocoonの「おすすめカード」の設定方法を初心者向けに解説します。

おすすめカードとは、特に読んでほしい記事やカテゴリーなどをヘッダー下の目立つ部分に配置するCocoonの機能のことです。

これにより、訪問したユーザーが読みたい記事やジャンルにアクセスしやすくなり、離脱率低減につながります。

この記事では、メニューの作成からアイキャッチ画像の設定、さらにスマホ表示でレイアウトを崩さないための注意点まで、一通りのステップを画像付きで詳しく解説します。

自分のサイトに最適な「おすすめカード」を一緒に作っていきましょう。

なお、私は以下のCocoon公式の解説記事を基に設定を行いました。

おすすめカード用のメニューの作り方

おすすめカードはメニューを元に表示されるため、「表示させたい記事やカテゴリーをまとめたメニュー」を作成する必要があります。

まずはWordPress管理画面左側メニューの「外観」→「メニュー」でメニューの設定画面に移動しましょう。

メニューを作成するのが初めての方はそのままメニュー名などを入力していけばいいですが、作成済みのメニューがある方の場合は設定画面上部に「新しいメニューを作成しましょう。」というリンクがあるはずなので、それをクリックします。

新しいメニューの設定画面が表示されるので、自分にとって分かりやすいメニュー名を入力して「メニューを作成」ボタンを押します。

ヘッダーでもフッターでもないので、メニュー設定は何もチェックしないままでいいです。

メニューの作成ができたら、左側の「メニュー項目を追加」からおすすめカードに設定したいページを選択していきます。

私の場合は、特に目立たせたいカテゴリーを4つ選択して「メニューに追加」しました。

項目を表示させたい順に並び替えて、問題なければ「メニューを保存」ボタンを押します。

これで、おすすめカードを表示させるための準備は整いました。

ただ、カテゴリーなど、そのページに説明文がついている場合、以下の画像のように説明文も一緒に表示されてしまいます。

本来望ましいのは、以下の画像のようにカテゴリー名だけ表示される状態です。

この説明文については、先ほどから操作しているメニュー設定画面で削除できるので、それについても解説していきます。

カテゴリー説明文を削除する方法

WordPress管理画面左側メニューの「外観」→「メニュー」を開くと、右上の方に「表示オプション」と書かれたタブがあるかと思いますので、クリックしてください。

すると、表示オプションの設定画面が表示されますので、「説明」のチェックボックスにチェックを入れます。

その後、説明文を削除したいメニュー項目の詳細設定表示ボタンを押します。

「説明」の項目がありますので、その中に入力されている文章を削除してください。

すべての説明文の削除が完了したら、忘れずに「メニューを保存」ボタンを押します。これで、おすすめカードを表示した際にカテゴリー説明文が非表示になります。

カテゴリーのアイキャッチ画像設定方法

カテゴリーをおすすめカードに設定する場合、アイキャッチ画像がないと「No Image」になってしまって見栄えが悪いので、アイキャッチ画像の設定方法も併せて解説していきます。

まずはWordPress管理画面左側メニューの「投稿」→「カテゴリー」から、カテゴリーの設定画面に移動します。

設定画面右側にある作成済みカテゴリー一覧から、編集したいカテゴリーの「編集」をクリックします。

その後に表示された画面の中に「アイキャッチ」という項目があるので、「選択」をクリックしてアイキャッチ画像を選びます。
※私はいつもCanvaでアイキャッチ画像を作っています。

メディアライブラリが表示されますので、既にアップロードされている画像を選ぶか、新しくアップロードしてください。

最後に忘れずに画面下部の「更新」ボタンを押して、アイキャッチ画像の設定は完了です。

「Cocoon設定」の「おすすめカード」基本的な設定手順

表示させるための下準備が終わったので、肝心のサイトに表示させる設定について解説していきます。

WordPress管理画面左側メニューの「Cocoon設定」をクリックして設定画面を開いてください。

表示された画面にはずらっとタブが並んでいますので、その中の「おすすめカード」タブをクリックします。

そうして表示されたおすすめカードの設定画面で、以下のように設定していきましょう。

おすすめカードの表示

全部で以下の選択肢があります。

• 表示しない
• 全ページで表示する
• フロントページのみで表示する
• 投稿・固定ページ以外で表示する
• 投稿・固定ページのみで表示する
• 投稿ページのみで表示する
• 固定ページのみで表示する

基本的には「全ページで表示する」か「フロントページのみで表示する」のどちらかを選ぶ形になると思いますが、「全ページで表示する」としたらトップページだけじゃなく記事ページでもおすすめカードが表示されるので、ちょっと主張激しすぎると思う人は「フロントページのみで表示する」でいいと思います。

メニュー選択

ここでは、ご自身が作ったメニューが表示されますので、おすすめカード用に作ったメニュー名を選択してください。

表示スタイル

それぞれ選択した際の見た目は以下の通りです。

• 「画像のみ」を選択した場合

• 「画像中央に白文字タイトル」を選択した場合

• 「画像中央にラベルでタイトル」を選択した場合

• 「画像下段を黒背景にしタイトルを重ねる」を選択した場合

カード余白

この項目にチェックを入れた場合の見た目は以下です。

カードエリア左右余白

この項目にチェックを入れた場合の見た目は以下です。

カード余白にチェックを入れただけの状態と比べると、メインエリア・サイドバー全体の横幅とおすすめカードの横幅がぴったり合っていることが分かります。

ちなみに、「カード余白」と「カードエリア左右余白」のどちらにもチェックを入れた場合の見た目は以下の通りです。

自分の好みに合った設定をして、最後は忘れずに「変更をまとめて保存」ボタンを押しましょう！

補足：おすすめカードを奇数個で設定した際の見た目

公式サイトでは、おすすめカードは偶数個で設定することを推奨しています。

というのも、奇数個の場合、パソコン表示の方は普通に配置されるのですが、モバイル表示だとレイアウトが不自然になってしまうからです。

以下がパソコン表示

以下がモバイル表示です。

モバイル表示だと、「イラスト」のおすすめカードが一つだけ下段中央に回って、少し見栄えが悪く感じてしまいます。

こういった点から、公式サイトでも偶数個での設定を推奨しているのでしょう。

CSSをカスタマイズしたら奇数個でもいい感じに表示できるようになるでしょうが、初心者のうちは難しいかと思いますので、素直に偶数個で運用するのが安全です。

まとめ

以上、おすすめカードの設定手順でした。

特におすすめしたい記事やカテゴリーを目立つところに配置できるので、訪問者が興味のある記事を見つけやすくなり、アクセシビリティの向上が期待できます。

この記事がブログ初心者さんの助けになれば幸いです。

次はやっとトップページのメインエリア（記事がずらっと並んでいる部分）を、もっと見やすいようにカスタマイズしていきます。