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

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

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

というあなたに、CSSカスタマイズ方法を紹介します！
成功すれば、このようにサイドバーの横幅が微妙に変わっても、綺麗に画像が表示されます。↓

WordPressプラグイン「WordPress Popular Posts」の設定方法・使い方は、こちらの記事を参考にしてください。↓

[blogcard url=”https://re-means.com/wordpress-popular-postsbounce-rate-decreased-in-popularity-article-rankings-how-to-increase-the-valu/”]

全てのデバイスで、画像を横幅いっぱいに表示したい。でも画像は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（スタイルシート）を設定する方法は、こちらの記事を参考にしてください。↓[blogcard url=”https://re-means.com/how-to-edit-a-child-theme/”]

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;
}