Wordpressの人気プラグイン　WordPress Popular Postsの使い方　縦の画像の間隔を広げる方法

WordPressの人気プラグイン　WordPress Popular Postsの使い方　縦の画像の間隔を広げる方法

2019年7月5日

ワードプレスの人気記事を表示する代表的なプラグインの紹介。

特に人気記事の画像と画像の間の間隔がくっついて気持ち悪かったので修正したかった。

プラグイン　wordpress popular posts　インストール

wordpressのプラグイン検索で「wordpress popular posts」を検索→インストール→有効化

スクリーンショット 2016-08-30 22.55.12

スクリーンショット 2016-08-30 22.55.24

インストール、設定の手順は下記サイトがわかりやすい。
参考
http://wp-navi.net/customize/wordpress-popular-posts/

サイドバーに公開した人気記事一覧
スクリーンショット 2016-08-30 22.33.42

画像と画像の間が繋がってちょっと嫌な感じ。
これをcssを使って線を入れて画像との間隔も開けていく。

スクリーンショット 2016-08-30 21.49.39

スクリーンショット 2016-08-30 21.49.51

インストール済みプラグインからWordpress Popular Postsの編集を選択。
wordpress-popular-posts/style/wpp.cssをクリックしてcssを変更する

.wpp-list li {
overflow:auto;
display:block;
float:none;
clear:both;
margin:0;
padding:10px 0;
border-bottom:1px dotted #aaa;
line-height:1.5;
}

.wpp-list li以下を変更する。

スクリーンショット 2016-08-30 22.33.57

画像と画像の間に線が入った。

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

marginの赤い部分を0→10pxに変更すると画像との間に間隔が開く。

スクリーンショット 2016-08-30 22.38.59

線も一緒に入るので最初のプログラムのborder-bottomを削除すると線が消える。

まだまだWordpressに慣れていないので手間取った。

以上、カスタマイズ方法終了。