Cocoon人気記事ランキングカスタマイズ／ラベル背景色を変更する方法

今回はCocoonの人気記事ランキングのカスタマイズについて。

Cocoon人気記事ランキング／カスタマイズのイメージ

まず、カスタマイズのビフォーアフターをご覧ください。

Cocoon人気記事ランキング／カスタマイズの手順

Cocoon人気記事ランキング／ブロック機能を利用する方法

まず人気記事の表示の仕方。（既にランキングを表示している場合は読み飛ばしてください）

Cocoon 2.5.7のバージョンアップで人気記事ブロックが追加され、従来のショートコードの他にブロックでも利用できるようになりました。

ブロックで「人気記事」を検索してクリック。

このような人気記事一覧が表示されます。

右側のメニューである程度カスタマイズできます。

Cocoon人気記事ランキング／ショートコードを利用する方法

もうひとつは従来のショートコードを利用した方法です。

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

[popular_list]

ランキングの表示方法

1. ブロックを選択して上部メニューから
   [/]人気記事一覧を選択する
   （メニューバーが出ないときは何か文字を入れるとでてくるはずです）
2. またはショートコードを直接入力してもOK

このような人気記事を表示するショートコード（各オプション項目）が表示されます。

[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

ランキングのオプションについて

ランキングの番号を表示するには、rank=”０” 部分を”１”に変更します。

[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;/*ランキング全体のラベル背景色（グレー）*/
}

そして１～３位までを部分的に金銀銅をイメージしたカラーに変更。

つまり、個別に色を変えたいときは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位のラベル背景色*/
}

まとめ

とても細かい部分となりますが、このカスタマイズによってシンプルなデザインのよさはそのままでオリジナル感を出すことができます。

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