「WordPress Popular Posts」サムネイル画像をレスポンシブ表示する方法。CSSカスタマイズ(%)で、画像を横幅いっぱいに表示するとスッキリ綺麗！【WordPressプラグイン】

～求めているもの、欲しいもの～

「WordPress Popular Posts」で、サイドバーの横幅いっぱいに画像を表示したい。
どのデバイス（PC、スマホなどの機器のこと）でも同じようにタイトル、画像を表示したい。
文字の行を狭めたい。

というあなたに、CSSカスタマイズ方法を紹介します！
成功すれば、このようにサイドバーの横幅が微妙に変わっても、綺麗に画像が表示されます。↓
　　　
WordPressプラグイン「WordPress Popular Posts」の設定方法・使い方は、こちらの記事を参考にしてください。↓

全てのデバイスで、画像を横幅いっぱいに表示したい。でも画像はpixel単位で固定されるから上手くいかない。
CSSを編集して、画像をレスポンシブ対応に、タイトルを常に画像の下に表示させる。
「カスタムHTMLマークアップ」を使用し、CSSを編集する方法
まとめ：人気記事は見た目が大事

全てのデバイスで、画像を横幅いっぱいに表示したい。でも画像はpixel単位で固定されるから上手くいかない。

～こんな悩みがあるんです～

人気記事をランキング表示したい。
そこで、WordPressプラグイン「WordPress Popular Posts」を導入した。
PCで確認すると、サイドバーにサムネイル付きでランキング表示されてる！
でもスマホで確認すると、画像が切れたり、小さく表示されてよく見えない。
設定を変えても、どうにも画像サイズが安定しない。。

人気記事をランキング表示できる「WordPress Popular Posts」は、とても便利ですよね。
でも、サムネイル画像がレスポンシブ対応していないんです。
ユーザーは、いろいろなデバイスを使っています。
PCにしても、ディスプレイのサイズは違います。
スマホだって、5inch、6inchとサイズは違います。
しかもデバイスによってちょっとずつ、微妙にディスプレイの横幅が違うんです。
これが問題を起こしています。
「WordPress Popular Posts」は色々設定ができますが、ここでは以下を前提に考えます。

ランキング記事は、画像+タイトルで表示する。
サイドバーの横幅、記事を表示するディスプレイの横幅は、デバイスによって微妙に変わる。
画像サイズはpixel単位で指定される。
ランキング記事のタイトルは、「（サイドバーの横幅orディスプレイ横幅）から（画像横幅）を引き算したスペース」で表示される。

これらの条件により、あるデバイスで適切に画像が表示されても、別のデバイスでは見にくくなってしまいます。
例えば、以下が上手くいっていない事例です。

タイトルが短いため、３つ目と４つ目の画像がくっついて表示されています。
サムネイル画像も小さいため、はっきり見えません。↓
画像の下にタイトルが回り込み、読みにくいです。↓
画像右側に余白ができてしまい、画像が小さく表示されてしまいます。↓
画像の右側に、タイトルが何行もあって読みずらいです。
画像下にタイトルが一部回り込み、タイトルの一部だと認識できません。↓
デバイスの幅が狭いため、画像が切れています。↓
デバイスの幅が狭いため、画像がかなり切れています。↓

このように、横幅がデバイスごとに異なります。
その結果、タイトルか画像のどちらか、下手をすると両方とも、見づらくなっています。
色々なユーザーがいることを考えれば、常にタイトル、画像が最適な位置に表示されるようにしたいですよね。

CSSを編集して、画像をレスポンシブ対応に、タイトルを常に画像の下に表示させる。

～おすすめの解決する方法～

対策として、ウィジェット画面の「WordPress Popular Posts」の「カスタムHTMLマークアップ」を使用し、CSSを編集します。
目的とする表示スタイルは、以下になります。

