[wordpress] 人気記事の写真表示の体裁を整える

wordpressでサイトを作る際、
サイドバーにページビュー数によるランキング表示するため、
Wordpress Popular Postというプラグインをよく使用しています。

ただ、初期設定だとデザインが今一つなので、少し手を加えました。

 

このプラグイン、
ランキングを集計する期間を、日、週、月、合計から選べたり、
画像も、アイキャッチに設定した画像や最初の画像から選べたり、
結構使い勝手がとても良いです。

ただ、サイドバーのウィジェットに設定したときに、
写真がくっついてしまったりしていてデザインが今一つ。

wppopularpost_before

そういった場合は、
プラグインのCSSをいじることで、体裁を整えることができます。

[プラグイン]→[プラグイン編集]から、Wordpress Popular Postを選択。
編集するファイルとして、「wordpress-popular-posts/style/wpp.css」を選びます。

このファイルの中で、

.wpp-list li { /* LI – post container */
/*display:inline-block;*/ /* <– uncommenting this line is recommended when using post thumbnails */
float:none;
clear:left;
}

この部分に「border-top: 1px #999 dotted;」を足します。

.wpp-list li { /* LI – post container */
/*display:inline-block;*/ /* <– uncommenting this line is recommended when using post thumbnails */
border-top: 1px #999 dotted;
float:none;
clear:left;
}

こうすることで、投稿と投稿の間に点線を追加することができます。

続いて、写真がくっつかないようにしていきます。

/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:left;
margin:0 5px 0 0;
border:none;
}

この部分のmarginを全て5pxとします。

/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:left;
margin:5px 5px 5px 5px;
border:none;
}

これにより、写真が離れます。

出来上がったのがこんな感じ。
少し点線を加えたり、写真を話してあげるだけで、大分見やすくなりました。

wppopularpost_after

About 2310 273 Articles
日系損保、外資系コンサルティングファームを経て、2012年、結婚を機に夫婦で365日世界一周。その後、日本と世界をつないで楽しい世の中を創れないかと観光で起業。日々試行錯誤中。趣味は旅行と食べ歩き。世の中にちゃんと付加価値をうみだしていきたい。ワクワクする世界を創っていきましょう。

Be the first to comment

Leave a Reply

Your email address will not be published.