WordPress Popular Postsでサムネイル画像と文字がずれる時の対策【備忘録】

サイドバーに人気記事を表示するためのプラグイン『Wordpress Popular Posts』。これは非常に便利なプラグインで、多くの人が使用していると思いますが、恐らく人気記事表示系のプラグインの中でも最もポピュラーなものだと思います。

しかし、僕の場合、サムネイル画像をタイトルの横に表示させようとすると、なぜかタイトル文が画像の下に表示されてしまい、まったく綺麗に表示されない!

同じような悩みを持った人もたくさんいるようで、Googleで調べるといろんな解決法が出てくるのですが、そのいずれを試したところで全く改善されないんですね。

他のプラグインを使おうにもいいものが見当たらず、最後に試してみてダメだったら諦めようかと、半ば投げやりで色々な方の方法をミックスして試してみたところ、なんとか最低限の見た目まで持って行くことができました。

CSSの専門家ではないため、恐らくまったく綺麗なコードではありませんが、一応それなりの見た目になったということで、備忘録がてら、同じお悩みを抱える方の参考になればと思い、僕の設定を公開しようと思います。(ちなみにテンプレートは賢威6.1のコーポレートです)

wordpress popular posts

 photo credit: teamstickergiant via photopin cc

WordPress Popular Postsのウィジェットを編集

 

まずは『外観>ウィジェット』から編集していきましょう。ウィジェット画面で『WordPress Popular Posts』を選択し、表示したい場所に設置をしたら『編集』をクリックします。

wordpress popular posts

『サムネール設定』にチェックを入れ、適当に幅と高さを入力しましょう。

『統計タグ設定』は今回はすべてチェックを外しましたが、表示させたいものがあればチェックを入れましょう。

次に、『HTMLマークアップの設定』ですが、まず『カスタムHTMLマークを使う』にチェックを入れます。

そして、『投稿の前/後』の部分に、

『<div class=”wpp-parts”>』と『</div>』

をそれぞれ入力します。そして、その下の『投稿用HTMLマークアップ』には以下のコードを記述します。


これで、ひとまずウィジェットの設定は完了です。次にdesign.cssをいじっていきます。

 

design.cssを編集

 

『テーマ編集>design.css』に以下のコードを入力します。場所はどこでもいいですが、わかりやすくするため、一番下の『template created by web-rider』のすぐ上に記述します


 

これで当ブログの人気記事ランキングの完成です。文字の大きさを変えたいときは、『wpp-post-title』の『font-size』を、行の幅を変えたい時は同じ部分の『line-height』の数値を変更してみてください。

 

最後に

 

WordPress Popular Postsのカスタマイズは様々な方法が紹介されています。僕のブログの場合はそのどの方法を使っても駄目でしたが、今回紹介したカスタマイズで、無事にサムネイル画像の右隣に、それなりに綺麗にタイトルを表示させることができました。(画像の左隣の△マークを消すのにも苦労しました)

そのため、本記事で紹介した方法でうまくいかなかった場合は、また別のサイトさんの方法を色々と試してみてください。(テーマ編集をする際はバックアップを忘れないように!)

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でnozzieをフォローしよう!

記事公開日:2014年4月3日
最終更新日:2014年7月29日

無料メールマガジン

ネットビジネス




ネットビジネスで自由な人生を描くノジーのブログへ戻る

    
サブコンテンツ

このページの先頭へ