山と映画を愛する男の『趣味』と『実益』を兼ねたブログです。

そこに山と金があるから

WordPress Popular Postsのランキング表示が上下くっついて見にくいのでcssで見やすくするカスタマイズする方法。

更新日:


このブログでも重宝しているwordpressプラグイン『WordPress Popular Posts』

人気記事をランキング形式で表示できる優秀なプラグインなのですが、デフォルトだと上下の記事がくっついて表示されてしまうので見た目が悪くです。なのでCSSでカスタマイズして見た目をカッコよく見やすくしたいと思います。

 

『WordPress Popular Posts』の初期状態

『WordPress Popular Posts』は初期状態で使用するとこんな状態です。

上下に余白がなくサムネイル画像が上下でくっついて見づらい状態です。これを何とかしたい!

 

 

『WordPress Popular Posts』をCSSカスタマイズ

ではカスタマイズを始めましょう。まずはCSSを編集して各順位の間に点線の区切り線を入れてみましょう。

WordPress Popular Postsのプラグインを編集します。

ダッシュボード ▷プラグイン▷プラグイン編集へと進み、画面右上から『wordpress-popular-posts』を選択します。次は右列にあるプラグインファイルの中から5項目目の『wordpress-popular-posts/style/wpp.css』を選択。ここからCSSファイルが編集できるようになります。

 

 

各順位の間に区切り線を入れる

CSSファイルの中で下記の記述を見つけてください

見つけたら、下記のように書き換えて『ファイルを更新』ボタンを押します。

 

すると下記のように、黒色の区切り線が入ります。

 

記事と記事の間に黒い線が入りました。

線の太さと、線の種類は変更可能です。

1pxが線の太さ、#00000が線の色、soledが線の種類です。

ここで注意すべきことが、キャッシュ系のプラグインなどをしようしていると、反映されるのに時間がかかる場合があります。間違えたから反映されないと焦らずに、反映されるまで気長に待ちましょう。

 

 

区切り線ではなく単純にスペースを空けたい

私がこれです。線表示は見た目が嫌いです。記事と記事の間は『スペース』を空けたい!と思っているなら更にカスタマイズしましょう。このカスタマイズは点線で使用したコードを書き換えるだけでOKです。
線を太く表示して、線を背景の色と同色にします。要は線を描くけど、線は背景と同じ色だから見た目はスペースが空いているようにしか見えない。

6行目のborder-topの

1pxはラインの太さ=スペースの幅

#e5e5e5はラインの色=WordPress Popular Postsで表示されるランキング記事が表示される背景色と同じ数字にする。私の場合は#e5e5e5。

solidは線の種類=solidは普通の線です。

でスペース完成です。


記事と記事の間が線ではなくスペースに変わりました。実際は背景と同じ色なので線があるのは間違いないです。

 

 

記事タイトルを黒い太字にして下線をなくす

リンクしている記事は、分かりやすく文字が反転しています。それでもOKなのですが、ちょっと見にくい感&下線が嫌いな場合はカスタマイズしちゃいましょう!記事タイトルの文字色(ブルー)と装飾(アンダーライン)を変更する方法です。

CSSファイルの中で下記の記述を見つけます。

場所は上記の『wordpress-popular-posts/style/wpp.css』と同じ場所。点線の区切り線を入れる記述の少し下にあります。
見つけたら、下記のように書き換えて『ファイルを更新』ボタンを押しましょう。

 

すると下記のように、記事タイトルが黒の太字になり、アンダーラインが無くなって見やすくなりました。リンクは反転して青文字!じゃなくても誰でも分かると思います。

 

まとめ

よく読まれている記事をランキング表示するのにとても便利な『WordPress Popular Posts』。デフォルトだとイマイチな見た目も、CSSで簡単にカスタマイズして自分好みに仕上げましょう!



-WordPress
-, , , ,

Copyright© そこに山と金があるから , 2017 All Rights Reserved Powered by AFFINGER4.