スマホ表示とPC表示の画像の大きさを自動で最適表示させる方法
どうもshinyaです。
現在はインターネットの閲覧のほとんどが
スマホになってきましたね。
さて、サイト運営していくと、PCでサイトを
しっかり整えたとしてもスマホで自分のサイトを
見ると「えっ？」みたいなこともよくあります。
今回でいうと、画像のサイズです。
PC用にうまく画像の大きさを調節して表示
させていたとしても、スマホで見ると
そのままデカく表示されていたりすることが
あります。
このままにしておくと画像サイズに画面が
合わせてしまう為、ユーザビリティが下がります。
そこで今回この問題の超簡単な方法をお伝えしていきます。
スマホの大きさに画像を最適表示する方法
実は特に手順があるわけでもなく、
CSSに下記をコピーして貼り付けるだけです。
/* 画像サイズ最適表示 */
img {
max-width: 100%;
height:auto;
}
超簡単です。
CSSのどこにいれるかわからない人は、
一番下に貼り付ければOKです！
これで、しっかり、スマホで見ても画像の
大きさが自動で最適化され表示されます。
スマホで自分のサイトを見たときに画像が
大きすぎてどうすれば良いかわからない人は
是非こちらをお試しください。
【当サイト訪問者様へ今なら初心者用アフィリエイト教科書を無料プレゼント中！】
入手される場合は下記をバナーをクリック！※ダウンロード者数4500名突破！
【当サイト訪問者様へ今なら初心者用アフィリエイト教科書を無料プレゼント中！】
入手される場合は下記をバナーをクリック！※ダウンロード者数4500名突破！
この記事を読んだ方はこちらの記事も読んでいます
埋め込み動画を超簡単にレスポンシブ対応（横幅自動最適表示）にする方法
サイト記事コピー防止プラグインWP-CopyProtectの導入と設定方法
自分のサイトのブラウザタブ表示名を変更するやり方
Dropboxとは？ダウンロードと使い方の動画解説
GOMプレイヤーのインストール方法、使い方とよく使うショートカットキー
ミクシィがXFLAG（エックスフラッグ）設立！モンスト力でいよいよブランディング開始
初心者でもわかるアフィリエイトの始め方（手順）
seesaaブログの登録方法とアドセンス審査の為の初期設定
センターズオブインフルエンスマーケティングとは？実践するために必要なこと
コンサル生の堤さんが月収23万円を達成しました！
マーケティングファネルの意味とDRMにおける使い方
【コピーライティング】見込み客の問題意識レベル～OATHの法則～
トレンドアフィリエイト講座【キーワード選定・応用編】
Googleアナリティクスの初心者が覚えるべき4つの使い方
コンサル生の宮崎さんが月収10万円を達成しました！
