ワードプレスで投稿に使う画像を、スマホ表示とPC表示で大きさを自動的にサイズ調整してくれる簡単設定方法(＾＾)

現在ブログの閲覧は何が主流ですか？パソコンとスマホを比べると、2020年のデータによると内容にもより変動はありますが

　スマホ（62%） パソコン（33%） タブレット（５%）

というデータも出ています。

 

さて、ブログを書いていくと、PCでサイトをしっかり整えたとしてもスマホで自分のサイトを見ると「えっ？画像が・・・汗」みたいなこともよくあります。僕も実際にそうでした。

 

今回でいうと、画像のサイズです。PC用にうまく画像の大きさを調節して表示させていたとしても、スマホで見るとそのままデカく表示されていたりすることあります。

このままにしておくと画像サイズに画面が合わせてしまう為、ユーザビリティが下がります。そこで実際に僕が役に立った超簡単に対応できる方法をお伝えしていきます。

スマホの大きさに画像を最適表示する方法

実は特に手順があるわけでもなく、プラグインをダウンロードするわけでもなく、テーマの外観を設定するわけでもないです。

 

ボク自身、またプラグイン入れないといけないのかなとか投稿する際にカスタムしないといけないのかなと思っていましたが、実はもっと簡単な方法でした。

 

それは、

 

 

/* 画像サイズ最適表示 */
img {
max-width: 100%;
height:auto;
}

 

 

超簡単でしょ。

CSSのどこにいれるかわからない人は、

一番下に貼り付ければOKです！

 

CSSがどこにあるかわからない方はここです↓

左側メニューの外観→カスタマイズ→追加CSSです。
ボクの場合は、テーマ≪LIONBLOG≫を使っていますので、カスタマイズの中の一番下の方にあります。

 

 

これで、しっかり、スマホで見ても画像の大きさが自動で最適化され表示されます。スマホで自分のサイトを見たときに画像が大きすぎてどうすれば良いかわからない人や、画像が縦長になるんだけどと困っている方は、

是非こちらをお試してみてください。最後までご覧いただきありがとうございました。

 

 

 

今からブログを始める方はエックスサーバーが便利です。ボク自身もこれで始めました。

ブログの始め方はこちらでご紹介しています。よかったらどうぞ→