おすすめ方法.com

【おすすめ】をリサーチ・比較、【方法】を分析・紹介するサイト

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

time 2016/07/14

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

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

1.「WordPress Popular Posts」サイドバー表示1 2.「WordPress Popular Posts」サイドバー表示2 3.「WordPress Popular Posts」サイドバー表示3 4.「WordPress Popular Posts」サイドバー表示4

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

sponsored link

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

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

人気記事をランキング表示できる「WordPress Popular Posts」は、とても便利ですよね。
でも、サムネイル画像がレスポンシブ対応していないんです。

ユーザーは、いろいろなデバイスを使っています。
PCにしても、ディスプレイのサイズは違います。
スマホだって、5inch、6inchとサイズは違います。
しかもデバイスによってちょっとずつ、微妙にディスプレイの横幅が違うんです。
これが問題を起こしています。

「WordPress Popular Posts」は色々設定ができますが、ここでは以下を前提に考えます。

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

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

  • タイトルが短いため、3つ目と4つ目の画像がくっついて表示されています。
    サムネイル画像も小さいため、はっきり見えません。↓
    5.「WordPress Popular Posts」サイドバー表示5
  • 画像の下にタイトルが回り込み、読みにくいです。↓
    6.「WordPress Popular Posts」サイドバー表示6
  • 画像右側に余白ができてしまい、画像が小さく表示されてしまいます。↓
    7.WordPress Popular Posts Sidebar display 7
  • 画像の右側に、タイトルが何行もあって読みずらいです。
    画像下にタイトルが一部回り込み、タイトルの一部だと認識できません。↓
    8.「WordPress Popular Posts」サイドバー表示8
  • デバイスの幅が狭いため、画像が切れています。↓
    9.「WordPress Popular Posts」サイドバー表示9
  • デバイスの幅が狭いため、画像がかなり切れています。↓
    10.「WordPress Popular Posts」サイドバー表示10

このように、横幅がデバイスごとに異なります。
その結果、タイトルか画像のどちらか、下手をすると両方とも、見づらくなっています。

色々なユーザーがいることを考えれば、常にタイトル、画像が最適な位置に表示されるようにしたいですよね。

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

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

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

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

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

1.「WordPress Popular Posts」サイドバー表示1

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

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

まず、「WordPress Popular Posts」の管理画面の設定をします。

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

11.「WordPress Popular Posts」の管理画面「迅速なサポート(Responsive support)」を「無効」にする

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

「カスタムHTMLマークアップ」を使用します。

「管理画面メニュー」→「外観」→「ウィジェット」をクリックします。
ウィジェットにある「WordPress Popular Posts」を開きます。

サムネイル表示をするようにします。
「投稿の設定」の「投稿のサムネイルを表示する」にチェックをします。
「定義済みのサイズを使用してください。」を選択します。
サムネイルサイズは好きなサイズを選択します。

①「HTMLマークアップの設定」にある、「カスタムHTMLマークアップを使用する」にチェックを入れます。
②「保存」をクリックします。↓

12.「カスタムHTMLマークアップを使用する」にチェックを入れます

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

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

 

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

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

 

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

13.「HTML マークアップ」にコードを入力する

これで、「カスタム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;
}

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

  • 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プラグイン】
でした。

お疲れ様でした(^^♪

sponsored link

down

コメントする






sponsored link

カテゴリー

読者が読んでる人気記事