【JIN】人気記事の表示をカスタマイズ！メダルカラーに変更する方法【コピペ】

どうも、やぎです！

この記事では、ブログのカスタマイズとして「人気記事の表示をメダルカラーに変更する方法」について紹介していきます。

このブログはWordPressテーマ「JIN」を使用していますので、それ以外の方はやり方が異なりますので、ご注意ください。

メダルカラーの見た目はこんな感じ

Before

After

パソコンなら右のサイドバー、スマホなら記事下の方に「人気記事」があるので、そちらを確認して頂ければ、表示がメダルカラーになっているのが分かるかと思います。

変更方法を解説【コピペでOK】

WordPressの管理画面から、外観＞カスタマイズ＞追加CSS＞下記のコードをコピペでOKです。

/* 人気記事メダルカラー */
.popular-item:first-child .pop-num{
	background-color:#ffcd44!important;
}

.popular-item:nth-child(2) .pop-num{
	background-color:#9eabc4!important;
}

.popular-item:nth-child(3) .pop-num{
	background-color:#c08d5e!important;
}

.pop-num {
	background-color: #545454 !important;
}

/* 人気記事メダルカラー */

.popular-item:first-child .pop-num{

background-color:#ffcd44!important;

}

.popular-item:nth-child(2) .pop-num{

background-color:#9eabc4!important;

}

.popular-item:nth-child(3) .pop-num{

background-color:#c08d5e!important;

}

.pop-num {

background-color: #545454 !important;

}

金・銀・銅の色はこちらのサイトが参考になります。

https://color-pallet.spark-a.com/gold-silver-copper/

例えば、金色だけでもいろんな色があり、とても参考になるので、ぜひ確認してみてください！

#DBB400

#EFAF00

#DAB300

まとめ

ブログを自分なりにカスタマイズしたりするのは、愛着も湧きますし、知識も増えて楽しいのでぜひチャレンジしてみてください！

もちろん、定期的にバックアップを取りつつ行ってくださいね！

Twitterでもこのように、ブログのカスタマイズ方法や、プログラミングのことなどを発信しているので、フォローして頂けると嬉しいです。

人気記事トップ3をメダルカラーに変更😌
CSSをちょっとだけ修正したけど、あんまりスマートな方法じゃない気がする、、、笑#デイトラ3rd https://t.co/xGaX1B2mjW pic.twitter.com/SmhxTGfoVT

— やぎ | Web制作×ブログ (@yagixlife) July 20, 2019