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でタブ切り替えを設置する(複数設置可)
カスタマイズ
ボックスデザイン(囲み枠)CSSコピペOK!/ブログを見やすく装飾しよう
カスタマイズ
Cocoon/SWELL風のオシャレなメインビジュアルトップページを作ってみよう(アピールエリアのカスタマイズ)
カスタマイズ
新着記事に一定期間だけ「NEW!」を表示するには/WordPress(ワードプレス)

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

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

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

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

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

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


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

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
\Follow/
Turicco

Comment

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