今回はCocoonの人気記事ランキングのカスタマイズについて。
- ランキング部分を丸くして少し可愛くする
- 個別に1~3位までのランキング番号部分の背景色を変更する
この2点について書いていますのでご覧ください。
Cocoon人気記事ランキング/カスタマイズのイメージ
まず、カスタマイズのビフォーアフターをご覧ください。

ランキング部分の背景を丸くすると可愛い雰囲気になりませんか?

Cocoon人気記事ランキング/カスタマイズの手順
- STEP1人気記事を表示させる
2つの方法があり、どちらの方法でもOKです。
- ブロック機能 NEW
- ショートコード利用
- STEP2CSSをコピペする
ここでスタイルを整えます。
- 完成
これだけ!
Cocoon人気記事ランキング/ブロック機能を利用する方法
まず人気記事の表示の仕方。(既にランキングを表示している場合は読み飛ばしてください)
Cocoon 2.5.7のバージョンアップで人気記事ブロックが追加され、従来のショートコードの他にブロックでも利用できるようになりました。
ブロックで「人気記事」を検索してクリック。

このような人気記事一覧が表示されます。
右側のメニューである程度カスタマイズできます。

- 表示する記事数
- データの集計期間
- 表示タイプ(カードの形状)
- タイトルの文字の太さ
- 矢印を表示する
- 横並びにする
- ランキングの番号を表示する
- PV数の表示
今回はランキングの番号部分のカスタマイズなので、ランキングの番号表示をONにしておきましょう。
Cocoon人気記事ランキング/ショートコードを利用する方法
もうひとつは従来のショートコードを利用した方法です。
テーマ【Cocoon】には独自のアクセス集計機能がついているので、そのデータを元にショートコードを利用して簡単に人気記事ランキングを作成できます。
[popular_list]
ランキングの表示方法
- ブロックを選択して上部メニューから
[/]人気記事一覧を選択する
(メニューバーが出ないときは何か文字を入れるとでてくるはずです) - またはショートコードを直接入力してもOK

このような人気記事を表示するショートコード(各オプション項目)が表示されます。
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]
ランキングのオプションについて
ランキングの番号を表示するには、rank=”0” 部分を”1”に変更します。
[popular_list rank="1"]
さらにオプションで詳しく設定できます。
- データの集計期間(days)
- pv数の表示(pv)
- 表示する記事数(count)
- カードの形式(type)
- カテゴリの指定(cats)
- 横並びにする(horizontal)NEW
その他の表示オプションなどは下記を参照ください。
Cocoon人気記事ランキング/CSSはこちら
人気記事が表示されたらあとはCSSを追加するだけです。(子テーマを使用します)
- ランキング番号の枠を丸くする
- 位置を少しずらす
/*人気記事ランキングの番号デザイン*/
.widget-entry-cards.ranking-visible .card-thumb::before {
top:-6px!important;
left:-5px!important;
border-radius:50%;/*角を丸くする*/
padding:2px;
}
当サイトの実際の人気記事ランキング
Cocoon人気記事ランキング/個別に色を変更するには
デベロッパーツール(HTMLの構成やCSSを見ることができるGoogleChromeの標準機能)で確認すると分かりますが、ランキングのラベル部分には全体で#666666(グレー)のカラーコードが指定されています。
.widget-entry-cards.ranking-visible .card-thumb::before{
background: #666666;/*ランキング全体のラベル背景色(グレー)*/
}
そして1~3位までを部分的に金銀銅をイメージしたカラーに変更。
それぞれno-1、no-2、no-3とういうクラス名が付与されています。

つまり、個別に色を変えたいときはno-1、no-2、no-3とういうクラス名がついているそれぞれのbackground: #カラーコード;の部分に変更したいカラーコードを入れればOK。
参考 原色大辞典
/*人気記事ランキング番号部分*/
.widget-entry-cards.ranking-visible .card-thumb::before{
background: #666666;/*ランキング全体のラベル背景色(グレー)*/
}
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
background: #cca11f;/*ランキング1位のラベル背景色*/
}
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
background: #b1b1b3;/*ランキング2位のラベル背景色*/
}
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
background: #b37036;/*ランキング3位のラベル背景色*/
}

このCSSをコピペすれば簡単だね

金銀銅のイメージカラーが気に入っているので当サイトではデフォルトのまま変更していません。サイトカラーに統一したい場合などにも使えます。
まとめ
とても細かい部分となりますが、このカスタマイズによってシンプルなデザインのよさはそのままでオリジナル感を出すことができます。
このテーマのユーザーはとても多くこのランキングを見るだけでCocoonだと分かってしまう部分なので、ちょっとした部分に個性を出してみてはいかがでしょうか。
Comment
はじめまして。
色々、参考にさせて頂きます。