こんにちは。べるだ(@verdad0619)です。
わたしが使用しているWordPressのテーマ「Simplicity」には、プラグインの「WordPress Popular Posts」を使ってサイドバーウィジェットに人気記事をランキング表示させることが出来ます。プラグインを入れるだけでランキングが表示出来るから便利♪
ただ、デフォルトだとランキング順位の数字部分が「ちょっと目立ちづらいなぁー」と感じたので「WordPress Popular Posts」の表示をカスタマイズしてみました。
気になる部分から読みます? 【目次】
WordPress Popular Posts カスタマイズ前
デフォルトの状態だと、ランキングの数字部分はグレーで表示されています。これでも十分なんですけど、ちょっとオリジナリティーを加えて目立つようにしてみようと思います。
WordPress Popular Posts カスタマイズ後
ランキング順位の数字カラーを黄色にして、枠を少しだけ丸めました。これだけでも雰囲気変わりますよね!
カスタマイズの参考にさせてもらったサイト
今回もブログ開設初日のカスタマイズで参考にさせていただいた「MASALOG」の下記の記事を参考にカスタマイズしています。
カスタマイズ手順
Simplicityの「Style.css」にコードを追加していきます。
下記はわたしが実際に追加したコードです。これでもよければコピペして使っちゃって下さい。
1 2 3 4 5 6 7 8 9 |
/* 人気記事ランキングの順位をカスタマイズ */ .widget_popular_ranking ul li:before, .widget_new_popular ul li:before { background: none repeat scroll 0 0 #f2cf01 !important; color:#fff !important; border-radius: 5px !important; top: 3px !important; border:solid 3px #f2cf01 !important; font-weight: bold; } |
この数字の値で周りの枠を丸くします。「MASALOG」さんでは完璧な丸でしたが、わたしは四角をちょっと丸めた感じにしたかったので「5px」にしています。丸にしたければ、「50px」にすると出来ます。
ここでカラーを指定しています。3行目は枠の中、7行目は枠線の色ですね。ここを好きな色に変更して使ってみてください。ちなみに、4行目のカラーは文字の色です。
本当は1〜3位までは別の色にしたいと考えていたんですが、よく分かりませんでしたw時間ができたら、また挑戦してみようと思います!
2017/6/12 追記

ランキングの1〜3位までを別の色にする方法を教えてもらいました!・・・というかコピペさせてもらいました(笑)
参考にさせてもらった記事
About Lifeさん(@aboutlife_blog)の記事を読めば、簡単にカスタマイズできちゃいます!
読みやすくて、すごく分かりやすい!
文章中のボックスの使い方とか憧れる!センスいいなぁー♪
About LifeさんのブログテーマもSimplicityなんですけど、スマートで読みやすい!見習おう(o´ᗜ`o)ノ
是非コピペしちゃってください♪
まったりログに「今度色を変えるカスタマイズやってみたい」って書いてあったのでそれもちょっと意識して書きました笑。
でも、まったりログは今のカラーのままでも素敵だと思います(^^)— About Life (@aboutlife_blog) June 7, 2017
「コピペしちゃってください♪」のお言葉に甘えて本当にコピペさせていただきました!←ほんと図々しい!
現在のランキングはコチラ
ついに1位〜3位に色がぁー!!
せっかくなので、四角からまん丸の見た目に変更しました♪
まとめ
ちょっとコードを加えるだけで、オリジナルのランキングになりますよ!難しくないので、ぜひやってみてくださいね♪1〜3位までの色変更は今度ぜったい挑戦するぞー!笑

About Lifeさんのおかげで、色変更ができました!!同じようにカスタマイズしたい方は、About LifeさんのサイトへGO!
About Lifeさん、ありがとうございましたぁー!
About Lifeさんのブログ About Life | Spend your days happily satisfied.