【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!

Cocoonおすすめカード画像Cocoon
Cocoonを使っていて…
  • おすすめカードを設置したい
  • おすすめカードがうまく表示されない

おすすめカードはトップページの上部やサイドバーなどに設置するもので、画像付きで目立つリンクのことですね。

絶対に見て欲しい記事やカテゴリーを設定すると効果あります。下の画像のようなやつです

▼パソコン表示▼
▼スマホ表示▼

本記事ではWordPressテーマCocoonを使っている方へ向けて、おすすめカードの設定方法を詳しく説明していきます。

画像多めで説明しますので、初心者でも迷うことなく設定できます。

設定自体は10分もあれば終わるものです。この記事を見ながらゆっくりやっても30分あれば大丈夫でしょう。

簡単にできますので、あなたのブログのトップにおすすめカードをバシッと決めて、見た目も回遊率もレベルアップをしましょう!

おすすめカードを設定してみたけどうまくいかない

おすすめカード設定するときのよくあるトラブルについても記事後半に書いていきます。

設定はしたけどうまくいっていない人は記事後半をチェックです。

だいたいの原因はカテゴリページやタグページのアイキャッを設定していない。設定していても大きさが整っていないことによります。

それではおすすめカードの設定方法を確認していきましょう!

おすすめカードの設定方法

各行程画像付きでおすすめカードの設定方法を解説していきます。あなたもこの記事を見ながら一緒に作業してみてください。

専用のメニューを作る

まずはおすすめカードに表示する固定ページやカテゴリー、投稿ページなどをメニューで設定します。

ワードプレスの編集画面から、外観→メニューと進んでください。

▼外観→メニュー▼
▼新しいメニューを作成しましょうをクリック▼
▼「おすすめカード」など適当にメニュー名を付けて▼
メニューを作成を押す

これでメニューが作成できました。次からメニューの中身を決めていきます。

表示させる項目の選択

▼メニュー項目を追加からカテゴリーや固定ページを選択▼
メニューに追加をおす

タグのプルダウンは表示オプションを押して、「タグ」をチェックすると出てきます。

おすすめカードに表示する項目の数は何個でも設置できますが、4個が見栄えが良くていいと思います。

奇数だとスマホ表示の時に歯抜けみたいになりますし、4個以上だとちょっと目がちらちらします。

項目4個以上なら「カルーセル」の方がいいかな

↓カルーセルって何かわからない人へ↓
関連記事【Cocoon】スライドショーを設定する方法まとめ

項目ごとの個別設定

おすすめカードに表示する項目を決めたら、順番とタイトルを設定していきましょう。

▼設置順の変更はドラッグ&ドロップで▼
タイトルの変更は「▼」から設定します
▼ナビゲーションラベルに記入した文字が「タイトル」▼
としておすすめカードに表示されるようになる
ナビゲーションラベル以外は無記入でOK
▼設定が終わったらメニューを保存をおす▼

これでおすすめカード用メニューができました!

50%完了です。もうちょっとがんばろう

作成したメニューを表示するように設定する

おすすめカードの表示設定は2通りあります。Cocoon設定でやるか、ウィジェットでやるかです。

Cocoon設定は設置位置がページの上部に決まっていますが、ウィジェットは自由に位置を決めることができます。

どちらも難しくありません!両方やり方知ってて損はないです

1.Cocoon設定のおすすめカードで設定する

まずはCocoon設定から設定する方法をご紹介します。ワードプレスの管理画面からCocoon設定→おすすめカードと進んでください。

▼Cocoon設定▼
▼おすすめカード▼
▼このページで設定します▼
▼おすすめカードの表示で▼
どのページに表示させるか選択
▼メニュー選択で▼
さっき作ったメニュー(ここでは「おすすめカード」)を選択
  • 表示スタイル
  • カード余白
  • カードエリア左右余白

この三つは画像マークにカーソルを合わせて、表示のされ方を確認しながら好きなように設定しましょう

▼表示スタイル・カード余白・カードエリア左右余白▼
を設定する
▼設定したら▼
変更をまとめて保存を押す

これで設定完了です。あなたのブログを確認してみてください!

続いてはウィジェットで設定する方法です。

2.ウィジェットで設定する

おすすめカードはウィジェットでも設定できます。ワードプレスの編集画面から外観→ウィジェットとすすんでください。

▼外観→ウィジェット▼
左側からおすすめカードを見つけて▼を押す
▼設置したい場所を選択し▼
ウィジェットを追加をおす
▼詳細設定をして保存▼

これでウィジェットでおすすめカードの設置ができました!

ウィジェットで設定することの良いところは、ページ上部だけでなくページの下部やサイドバーにもおすすめカードを設置できるところですね!

お疲れさまでした。次は、上記のようにちゃんとやったのにうまく表示されない場合の対処方法です。

よくあるトラブル

おすすめカードの画像が表示されない

画像が表示されない原因第1位は「カテゴリーページやタグページのアイキャッチ画像を設定していない」です。

カテゴリーやタグページのアイキャッチ設定方法を見てみましょう

代表でカテゴリーページのアイキャッチ設定方法を説明します。タグページも同様にできますので、紹介は省きます。

▼投稿→カテゴリー▼
▼編集するカテゴリーを選択▼
▼ちょっとスクロールして▼
アイキャッチの「選択」を押す
▼画像を選んで▼
右下の「画像の選択」をおす
▼最後に「更新」する▼

アイキャッチの設定完了です。おすすめカードに反映されましたか?

その他アイキャッチが反映されないトラブルがいくつかCocoonフォーラムにありました。あなたの原因がそっちかもしれないので見てみてください。

Cocoon公式おすすめカード画像 NO IMAGEの対処
Cocoon公式おすすめカードの設定ができません。

おすすめカードの画像サイズがバラバラ

▼適当な画像でおすすめカード設定したら▼

おすすめカードが整ってないとなんだかしまりが悪いですね。解決策はアイキャッチ全部を同じサイズの画像に加工し直して再設定するのが確実です。

大変だけどやったほうがいいです

アイキャッチに関する記事は別で書いていますので、そちらも参考にしてみてください。
関連記事【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
Cocoon公式おすすめカードの画像サイズが均等にならない

おすすめカードで回遊率UPを目指そう

本記事では【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!

ということでおすすめカードの設定方法を丁寧に解説してきました。

うまく設定できましたでしょうか?おすすめカードができるとぐっとそれっぽいサイトになります

  • おすすめカード
  • カルーセル
  • 通知エリア
  • アピールエリア

などなどCocoonにはページ上部を目立たせる機能がたくさんあります。

あなたに合ったやり方で、サイトの回遊率UPを目指していきましょう。

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント