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

wordpress
Sponsor Link
この記事は 約3分 で読めます。

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

公式Cocoon | 無料WordPressテーマ

デフォルトカラー

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

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

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

変更するコード

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

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

この部分が1位のランキングラベルになります no-12、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;
}

こんな感じです

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

おわり

いかがだったでしょうか?…今回の記事は誰得!?感満載ですね…
色の変更をしようと思う人は少ないとは思うけど、指定場所が分かれば画像に変える事も出来るので
誰かの参考になればいいかなーという所で終わりです

[share]

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