WordPress Poular Postsでサムネイルの横にキレイに文字を表示させる方法

スクリーンショット 2013 07 22 22 51 07  mini

ブログを訪問していただいた方にもう1記事読んで欲しいということで、WordPressのプラグインでPoular Postsを設置していました。ただ、導入しただけではサムネイルの横に綺麗にタイトルが並んで表示されません。

こんな時のGoogle先生!
CSSをちょっといじってやると、綺麗にタイトルが回りこんで表示されるようになるとの事。
ただし、ちょっとつまずいた点もあったので忘備録として記事にしておこうと思います。

Poular Postsのタイトル回り込みのCSS設定

参考にさせてもらったのは、@yume_pyonさんのブログです。

【WordPress】サムネイルつき人気記事一覧!Popular Postsプラグイン | ゆめぴょんの知恵

Poular Postsとは何?というところから、タイトル回り込みのCSS設定に関してまで分かりやすく解説されています。詳しくはこちらのブログを参照お願いしますw

そこで、解説されていた通り私も下記コードをwpp.cssに追記してみました。

[css]
#wpp-2 ul li {
height:90px;
}
#wpp-2 ul img {
float:left;
margin-right:5px;
}
[/css]

本来であれば、これでカッコ良く表示されるはずなんですが

スクリーンショット 2013 07 22 21 28 50  mini

はい、崩れまくりです!
何度やっても、何も変化なし。なんでだろーなんでだろー♫

ゆめぴょんさんのブログをもう一度読み直しました。そしたら

それでもうまく表示されない場合は、自分の環境によって数値を変えて下さい。テーマによってはスタイルシートを自作する必要があるかもしれません。

とありました。

そこで、Chromeで「要素の検証」を使って確認してみたところ

スクリーンショット 2013 07 22 22 22 28  mini 1

リストのidが「wpp-5」になっています。そうです、先ほど追記したコードでは「#wpp-2」と指定して居ましたが「自分のブログに合わせて数値を変更」し「#wpp-5」と記載しなければいけなかったようです。

CSSを自分の環境に合わせて修正

「#wpp-2」の部分を「#wpp-5」へ修正します。

[css]
#wpp-5 ul li {
height:90px;
}
#wpp-5 ul img {
float:left;
margin-right:5px;
}
[/css]

保存して、ブログを更新してみると・・・

スクリーンショット 2013 07 22 21 31 45  mini

きたーーー!タイトルがキレイにサムネイルの横に並んでいます。

スクリーンショット 2013 07 22 21 31 45  mini 2

更にリスト表示の「点」が気になるので「list-style : none;」を更に追記しました。

[css]
#wpp-5 ul li {
height:90px;
list-style : none;
}
#wpp-5 ul img {
float:left;
margin-right:5px;
}
[/css]

そうすると
スクリーンショット 2013 07 21 22 01 40  mini

はい!出来上がりw

まとめ

実は、Poular Postsを設定してから1ヶ月以上経っていますが自分のブログに合わせてid名を確認し合わせないといけないというのを気がついたのは、つい最近です・・。ゆめぴょんさんのブログにはきちんと「合わせてね」と書いてあるのに。

でも、今回の試行錯誤でチョット勉強になりました。WordPressのカスタマイズ楽しくなってきた〜。

コメント

タイトルとURLをコピーしました