編集画面ではきれいに見えている写真が、
実際に訪問者に見ていただく画面ではすごく小さくて見づらい！
なんてことはありませんか？
今回は画像が小さくならないようにする方法をご紹介します。
発生事象
WordPressで画像をアップすると、1つの画像につき大小さまざまなサイズの画像が作成されます。
ブラウザがchromeのときに、レスポンシブ対応のページを表示すると、
自動的に一番小さなサイズの画像が表示されてしまい、このような事象が発生するようです。
chromeの場合
Edgeの場合
上の写真は同じページをchromeとedgeで見たものですが、
chromeでは画像がとても小さく、見えづらいですね。
対応方法
少し手間な方法ですが、
画像を挿入した後、画像に対してcssで画像サイズを設定することで画像を大きく表示させることができます。
.fwimg { width: 100%; }
＜img class="fwimg alignnone size-full wp-image-4835" src="画像URL" alt="画像非表示時に表示する文字" width="900" height="815" /＞
上記CSSは、外観＞テーマエディター＞style.cssに追加しておき、
各記事のテキスト編集画面で、imgタグにfwimgを追加することで
画像を大きく表示させることができます。
設定後画面
上述のclassを1つ目の画像に設定し、再度chromeで表示させてみると、
画像が大きく表示されました！
※2つ目の画像は横幅にあわせたくなかったため、中央揃えにしたのみで、class設定はしていません。
まとめ
ブラウザによって表示が変わるのは困ったものですね。
すべてのブラウザを入れて確認するのが一番いいですが、
なかなかそこまでは時間がない！という方がほとんどだと思います。
そして、見ていただく方がどのブラウザを使われているかは決めることができません。
できるだけ皆さんに「このサイト、見づらくていやだなぁ」と思われないように工夫したいものですね。
