Cocoon／人気記事ランキングを表示して可愛く、個別にラベル背景色を変更するカスタマイズ（ショートコードのほかブロックでも表示できるようになりました）

お知らせ

2023.3.8 追記しました。

ブロック機能を使った表示方法
カードを横並びにするオプション

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

ランキング部分を丸くして少し可愛く
個別に１～３位までの背景色を変更する

この２点について書いていますのでご覧ください。

カスタマイズのイメージ
カスタマイズの手順
ブロック機能を利用する方法
ショートコードを利用する方法
1. ランキングの表示方法
2. ランキングのオプションについて
CSSはこちら
当サイトの実際の人気記事ランキング
個別に色を変更するには
カスタマイズするメリット

カスタマイズのイメージ

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

カスタマイズの手順

STEP1
人気記事を表示させる
どちらの方法でもOKです。
1. ブロック機能 NEW
2. ショートコード利用
STEP2
CSSをコピペする
ここでスタイルを整えます。
STEP3
完成
これだけ！

ブロック機能を利用する方法

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

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

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

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

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

設定できる項目

表示する記事数
データの集計期間
表示タイプ（カードの形状）
タイトルの文字の太さ
矢印を表示する
横並びにする
ランキングの番号を表示する
PV数の表示

今回はランキングの番号部分のカスタマイズなので、ランキングの番号表示をONにしておきましょう。

ショートコードを利用する方法

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

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

＼こちらがショートコード／

[popular_list]

CSSはこちら

人気記事が表示されたらあとはCSSを追加するだけです。（子テーマを使用します）

Cocoon（コクーン）でカスタマイズ／HTML・CSSの編集方法

HTMLやCSSの編集方法は共通なので、それぞれの記事に毎回書かずにこちらのページにまとめておきます。特にカスタマイズが初めての方、慣れていない方はご確認ください。こんな方にオススメワードプレステーマCoc...

CSSで設定すること

ランキング番号の枠を丸くする
位置を少しずらす

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

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

＼ショートコードで表示しています／

個別に色を変更するには

デベロッパーツールで確認すると分かりますが、ランキングのラベル部分には全体で#666666（グレー）のカラーコードが指定されています。

.widget-entry-cards.ranking-visible .card-thumb::before{
    background: #666666;/*ランキング全体のラベル背景色（グレー）*/
}

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

それぞれ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位のラベル背景色*/
}