おにちゃん塾運営者に関する情報

【回遊率UP】Cocoonおすすめカードの設定・カスタマイズ

【回遊率UP】Cocoonおすすめカードの設定・カスタマイズ
想定読者

Cocoonにおすすめカードを設置したい方「おすすめカードの設置方法とカスタマイズ方法を詳しく知りたい」

本記事は、上記の方に向けて執筆しています。

本記事の内容

  • Cocoonおすすめカードの初期設定
  • Cocoonおすすめカードのカスタマイズ方法
  • Cocoonおすすめカードの問題点を解決する方法

この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」というテーマに変更していますが、サブブログではCocoonを活用しています。

おにちゃん

3分程度の内容なので、ぜひ最後までご覧ください。

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を3年ほど運営しております。副業、フリーランス、独立までの情報を網羅していく予定です。

Cocoonおすすめカードの初期設定

最初に、Cocoonおすすめカードの初期設定を終わらせていきましょう。

Cocoonおすすめカードの初期設定
  1. おすすめカードメニューを設定する
  2. おすすめカードを表示させる
おにちゃん

1分程度で設定可能です。


おすすめカードメニューをカスタマイズ

まずは、WordPress管理画面<外観<メニューを行き、「おすすめカード」メニューを作成していきましょう。

おすすめカードを追加する
おすすめカードを追加する

メニュー名:おすすめカード

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

おすすめカードに記事を追加する
おすすめカードに記事を追加する

おすすめカードには4記事設定しておきましょう。
おにちゃん塾でも4記事設定しています。

4つの記事を選択した後、メニューに追加をクリックし、メニューを保存しましょう。

おにちゃん

次に、おすすめカードを表示させる設定を行なっていきます。


おすすめカードメニューを表示させる

WordPress管理画面<Cocoon設定<おすすめカードへ行きましょう。

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

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

パソコン版のおすすめカード
パソコン版のおすすめカード
スマホ版のおすすめカード
スマホ版のおすすめカード

ここまでで、Cocoonの初期機能は実装完了です。
さらにカスタマイズしていきたい方は、CSSを使ってカスタマイズしていきましょう。


【CSS編】Cocoonおすすめカードのカスタマイズ

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のカスタマイズ対応をしてくれます。

先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。

1分以内に完了!無料会員登録はこちら

まとめ:Cocoonおすすめカードのカスタマイズ

ここまでで【回遊率UP】Cocoonおすすめカードの設定・カスタマイズの解説は以上です。

本記事の内容まとめ
  • Cocoonおすすめカードを表示させる方法
  • CocoonおすすめカードをCSSでカスタマイズする方法
  • Cocoonおすすめカードの問題を解決する方法
おにちゃん

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


Cocoonユーザー向けTwitterアカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
おにちゃん

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


Cocoonではないテーマでブログ運営したい方

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

おにちゃん

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

デザイン性+機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

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


\ おにちゃん塾に清き一票を /

おにちゃん塾はランキングサイトに登録しています。

役立ったと言う方はこちらのバナーをクリックしてください。
クリックするだけで、僕の順位が上がります(๑>◡<๑)

ブログランキング・にほんブログ村へ
URLをコピーする
URLをコピーしました!
記事の内容
閉じる