Jetpack のリスト画像は小さいと感じるので WordPress Popular Posts
「人気の投稿とページ」のリストを表示してくれるプラグインを WordPress Popular Posts 4.0.13 に切り替えてみました。今後の表示の設定、カスタマイズに役立てたいのでそのときの内容を備忘録しておこうと思います。
「人気の投稿とページ」というデフォルトのタイトルで指定したリストを作成し、表示してくれる Jetpack のウィジェット。

Jetpack のインストールと同時に Jetpack の統計集計機能をONにしていると、ページごとにカウントしたアクセス数に関する統計情報と連動して、
- テキスト
- 画像+テキスト
- 画像
の3つの仕様でリストを表示してくれますね。
私なりにサイトを見てくれる人へのアピール性とレイアウトのバランスを考えて、画像+テキストの仕様でリストを表示してきたのですが、この画像のサイズが40 x 40px。アイキャッチ画像の縮小版を表示してくれているのにアイキャッチにならない! という感じがするくらい小さい感じです。
そこで、リストに表示する画像のサイズを指定して調整できるという WordPress Popular Posts 4.0.13 を導入して、画像をサイズアップしました。
Jetpack にはサムネイルのサイズを変更するアドバイス
How to change the size of the thumbnails in the Top Posts widget
がありますが、プラグインを追加することによるシステム上のオーバーヘッドを考えても、より直感的に操作することはできないものかと考えました。
WordPress Popular Postsで表示するリストのレイアウトデザイン

このスナップショットは WordPress Popular Posts の設定画面の一部です。
アイキャッチ画像を表示 を選べば 画像+タイトル の組み合わせになります。このとき気をつけなくてはいけないのは、
- 既定のサイズから選ぶ
- サイズを手動で設定
のどちらを選んでも、画像とタイトルの配置レイアウトは同じだと言うこと。
リスト <ul> <li> … </li> </ul> とうお馴染みのリスト形式で表示しようとしますので、画像+タイトル という横一列のレイアウトがデフォルトです。
私のページの「人気の投稿とページ」のリストの画像を大きくしていくと、タイトルの表示を開始する位置が画像のサイズに合わせて右へ移っていき、テキストの折り返し幅もそれに合わせて短くなります。
画像幅が表示幅と同じになるとタイトルの表示を開始する位置は画像の下になる… そういうレイアウト設定がデフォルトです。

統計タグの設定 をONにすると表示はどうなるか
- 閲覧数を表示
- 投稿者を表示
- 日付を表示
の3つを表示してみると、”|” (パイプ)でつないだ形式で1行にレイアウトされることが分かります。
画像と画像の間のスペース調整などは別に設定が必要
プラグインを切り替えて画像をサイズアップしただけですが、私のページは上記の3つのオプションもまっすいもOFFになっているということも含めて、デフォルト設定のままだということが分かるかと思います。
ということは、
- 画像と画像の間にスペースを入れてゆったりとレイアウトしたいとか
- タイトルテキストの前の ○ を表示させたくない
というようなカスタマイズを希望するのであれば、さらに追加の設定が必要になります。
(ちょっと手が込んだ調整になるので、続きは別の記事にまとめます)
プラグイン
リストの画像をどうしたら大きくできるか… からはじめて、今回あれやらこれやら調べては試してみると…
小さいと感じていた Jetpack のリスト画像(40 x 40px)はリサイズしてから表示しているということが分かってきました。
つまり、あとからCSSでサイズアップしようとすれば画像はぼけて使えないということ。
片や WordPress Popular Posts というと、画像サイズの設定はバリエーション豊かにできるようですが、それに対応したレイアウトの変更は(プラグインからは)できない。
つまり、Jetpack にはJetpack の、Wordpress Popular Posts にはWordpress Popular Posts の表示デザインというのがある程度決まっているというも分かってきたのです。
これはどういうことか??
ウィジェットに表示する「人気の投稿とページ」のリストに、レイアウトや書式など多くを求める人が少ないということのようにも思うのです。
プラグインだけに頼れないとなればCSSやphpといったテーマの然るべき設定に手を付けることになるのかな? と思いますが、まずはあわてず、それぞれの機能を十分に学習することからです。