
Cocoonにおすすめカードを設置したい方「おすすめカードの設置方法とカスタマイズ方法を詳しく知りたい」
本記事は、上記の方に向けて執筆しています。
本記事の内容
- Cocoonおすすめカードの初期設定
- Cocoonおすすめカードのカスタマイズ方法
- Cocoonおすすめカードの問題点を解決する方法
この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」



3分程度の内容なので、ぜひ最後までご覧ください。
Cocoonおすすめカードの初期設定
最初に、Cocoonおすすめカードの初期設定を終わらせていきましょう。
- おすすめカードメニューを設定する
- おすすめカードを表示させる



1分程度で設定可能です。
おすすめカードメニューをカスタマイズ
まずは、WordPress管理画面<外観<メニューを行き、「おすすめカード」メニューを作成していきましょう。


メニュー名:おすすめカード
上記のように設定しておき、【メニュー作成】をクリックしましょう。


おすすめカードには4記事設定しておきましょう。
当サイトでも4記事設定しています。
4つの記事を選択した後、メニューに追加をクリックし、メニューを保存しましょう。



次に、おすすめカードを表示させる設定を行なっていきます。
おすすめカードメニューを表示させる
WordPress管理画面<Cocoon設定<おすすめカードへ行きましょう。


- おすすめカードの表示:フロントページのみ(←おすすめ)
- メニュー選択:おすすめカード
- 表示スタイル:画像中央に白文字タイトル
- カード余白:チェックを入れる
- カードエリア左右余白:チェックを入れる



このように設定すると、下記のように表示されるはずです。




ここまでで、Cocoonの初期機能は実装完了です。
さらにカスタマイズしていきたい方は、CSSを使ってカスタマイズしていきましょう。
【CSS編】Cocoonおすすめカードのカスタマイズ
CSS編|Cocoonおすすめカードのカスタマイズでできることをこの章で紹介しています。
- おすすめカードのタイトル
- おすすめカードの画像



1つずつ解説していきます。
カスタマイズ例①おすすめカードのタイトル
#recommended .navi-entry-card-title {
font-weight:bold;
text-shadow: 1px 2px 3px white;
}
上記のclass名を指定することで、おすすめカードのタイトルをカスタマイズすることができます。



色、サイズ、フォント、影など色々なデザインを設定することができます。
カスタマイズ例②おすすめカードの画像
#recommended .navi-entry-card-thumb img{
border-radius:3px;
}
#recommended .navi-entry-card-thumb:hover {
/*ホバーした後のアニメーションを追加する*/
}



上記のclass名でCocoonおすすめカードの画像をカスタマイズすることができます。
Cocoonおすすめカードのよくある問題
Cocoonおすすめカードでは、よく問題が発生します。
- おすすめカードが表示されない
- おすすめカードの画像サイズが合わない
おすすめカードが表示されない
この問題は「アイキャッチを設定していない時」に発生します。



カテゴリー、タグ、投稿、固定ページのアイキャッチ画像を確認しましょう。
アイキャッチ画像を設定しても表示されない場合は、本記事で紹介している表示手順をもう一度確認してみてください。
それでも表示されない場合は、Cocoonのフォーラムで質問を投げてみてください。
おすすめカードの画像サイズが合わない
この問題を解決する方法は「画像サイズを合わせる」ことです。



当サイトでは、画像サイズを固定しています。
アイキャッチ画像サイズを固定していると、サイズのばらつきがなくなるので、ぜひこの方法を取り入れてみてください。
Cocoonのアイキャッチ画像に最適なサイズは下記の記事で紹介しています。
興味がある方はご覧ください。


WordPressカスタマイズ外注したい方
カスタマイズを外注したい方は「ココナラ」がおすすめです。


このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。
先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。
まとめ:Cocoonおすすめカードのカスタマイズ
ここまでで「【回遊率UP】Cocoonおすすめカードの設定・カスタマイズ」の解説は以上です。
- Cocoonおすすめカードを表示させる方法
- CocoonおすすめカードをCSSでカスタマイズする方法
- Cocoonおすすめカードの問題を解決する方法



本記事は以上です。
Cocoonのカスタマイズを本格的に行いたい方は下記の記事をご覧ください。


Cocoonユーザー向けTwitterアカウント
当サイトではブログ関連の情報を随時発信しています。
- ブログ運営
- アフィリエイト収益化
- SEO対策含むWebマーケティング



上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方
Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。



今、稼いでいるブロガー達はこぞってSWELLを活用しています。
デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。
有料テーマに挑戦したい方はSWELLがおすすめです。
Cocoonを本格的にカスタマイズしたい方
→プログラミングを学びましょう。
Cocoon含む、WordPressを扱うためには下記の言語が必要です。
- HTML
- CSS
- JavaScript(React)
- PHP(WordPress)



当サイトで、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。