想定読者Cocoon人気記事をカスタマイズしたい方「CSSを使ってカスタマイズする方法を知りたい」
本記事は、上記の方に向けて執筆しています。
本記事の内容
- Cocoon人気記事をサイドバーに設置する方法
- Cocoon人気記事をCSSカスタマイズする方法
この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」
というテーマに変更していますが、サブブログではCocoonを活用しています。
エコおじい3分程度で読める内容なので、ぜひ最後までご覧ください。
Cocoon人気記事をサイドバーに設置する
まずは、WordPress管理画面＜外観＜ウィジェットへ移動しましょう。
そこで、【人気記事】をサイドバーに追加しましょう。
次に、下記の項目を入力していきましょう。
- 表示モード：全ての人気記事orカテゴリ別人気記事(こちらがおすすめ)
- 人気記事のタイトル：好きな名前
- 表示数：好きな数(おすすめは7)
- 表示タイプ：好み
- 集計期間：30日間
エコおじいその他の「ランキング表示」「PV表示」「タイトルを太字にする」「矢印表示」も自分好みにカスタマイズしましょう。
私は、全部チェックしています。
Cocoon人気記事が表示されない時の対処法
私は1時間ほど、Cocoon人気記事が表示されない問題に直面しました。
その時に試した方法を紹介しておきます。
WordPress管理画面＜Cocoon設定＜アクセス集計に移動しましょう。
アクセス集計の有効化にチェックを入れましょう。
この方法で、Cocoon人気記事の表示されない問題はほとんど解決することができます。
私はこの問題で、Cocoon人気記事が表示されない問題が発生していました。
この場合の解決策は簡単です。
アクセスが増えると、自然とランキングが表示されるようになります。
【CSS編】Cocoon人気記事をカスタマイズする
ここからは、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;
}上記のコードでカードとコンテンツの余白をカスタマイズすることができます。
エコおじいコンテンツの余白は大きくしすぎると違和感ができてしまうので、私が指定している数値を変える必要はありません。
WordPressカスタマイズ外注したい方
カスタマイズを外注したい方は「ココナラ」がおすすめです。
このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。
先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。
まとめ：Cocoon人気記事のカスタマイズ
ここまでで「【超役立つ】Cocoon人気記事を設置・カスタマイズ｜CSSコピペOK」の解説は以上です。
- Cocoon人気記事をサイドバーに設置する
- Cocoon人気記事のカード間の余白をカスタマイズ
- Cocoon人気記事のカードとコンテンツ間の余白をカスタマイズ
エコおじい本記事は以上です。
サイドバーに関するカスタマイズとCocoonのカスタマイズが気になる方は下記の記事をご覧ください。
Cocoonではないテーマでブログ運営したい方
Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。
エコおじい今、稼いでいるブロガー達はこぞってSWELLを活用しています。
デザイン性＋機能面を考えると当然な気がします。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。
有料テーマに挑戦したい方はSWELLがおすすめです。
Cocoonを本格的にカスタマイズしたい方
→プログラミングを学びましょう。
Cocoon含む、WordPressを扱うためには下記の言語が必要です。
- HTML
- CSS
- JavaScript(React)
- PHP(WordPress)
エコおじい当サイトで、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。
