【超役立つ】Cocoon人気記事を設置・カスタマイズ|CSSコピペOK

想定読者

Cocoon人気記事をカスタマイズしたい方「CSSを使ってカスタマイズする方法を知りたい」

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

本記事の内容

  • Cocoon人気記事をサイドバーに設置する方法
  • Cocoon人気記事をCSSカスタマイズする方法

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

おにちゃん

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

記事の内容

サイト運営者

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

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

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

Cocoon人気記事をサイドバーに設置する

Cocoon人気記事をサイドバーに設置する
Cocoon人気記事をサイドバーに設置する

まずは、WordPress管理画面<外観<ウィジェットへ移動しましょう。

そこで、【人気記事】をサイドバーに追加しましょう。

Cocoon人気記事の初期設定
Cocoon人気記事の初期設定

次に、下記の項目を入力していきましょう。

  1. 表示モード:全ての人気記事orカテゴリ別人気記事(こちらがおすすめ)
  2. 人気記事のタイトル:好きな名前
  3. 表示数:好きな数(おすすめは7)
  4. 表示タイプ:好み
  5. 集計期間:30日間
おにちゃん

その他の「ランキング表示」「PV表示」「タイトルを太字にする」「矢印表示」も自分好みにカスタマイズしましょう。
僕は、全部チェックしています。

Cocoon人気記事の完成イメージ
Cocoon人気記事の完成イメージ


Cocoon人気記事が表示されない時の対処法

僕は1時間ほど、Cocoon人気記事が表示されない問題に直面しました。

その時に試した方法を紹介しておきます。

Cocoon人気記事が表示されない時の対処法
STEP
対処法①アクセス集計にチェックを入れる

WordPress管理画面<Cocoon設定<アクセス集計に移動しましょう。

対処法①アクセス集計にチェックを入れる
対処法①アクセス集計にチェックを入れる

アクセス集計の有効化にチェックを入れましょう。

この方法で、Cocoon人気記事の表示されない問題はほとんど解決することができます。

STEP
対象法②アクセスが足りていない

僕はこの問題で、Cocoon人気記事が表示されない問題が発生していました。

この場合の解決策は簡単です。
アクセスが増えると、自然とランキングが表示されるようになります。


【CSS編】Cocoon人気記事をカスタマイズする

ここからは、Cocoon人気記事をカスタマイズしていく方法を解説していきます。

CSS編|Cocoon人気記事をカスタマイズする
  • カード間の余白
  • カードとコンテンツの余白
おにちゃん

1つずつ解説していきます。


カスタマイズ例①カード間の余白

.sidebar a.popular-entry-card-link.a-wrap{
        margin-bottom: 16px;
}

Cocoon人気記事のカード間の余白をつけるのには、上記のコードを活用する必要があります。

デフォルト設定
デフォルト設定
カスタマイズ設定後
おにちゃん

隙間を大きくしたい方は16pxの数字部分を大きくしてみてください。


カスタマイズ例②カードとコンテンツの余白

.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{
        padding: 0.2em 0 0 0.9em !important; 
	letter-spacing: 0.8px;  
}

上記のコードでカードとコンテンツの余白をカスタマイズすることができます。

デフォルト設定
カスタマイズ設定後
おにちゃん

コンテンツの余白は大きくしすぎると違和感ができてしまうので、僕が指定している数値を変える必要はありません。


まとめ:Cocoon人気記事のカスタマイズ

ここまでで「【超役立つ】Cocoon人気記事を設置・カスタマイズ|CSSコピペOK」の解説は以上です。

本記事のまとめ:Cocoon人気記事のカスタマイズ
  • Cocoon人気記事をサイドバーに設置する
  • Cocoon人気記事のカード間の余白をカスタマイズ
  • 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をコピーしました!
記事の内容
閉じる