【Cocoon】人気記事ウィジェットのランキングラベルカラーの変更

Cocoonのバージョン1.3.4からかな？人気記事ウィジェットのランキングラベルが
1～3位の色が金・銀・銅色へ変更になりました
個別クラス属性が付いたのでサイトに合わせて色を変更してみたので一応記事にしておきます

公式Cocoon | 無料WordPressテーマ

Index

デフォルトカラー
変更するコード
おわり

デフォルトカラー

デフォルトのランキングラベルの色は金・銀・銅になっています

見た感じ分かりにくいと思いますが4位以下の色を変更していました

大多数の人がこのままで特に問題なく使えると思います
というか、わざわざここの色を変更しようとは思わないですよねw
もし自分と同じように変更したいよーという奇特な人は以下のコードを変更してください

変更するコード

デベロッパーツールで見ると分かりますが

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before

この部分が1位のランキングラベルになります no-1を2、3に変更でそれぞれ2位、3位です

ソースコードを開く

/* ランクカラー変更 */
.widget-entry-cards.ranking-visible
.no-1 .card-thumb::before {
    background: #bfd8f9;
    font-weight: 700;
}

.widget-entry-cards.ranking-visible
.no-2 .card-thumb::before {
    background: #9fbbe0;
    font-weight: 700;
}

.widget-entry-cards.ranking-visible
.no-3 .card-thumb::before {
    background: #7488a3;
    font-weight: 700;
}

このように子テーマに追加してあげるとランキングラベルの色を変更する事が出来ます
色指定は当サイトで使っているランキングラベルカラーです
青系に統一して明度、彩度の変化を付けている感じですね
あとはfont-weightでフォントの太さを変えています

デフォルトカラーの所でも書きましたが、4位以下の色も変更してあったので一応それも

/* ランク表示位置とサイズ調整 */
.widget-entry-cards.ranking-visible .card-thumb::before {
    left: 3px;
    padding: 4px 10px;
    border-radius: 5px;
    opacity: .8;
    background: #546276;
}

こんな感じです

注意点は各クラス属性を区切らない事です、カンマで区切ると変更できません