WordPress Popular Postsの表示崩れを簡単に直す方法

wordpress1

ワードプレス(以下WP)で
サイトを運営している人の多くは、
人気記事を自動で表示してくれる
プラグイン「WordPress Popular Posts」を
使っていると思います。

インストールして有効化するだけでOK。
後は集計期間やサムネイル表示などの
設定を行っていくのですが・・・

表示か崩れる
なんてこと、ありませんか?

今回の記事では、
WordPress Popular Postsの
表示崩れを簡単に直す方法

という内容をお届けしていきます。

表示崩れの症状について

こんにちは^^
管理人の鶴亀です。

僕は人気記事の一覧を
サイドバーと記事下に表示しています。

なぜこの2ヶ所なのかというと、
テンプレートの仕様によっては
サイドバーが記事下に表示されない

ということがあるからです。

僕が使っているテンプレート
Refine Pro:リファインプロ」は
デフォルトの設定だと記事下に
サイドバーが表示されません。

CSSをイジれば表示できるようですが、
サイトを壊してしまいかねないので…

安全策を取って、
プラグインで対応しています。

で!

サイドバーの表示は問題ないのですが、
記事下の人気記事表示が
こんな感じで崩れてしまったんです。

1

・・・。
めちゃくちゃカッコ悪い。

サムネイルのサイズを変更しても、
全く改善される様子がない。

ということでGoogle様で
WordPress Popular Posts 崩れる」の
「く」の字を入力した途端。

6

案の定というかなんというか、
表示崩れに悩んでいる人がいるんだな〜
ということがわかりました。

			
【スポンサードリンク】

表示崩れを簡単に直す方法

おそらく5分もあれば
この操作は完了すると思います。

WPの管理画面を開き、
インストール済みプラグインの
一覧画面に進みましょう。

「Wordpress Popular Posts」の
「編集ボタン」をクリック

2

右側のプラグインファイルにある
「wordpress-popular-posts/style/wpp.css」の
項目をクリック

3

CSS編集欄が開くので、
次のように書き換えます。

【変更前】
.wpp-list li { /* LI – post container */
/*display:inline-block;*/ /*
float:none;
clear:left;
}


【変更後】
.wpp-list li { /* LI – post container */
/*display:inline-block;*/ /*
overflow:auto;
display:block;
clear:both;
margin:10px 0;
border-bottom:1px dashed #666;
}


これで設定は完了です。
記事下の表示を見てみると、
表示着崩れが改善されています。

4

後はお好みに応じて、
サムネイルのサイズを変更すればOK

最後に

いかがだったでしょうか?
WordPress Popular Postsの
表示崩れを簡単に直す方法

という内容をお届けしてきました。

僕自身、こういうCSSの知識は
ほとんどないのですが・・・

ググって試行錯誤すれば
意外と何とかなるものですね。

スポンサードリンク

スポンサードリンク

コメントを残す