Simplicityの人気記事ランキング順位を色付けして目立つようにカスタマイズ

よければシェアお願いします(。・・。)

ランキング
こんにちは。べるだ(@verdad0619)です。

わたしが使用しているWordPressのテーマ「Simplicity」には、プラグインの「WordPress Popular Posts」を使ってサイドバーウィジェットに人気記事をランキング表示させることが出来ます。プラグインを入れるだけでランキングが表示出来るから便利♪

ただ、デフォルトだとランキング順位の数字部分が「ちょっと目立ちづらいなぁー」と感じたので「WordPress Popular Posts」の表示をカスタマイズしてみました。

スポンサーリンク

WordPress Popular Posts カスタマイズ前

ランキング変更前

デフォルトの状態だと、ランキングの数字部分はグレーで表示されています。これでも十分なんですけど、ちょっとオリジナリティーを加えて目立つようにしてみようと思います。

WordPress Popular Posts カスタマイズ後

ランキングカスタマイズ後
ランキング順位の数字カラーを黄色にして、枠を少しだけ丸めました。これだけでも雰囲気変わりますよね!

カスタマイズの参考にさせてもらったサイト

今回もブログ開設初日のカスタマイズで参考にさせていただいた「MASALOG」の下記の記事を参考にカスタマイズしています。

SEOに強くて、使いやすいWordpress無料テーマ「Simplicity」のカスタマイズ方法を19のポイントで紹介します。

カスタマイズ手順

Simplicityの「Style.css」にコードを追加していきます。
下記はわたしが実際に追加したコードです。これでもよければコピペして使っちゃって下さい。

5行目のborder-radius

この数字の値で周りの枠を丸くします。「MASALOG」さんでは完璧な丸でしたが、わたしは四角をちょっと丸めた感じにしたかったので「5px」にしています。丸にしたければ、「50px」にすると出来ます。

3行目と7行目の「#f2cf01」

ここでカラーを指定しています。3行目は枠の中、7行目は枠線の色ですね。ここを好きな色に変更して使ってみてください。ちなみに、4行目のカラーは文字の色です。

本当は1〜3位までは別の色にしたいと考えていたんですが、よく分かりませんでしたw時間ができたら、また挑戦してみようと思います!

2017/6/12 追記

管理人(べるだ)のアイコン
べるだ

ランキングの1〜3位までを別の色にする方法を教えてもらいました!・・・というかコピペさせてもらいました(笑)

参考にさせてもらった記事

About Lifeさん(@aboutlife_blog)の記事を読めば、簡単にカスタマイズできちゃいます!

ブログをしばらく書いていると人気記事ランキングを入れてみたくなるのが人情というものです(僕は7記事目くらいで入れました&)。僕はSimplicityというテーマを使っていますが、Simplicityの場合は人気記事ランキングの設定がしやすく

読みやすくて、すごく分かりやすい!

文章中のボックスの使い方とか憧れる!センスいいなぁー♪

About LifeさんのブログテーマもSimplicityなんですけど、スマートで読みやすい!見習おう(o´ᗜ`o)ノ

「コピペしちゃってください♪」のお言葉に甘えて本当にコピペさせていただきました!←ほんと図々しい!

現在のランキングはコチラ

【Simplicity】ランキングカスタマイズ
ついに1位〜3位に色がぁー!!
せっかくなので、四角からまん丸の見た目に変更しました♪

まとめ

ちょっとコードを加えるだけで、オリジナルのランキングになりますよ!難しくないので、ぜひやってみてくださいね♪1〜3位までの色変更は今度ぜったい挑戦するぞー!笑

管理人(べるだ)のアイコン
べるだ

About Lifeさんのおかげで、色変更ができました!!同じようにカスタマイズしたい方は、About LifeさんのサイトへGO!

About Lifeさん、ありがとうございましたぁー!

About Lifeさんのブログ About Life | Spend your days happily satisfied.

この記事が気に入ったら
いいね ! してね

Twitter でべるだを