Cocoon(コクーン)/人気記事ランキングをオシャレにカスタマイズ

アイキャッチ/人気記事カスタマイズ
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

今回はCocoonの人気記事ランキングの数字部分のデザインを少しだけカスタマイズしてみたいと思います。

カスタマイズのイメージ

ランキング部分の背景を丸くして可愛い雰囲気にします!

人気記事ランキング

カスタマイズの手順

  • STEP1
    人気記事を表示させる

    cocoonのショートコードで簡単!ランキングを表示する設定にします。

  • STEP2
    CSSをコピペする

    ここでデサインを整えます。

  • STEP3
    完成

    これだけ!

ショートコードを利用した人気記事ランキング

まず人気記事の表示の仕方。

テーマ【Cocoon】には独自のアクセス集計機能がついているので、ショートコードを利用して簡単に人気記事ランキングを作成することができます。

[popular_list]

ランキングの表示方法

ランキングの番号を表示するには このようにrank=1を追加します

[popular_list rank=1]

さらにオプションでデータの集計期間(days)pv数の表示(pv)、表示する記事数(count)枠線をつける(type)カテゴリの指定(cats)などを指定することができます。

ショートコード書き方の例
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

その他の表示オプションなどは下記を参照ください。

CSSはこちら

人気記事が表示されたらあとはCSSを追加するだけです。

CSSで設定すること
  • ランキング番号の枠を丸くする
  • 位置を少しずらす

親テーマを直接編集すると更新のときに上書きされてしまうので、子テーマを使用することをお勧めします。

/*人気記事ランキングの番号デザイン*/
.widget-entry-cards.ranking-visible .card-thumb::before {
top:-6px!important;
left:-5px!important;
border-radius:50%;
padding:2px;
}

当サイトの実際の人気記事ランキング

カスタマイズ
CSSでテキストをなめらかに点滅させる方法(コピペOK)
カスタマイズ
CSSでタブ切り替えを設置する(複数設置可)
カスタマイズ
WordPress(ワードプレス)/新着記事に一定期間だけ「NEW!」を表示するカスタマイズ
カスタマイズ
キラリと光る!リンクボタンをHTMLとCSSで作成する方法
カスタマイズ
Cocoon(コクーン)/月別アーカイブウィジェットを折り畳み式にして年別にまとめるカスタマイズ

カスタマイズするメリット

  • シンプルなデザインのよさはそのままでオリジナル感を出すことができる

このテーマのユーザーはとても多くこのランキングを見るだけでCocoonユーザーだと分かってしまう部分なので、ちょっとしたカスタマイズで自分のサイトに個性を出してみてはいかがでしょうか。

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計なスペース等が入っていないか
  • CSSクラスの前に"."が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか

事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログ関連カスタマイズ
\この記事をシェアする/
\はっちゃんをフォローする/
のんびり釣りっこ

Comment

Shopping


タイトルとURLをコピーしました