こんにちは。べるだ（@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.