全てのデバイスで、画像は横幅いっぱいに表示する。
サイドバーに画像を表示する場合は、サイドバーの横幅いっぱいに表示する。
記事と記事の間に適切な幅を持たせる。
画像を少し目立たせるために、影をつける。
タイトルは画像の右側ではなく、画像の下に表示する。
タイトルの行間を適切なサイズに調整する。

完成図はこのようになります。↓

「カスタムHTMLマークアップ」を使用し、CSSを編集する方法

「WordPress Popular Posts」の管理画面で設定する

まず、「WordPress Popular Posts」の管理画面の設定をします。
「管理画面メニュー」→「外観」→「ウィジェット」をクリックします。
「WordPress Popular Posts」の管理画面の「ツール」をクリックします。
「迅速なサポート（Responsive support）」を「無効」にします。
「適用」をクリックします。↓

「カスタムHTMLマークアップ」を使用する方法

「カスタムHTMLマークアップ」を使用します。
「管理画面メニュー」→「外観」→「ウィジェット」をクリックします。
ウィジェットにある「WordPress Popular Posts」を開きます。
サムネイル表示をするようにします。
「投稿の設定」の「投稿のサムネイルを表示する」にチェックをします。
「定義済みのサイズを使用してください。」を選択します。
サムネイルサイズは好きなサイズを選択します。
①「HTMLマークアップの設定」にある、「カスタムHTMLマークアップを使用する」にチェックを入れます。
②「保存」をクリックします。↓

①「Popular Postsの前 / 後: 」に、以下のコードを入力します。
入力済みなら、そのままにします。

<ul class="wpp-list">
</ul>

②「投稿のHTML マークアップ: 」に、以下のコードを入力します。

<div class=wpp-container>
<div class=wpp-img>{thumb}</div>
<p>{title}</p>
</div>

③全て入力したら、「保存」をクリックします。↓

これで、「カスタムHTMLマークアップ」を使用するようになりました。

CSSを編集する方法

子テーマを編集します。
「管理画面メニュー」→「外観」→「テーマの編集」をクリックします。
子テーマの「スタイルシート(style.css)」をクリックします。
子テーマにCSS（スタイルシート）を設定する方法は、こちらの記事を参考にしてください。↓

「WinSCP」親テーマの任意のファイルを子テーマで編集する方法【STINGER PLUS+】

CSSの一番下に以下のコードをコピペします。
全体装飾をする、などの指示があるCSSは、全体装飾をする部分にコピペします。

/* ------------------------------
WordPressプラグイン「WordPress Popular Posts」
------------------------------ */
/* 画像サイズ　レスポンシブ対応 */
.wpp-img img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0px 0px 5px 0px;
box-shadow: 0 2px 5px #999;
}
/* 行の幅　縮める */
.wpp-container {
line-height: 1.1em;
margin: 0px 0px 20px 0px;
}

/* 画像サイズ　レスポンシブ対応 */

max-width: 100%;　…画像をレスポンシブ対応にします。
width: 100%;　…サイドバーの横幅より画像サイズが小さい場合、横幅に合わせて画像サイズを拡大します。
margin: 0px 0px 5px 0px;　…画像とタイトルの下の幅です。より幅を大きくする場合は「5px」の数値を変更します。
box-shadow: 0 2px 5px #999;　…画像の影です。影の大きさを変更するには「2px」「5px」の数値を変更します。

/* 行の幅　縮める */

line-height: 1.1em;　…タイトルの行間です。行と行の幅を広げる場合は、「1.1em」の数値を変更します。
margin: 0px 0px 20px 0px;　…記事と記事の幅です。記事の幅を広げる場合は、「20px」の数値を変更します。

まとめ：人気記事は見た目が大事

おすすめの人気記事が見にくいと、もったいないですよね。
綺麗にデザインして、人気があることを視覚的にアピールしましょう！
以上、
「WordPress Popular Posts」サムネイル画像をレスポンシブ表示する方法。CSSカスタマイズ(%)で、画像を横幅いっぱいに表示するとスッキリ綺麗！【WordPressプラグイン】
でした。
お疲れ様でした(^^♪