役立った!と思ったら共有

【Simplicity】人気記事ランキングウィジェットをお洒落に

【Simplicity】人気記事ランキングウィジェットをお洒落に

みなさんこんにちは2001Yです。

SimplicityにはWordPress Popular Postsと連帯して人気ランキングを表示するウィジェットがあります。Simplicityのウィジェットなため洗練されたシンプルなデザインにはなっているのですが、もう少しお洒落にしようと思います。

先人様のCSSを弄っただけなのでリンクを貼らせていただきます。二つ記事があったのですがここでは一つ載せさせていただきます。二つ目は 参考 をご覧ください。

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

変更前

/* 人気記事ランキングの順位をカスタマイズ */
.widget_popular_ranking ul li:before, .widget_new_popular ul li:before {
 background: none repeat scroll 0 0 #FFF !important;
 color:#000 !important;
 top: -3px !important;
 border-radius: 50px !important;
 border:solid 2px #000 !important;
}
#new-entries ul li img, #popular-entries ul li img {
 margin: 3px 5px 10px 3px;
}

%e3%82%b3%e3%83%94%e3%83%9a%e3%81%a7%e4%b8%80%e7%99%ba%ef%bc%81%e3%80%8csimplicity%e3%80%8d%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba11%e9%a0%85%e7%9b%aeこんな感じで表示されます。非常に綺麗で可愛らしいデザインですよね。僕も気に入ったのですが、丸の上の部分が凹んでしまってますよね。

コードを見たところ「top: -3px;」と書いてあるんですね?そこを調整しました。

それと、文字が若干小さくて見にくかったのですが、大きくしてしまうと落ち着きがなくなってしまったため、太い文字にしておきました。

(画像は申し訳ないですが拝借させていただきました。)

変更後

/* 人気記事ランキングの順位をカスタマイズ */
.widget_popular_ranking ul li:before, .widget_new_popular ul li:before {
 background: none repeat scroll 0 0 #FFF;
 color:#000;
 top: 3px;
 border-radius: 50px;
 border:solid 2px #000;
 font-weight: bold;
}
#new-entries ul li img, #popular-entries ul li img {
 margin: 3px 5px 10px 3px;
}

captureこのコードにすると、このように修正された形になります。

文字も見やすくなって丸の重なりが消えましたね。

参考

コピペで一発!「Simplicity」カスタマイズ11項目
Wordpressテーマの「Simplicity」を使っている人に向けて、このmasalog.meでのCSSカスタマイズを11項目紹介しています。
Wordpressテーマ「Simplicity」をカスタマイズする19のポイント【2016.03.03更新】
SEOに強くて、使いやすいWordpress無料テーマ「Simplicity」のカスタマイズ方法を19のポイントで紹介します。

最後に

myicon自分では1からコードを書けないので、先人の方が作ってくださったコードを改善することしかできませんが、Simplicityをより自分らしくできるのは嬉しいですね!
では!

!
 
好きなものはAppleと音楽! 最近カメラにも手を出し始めてみたり? 勉強はできないけど好きなことは好きなだけする男子中学生!2001年生まれ。お誕生日は9/20。

役立った!と思ったら共有

2001Y のアカウント