どうも、やぎです!
この記事では、ブログのカスタマイズとして「人気記事の表示をメダルカラーに変更する方法」について紹介していきます。
このブログはWordPressテーマ「JIN」を使用していますので、それ以外の方はやり方が異なりますので、ご注意ください。
メダルカラーの見た目はこんな感じ
Before

After

パソコンなら右のサイドバー、スマホなら記事下の方に「人気記事」があるので、そちらを確認して頂ければ、表示がメダルカラーになっているのが分かるかと思います。
変更方法を解説【コピペでOK】
WordPressの管理画面から、外観>カスタマイズ>追加CSS>下記のコードをコピペでOKです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* 人気記事メダルカラー */ .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をちょっとだけ修正したけど、あんまりスマートな方法じゃない気がする、、、笑#デイトラ3rdhttps://t.co/xGaX1B2mjW pic.twitter.com/SmhxTGfoVT— やぎ | Web制作×ブログ (@yagixlife) July 20, 2019
質問や相談も、お問い合わせや、TwitterのDMからも承っているので、お気軽にご連絡ください。
それでは!