- 「WordPress Popular Posts」で、サイドバーの横幅いっぱいに画像を表示したい。
- どのデバイス（PC、スマホなどの機器のこと）でも同じようにタイトル、画像を表示したい。
- 文字の行を狭めたい。
というあなたに、CSSカスタマイズ方法を紹介します！ 人気記事をランキング表示できる「WordPress Popular Posts」は、とても便利ですよね。 これらの条件により、あるデバイスで適切に画像が表示されても、別のデバイスでは見にくくなってしまいます。 このように、横幅がデバイスごとに異なります。 対策として、ウィジェット画面の「WordPress Popular Posts」の「カスタムHTMLマークアップ」を使用し、CSSを編集します。 完成図はこのようになります。↓ まず、「WordPress Popular Posts」の管理画面の設定をします。 「カスタムHTMLマークアップ」を使用します。 子テーマを編集します。 おすすめの人気記事が見にくいと、もったいないですよね。
成功すれば、このようにサイドバーの横幅が微妙に変わっても、綺麗に画像が表示されます。↓
WordPressプラグイン「WordPress Popular Posts」の設定方法・使い方は、こちらの記事を参考にしてください。↓
全てのデバイスで、画像を横幅いっぱいに表示したい。でも画像はpixel単位で固定されるから上手くいかない。
そこで、WordPressプラグイン「WordPress Popular Posts」を導入した。
PCで確認すると、サイドバーにサムネイル付きでランキング表示されてる！
でもスマホで確認すると、画像が切れたり、小さく表示されてよく見えない。
設定を変えても、どうにも画像サイズが安定しない。。
でも、サムネイル画像がレスポンシブ対応していないんです。
ユーザーは、いろいろなデバイスを使っています。
PCにしても、ディスプレイのサイズは違います。
スマホだって、5inch、6inchとサイズは違います。
しかもデバイスによってちょっとずつ、微妙にディスプレイの横幅が違うんです。
これが問題を起こしています。
「WordPress Popular Posts」は色々設定ができますが、ここでは以下を前提に考えます。
例えば、以下が上手くいっていない事例です。
サムネイル画像も小さいため、はっきり見えません。↓
画像下にタイトルが一部回り込み、タイトルの一部だと認識できません。↓
その結果、タイトルか画像のどちらか、下手をすると両方とも、見づらくなっています。
色々なユーザーがいることを考えれば、常にタイトル、画像が最適な位置に表示されるようにしたいですよね。CSSを編集して、画像をレスポンシブ対応に、タイトルを常に画像の下に表示させる。
目的とする表示スタイルは、以下になります。「カスタムHTMLマークアップ」を使用し、CSSを編集する方法
「WordPress Popular Posts」の管理画面で設定する
「管理画面メニュー」→「外観」→「ウィジェット」をクリックします。
「WordPress Popular Posts」の管理画面の「ツール」をクリックします。
「迅速なサポート（Responsive support）」を「無効」にします。
「適用」をクリックします。↓
「カスタム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（スタイルシート）を設定する方法は、こちらの記事を参考にしてください。↓
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;
}/* 画像サイズ レスポンシブ対応 */
/* 行の幅 縮める */
まとめ：人気記事は見た目が大事
綺麗にデザインして、人気があることを視覚的にアピールしましょう！
以上、
「WordPress Popular Posts」サムネイル画像をレスポンシブ表示する方法。CSSカスタマイズ(%)で、画像を横幅いっぱいに表示するとスッキリ綺麗！【WordPressプラグイン】
でした。
お疲れ様でした(^^♪
コメント