見て触れて感じて、わがままに生きる。
会社の嫌な人間関係からサヨナラし、毎日目覚まし時計いらずのわがまま生活を手に入れる第一歩をメール講座にて配信中!まずは焦らず10万円からスタート。それをキッカケにわがままに生きるライフスタイルで「見たことない景色」をみよう。
ブログカスタマイズ

スマホ表示とPC表示の画像の大きさを自動で最適表示させる方法

どうもshinyaです。

 

現在はインターネットの閲覧のほとんどが

スマホになってきましたね。

 

さて、サイト運営していくと、PCでサイトを

しっかり整えたとしてもスマホで自分のサイトを

見ると「えっ?」みたいなこともよくあります。

 

今回でいうと、画像のサイズです。

 

PC用にうまく画像の大きさを調節して表示

させていたとしても、スマホで見ると

そのままデカく表示されていたりすることが

あります。

 

このままにしておくと画像サイズに画面が

合わせてしまう為、ユーザビリティが下がります。

 

そこで今回この問題の超簡単な方法をお伝えしていきます。

 

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

 

実は特に手順があるわけでもなく、

CSSに下記をコピーして貼り付けるだけです。

 

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

 

超簡単です。

 

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

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

 

これで、しっかり、スマホで見ても画像の

大きさが自動で最適化され表示されます。

 

スマホで自分のサイトを見たときに画像が

大きすぎてどうすれば良いかわからない人は

是非こちらをお試しください。

【当サイト訪問者様へ今なら初心者用アフィリエイト教科書を無料プレゼント中!】

入手される場合は下記をバナーをクリック!※ダウンロード者数4500名突破! コンテンツバナー