こんにちは、まちゃりさです。
「おすすめカード」は、Cocoonで標準搭載されている機能の1つです。
次のように、ヘッダーの下に「画像リンク」を並べて表示させることができる機能です。
本記事では、Cocoonのおすすめカードを設定するやり方について、丁寧に解説していきます。
本記事を読むことで、誰でも簡単に「おすすめカード」を設定することができます。
それでは、どうぞ！
【Cocoon】「おすすめカード」を設定するメリット
Cocoonの「おすすめカード」を使えば、簡単にヘッダー下に画像付きカテゴリーや、見てほしい記事のリンクを作ることができます。
うまく表示させることで、ブログ閲覧者の回遊率を上げることも期待できます。
Cocoonなら、コードを使うことなく簡単に設置できるので、是非やってみましょう！
ちなみに表示するカード数は、偶数個がおすすめです。
モバイル表示できれいに見えるためです。
メニュー数7個と8個で、見え方の比較をしてみました。
▼PC表示の比較
▼モバイル表示の比較
モバイル表示の場合は、偶数個の方がきれいに見えるので覚えておきましょう。
また、メニュー数を多くしすぎるとトップページがごちゃつきます。
多くても、6個くらいがおすすめです。
【Cocoon／カスタマイズ】「おすすめカード」を表示させるやり方
ここからは、実際にCocoonで「おすすめカード」を表示させるやり方を、画像付きで紹介していきます。
本記事を見ながら一緒に設定していくことで、簡単に「おすすめカード」を表示させることができます。
最後まで一緒にがんばりましょう！
今回は、下のようなイメージで「大カテゴリー」ごとの画像リンクを表示させるやり方について、ご紹介します。
次の4つのステップで実施していきます。
- テーマのバックアップ
- 画像の準備
- 「おすすめカード」用メニューの作成
- 「おすすめカード」の設定
事前準備① テーマのバックアップ
「テーマをいじるのが不安」という方は、あらかじめバックアップを取っておきましょう。
今後もCocoonで「Cocoon設定」をいじる場合は、常に行っておくことをおすすめします。
（Cocoon設定以外をいじる場合は、ワードプレスのバックアップも取っておきましょう）
デザインをいじった後、おかしくなった場合、もとに戻すことができます。
なお、設定の変更は自己責任にて実施をお願いします。
【▼テーマのバックアップのやり方】
ワードプレス管理画面の[Cocoon設定]→[バックアップ]をクリックし、
![[Cocoon設定]→[バックアップ]をクリック](https://i0.wp.com/blog.macharisa.com/wp-content/uploads/2021/03/cocoon_customize_osusume_card_2.png?resize=283%2C536)
「バックアップファイルの取得」をクリックする。
取得したファイルは、専用のフォルダを作成して保存しておきましょう。
事前準備② 画像の準備と登録
私のように「大カテゴリー」をおすすめカードに表示させる場合、カテゴリーごとに画像を作成し、登録する必要があります。
カテゴリーごとの画像を作成する
カテゴリーごとのイメージ画像を作成します。
画像作成のツールは、何を使っても問題ありませんが、私は「CanvaPro」を利用しています。
チーム利用のため、たったの月額200円ほどで利用できています。
「CanvaPro」を使用することのメリットは、次のとおり。
- 7500万点以上のイメージ画像が用意されている（便利）
- 画像のリサイズが可能（便利）
- 画像背景を消すことができる（便利）
- フォント種類が充実している
- 編集がしやすい
1ヶ月の無料トライアルもできるので、どんなものか試してみるのもおすすめです。
↓CanvaProのトライアルはこちらから
作成する画像は、どのくらいのサイズがよいか、気になりますよね？
そこで、今回は画像のサイズによる違いがあるかを検証してみました。
比較したのは、【1200×630】ピクセルと【1920×1280】ピクセルです。
結論、見え方による違いは、ほとんどありませんでした。
▼PC表示の比較
▼モバイル表示の比較
ただ、画像作成後に「やっぱりサイズが違った・・・」という時にすぐに変更ができるので、「CanvaPro」で作っておくとかなり便利です。
カテゴリーページに画像を登録する
つづいて、作成した画像をカテゴリーページに登録します。
ワードプレス管理ページの「投稿」→「カテゴリー」をクリックし、おすすめカードに表示させたい「カテゴリー」の編集ページまで進みます。
[アイキャッチ]欄に、設定したい画像を登録します。（「選択」をクリックし、画像名を選択する）
![[アイキャッチ]欄に設定したい画像を登録](https://i0.wp.com/blog.macharisa.com/wp-content/uploads/2022/05/cocoon_customize_osusume_card_8.png?resize=1024%2C516)
これで準備OKです。
「おすすめカード」用メニューの作成
最初に「おすすめカード」用のメニューを作成しておく必要があります。
【▼やり方：「おすすめカード」用のメニューを作成する】
ワードプレス管理ページの「外観」→「メニュー」を選択します。
[新しいメニューを作成しましょう]をクリックします。
メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。
ここでは、そのまま「おすすめカード」とします。
左側の「カテゴリー」項目から「おすすめカード」に表示させる項目を選択します。
「大カテゴリー」にチェックを入れて、[メニューに追加]をクリックします。
右側に、大カテゴリーが追加されました！
追加後、[メニューを保存]をクリックします。
あと少しです！頑張りましょう！
「おすすめカード」の設定
続いて、先ほど作成したメニューを「おすすめカード」に設定します。
【▼やり方：「おすすめカード」メニューの設定】
ワードプレス管理画面の[Cocoon設定]をクリックし、[おすすめカード]タブを開きます。
[メニュー選択]項目で、作成したメニュー（例では「おすすめカード」）を指定します。
設定後、[変更をまとめて保存]をクリックし、変更を反映させることをお忘れなく。
これで、「おすすめカード」の設定は完了です！
【Cocoon】「おすすめカード」の表示をページごとに変えるには？
ここからは、さらにこだわりがある方向けに設定のやり方を紹介します。
ページごとに「おすすめカード」の表示を変更することもできます。
これも、「Cocoon設定」→「おすすめカード」タブを開き、
「おすすめカードの表示」項目で、表示させたいページを指定します。
選択できる表示ページは、次のとおりです。
- 全ページ
- フロントページのみ
- 投稿・固定ページ以外
- 投稿・固定ページのみ
- 投稿ページのみ
- 固定ページのみ
たとえば、固定ページなど「おすすめカード」を表示させたくないページもあると思います。
そのようなページがある場合には、表示を除外することができます。
ページごとに表示を変えたい場合は、設定してみましょう。
ウィジェットでも「おすすめカード」を設定できる
ウィジェットで「おすすめカード」を表示させるページを指定することも可能です。
【▼やり方：ウィジェットで「おすすめカード」を表示させるページを指定する】
「外観」→「ウィジェット」を開きます。
「おすすめカード」の「追加」をクリックします。
「おすすめカード」の「表示スタイル」を指定し、
「おすすめカード」を追加したい場所を指定します。
例えば、「投稿本文中」に表示させたイメージは、このようになります。
「サイドバー」に表示させたイメージは、こちらです。
このように、ウィジェットの機能を使うことで、おすすめカードを表示させる幅が広がります。
色々な場所に追加して、表示を試してみましょう！
参考にした記事は、こちらです。
まとめ
今回は、Cocoonで「おすすめカード」を設定するやり方をご紹介しました。
- テーマのバックアップ
- 画像の準備
- 「おすすめカード」用メニューの作成
- 「おすすめカード」の設定
思ったより簡単でしたか？私は最初わからず、かなり苦戦しました。
Cocoonは、理解できれば簡単なのですが、それまでが結構大変ですね。
本記事が、ブログ初心者・Cocoon利用者の役に立つことを期待しています！
それでは、今回はこのへんで。
最後までお読みいただき、ありがとうございました！
Cocoonのカスタマイズ・設定のやり方
Cocoonのカスタマイズ・設定のやり方については、以下の記事でまとめています。
コメント