サイトに訪れた人が、カテゴリーを一目で理解できるようなデザインにしたいな
画像をメニューボタンにできないかな
『ブログは、まずは見た目よりも中身だ』と言いますが、やっぱり見た目も良くしたいですよね。
どんなカテゴリーがあるかなどが一目で分かれば、ブログの回遊率アップも期待できます。
前回は、回遊率向上が期待できる機能の一つ「ボックスメニュー」を紹介しました。
今回は、そのボックスメニューと似た機能を持つ、おすすめカードについて説明します。
おすすめカードとは、Cocoonテーマの機能の一つで、サイト上部やサイドバーなどに表示できる以下のようなメニューのことです。
ボックスメニューは、アイコンを使ってメニューボタンを表示しますが、おすすめカードでは、画像自体をボタン化できます。
この記事を読めば、オリジナルのメニュー欄を簡単に作ることができますよ。
おすすめカードの使い方
早速、おすすめカードの設定方法と設置方法を説明します。
今回は、おすすめカードの機能を利用してカテゴリーの画像メニューボタンを作成していきます。
カテゴリー画像の設定
まずは、各カテゴリーの画像を設定していきます。
- 1投稿のカテゴリーを開き、画像を設定したいカテゴリーを選択する
- 2カテゴリーにアイキャッチを設定する
カテゴリーを選択すると編集画面に移るので、下のほうにあるアイキャッチ欄の選択を押し、設定したい画像をアップロードしましょう。
- 3一番左下にある更新ボタンを押して保存
更新を押すと、上部に「更新されました」と表示されるはずです。
※もし保存できない場合は、サーバーのWAF設定を切って、もう一度試してみてください。（WAFとは、ConohaWingなどのサーバーのセキュリティのことです）
メニューの設定
画像の設定が出来たら、次は表示したいメニューを設定しましょう。
- 1外観のメニューを開き、新しいメニューを作成する
今回は、おすすめカードと名前をつけてメニューを作成しました。
- 2メニューに入れるページを選択する
「メニュー項目を追加」の欄から、追加したい記事を選び、「メニューに追加」を選択します。
追加するとメニュー構造に追加されるので、確認しましょう。
- 3各ページのタイトルを設定し、メニューを保存する
画像の上にカテゴリー名などを表示したい場合は、ナビゲーションラベルにタイトルを付けてメニューを保存しましょう。
おすすめカードの設置
メニューの設定が出来たら、サイトにおすすめカードを設置しましょう。
設置方法は、次の2パターンがあります。
- Cocoon設定で設置する
- ウィジェットで設置する
まずは、Cocoon設定での設置方法です。この方法では、当サイトのようにヘッダー下におすすめカードが設置されます。
- 1Cocoon設定のおすすめカードのタブを開く
- 2各項目を設定する
「おすすめカードの表示」が「表示しない」となっているので、表示したいページを選択しましょう。
「メニュー選択」は、先ほど作成したメニューを選択します。
その他、自分の好きなように設定し、保存しましょう。
当サイトの設定はこのようになっています。
この方法では、以下のように表示されます。
次にウィジェットでの設置方法です。この方法では、サイドバーはもちろん、ウィジェットで設定できるあらゆる部分に設置できます。
今回は、インデックスリストの一番上に表示してみます。
- 1外観のウィジェットを選択する
- 2インデックスリストのトップに、おすすめカードを設置する
インデックスリストトップの「＋」を選択し、おすすめカードブロックを設置しましょう。
- 3おすすめカードの詳細を設定し、更新する。
「メニュー名」で先ほど作成したメニューを選択し、表示スタイルと余白の有無を選択して、右上の更新ボタンを選択しましょう。
この方法では以下のように表示されます。
その他おすすめのCocoon機能
Cocoonテーマには、おすすめカード以外にも回遊率を上げる機能はたくさんあります。
中でも私が『これは設定すると良いのでは？』と思ったおすすめ機能を3つ紹介します。
フロントページの表示変更
サイトのホームに記事が羅列されますよね。初期設定では、新着順に表示されるよう設定されていますが、カテゴリーごとに分けることもできます。
Cocoon設定のインデックスタブを選択し、設定しましょう。
サイトのホーム（フロントページ）の表示方法は５パターンから選択できます。
- 一覧（デフォルト）
- タブ一覧
- カテゴリごと
- カテゴリごと（2カラム）
- カテゴリごと（3カラム
ちなみにこのサイトはタブ一覧表示になっているよ
また、記事の並び方も選択できます。
- エントリーカード（デフォルト）
- 大きなカード（先頭のみ）
- 大きなカード
- 縦型カード2列
- 縦型カード3列
- タイルカード2列
- タイルカード3列
このサイトは、縦型カード2列で設定しているよ
サイトのホームは、記事に興味を持った方がサイトを回遊する際に必ず開くメイン画面です。最低限この設定は頭に入れておきましょう。
もっとかっこいいメイン画面にしたい！という方は、固定ページでメイン画面を作成する方法もあります。
興味がある方はこちらの記事もご覧ください。
CSSが分からなくても簡単に設定できる方法を紹介しているよ
カルーセル
カルーセルというのは、ヘッダー下に表示される自動で動くブログカードです。
カルーセルを表示させるだけでも、一気におしゃれなホームになります。
フロントページの表示方法の変更と同様にCocoon設を開き、カルーセルタブを選択して設定しましょう。
表示ページや内容、表示数や自動送りの設定など細かく設定できます。
※設定の保存ができない場合は、サーバーのWAF設定を切ってから保存してみてください。
カルーセルを設定すると、サイトスピードが低下する可能性があるので注意しましょう。
ボックスメニュー
冒頭でも触れましたが、今回紹介したおすすめカードと似た機能です。
おすすめカードとの違いは、メニューボタンがアイコン表示であること。
おすすめカードは1枚の画像をメニュー化しますが、ボックスメニューはアイコン画像を使用してメニューを作成します。
自分のブログのデザインに合わせて使い分けたいですね。
似た機能だからどちらかで十分だと思うよ
ボックスメニューについての記事も書いているので、興味があればご覧ください。
まとめ
以上、おすすめカードの使い方について説明しました。
今回は、カテゴリーの表示方法を説明しましたが、記事や固定ページを設定した場合は、それぞれのアイキャッチ画像が反映されると思います。
詳しい使い方や注意点に関しては、以下の記事をご覧ください。
https://wp-cocoon.com/recommended-cards/
https://wp-cocoon.com/recommended-cards-widget/
それではまた～
コメント