サイドバーの画像の幅を自動で変換してレスポンシブWebデザイン対応へ

こんにちはタコ3です。

レスポンシブWebデザインに対応しているテンプレートを使っていても、
サイドバーの画像の幅をしっかり設定していない人が多いです。

どういう事かというと、PCで見て画像がサイドバーからはみ出してなかったらOKとしているって事。

スマホの横幅は、機種によって違いますけど、
だいたい320pxぐらい!

対して、PCでみた時のサイドバーの横幅は、200~250pxぐらいです。
3カラムだったらもっと狭くなります。

PCでみた時のサイドバーの横幅に画像を合わせてたら、
スマホで見た時に『小っさ!!』 ってなると思います。

それに、サイドバーに配置する画像1つ1つに幅を調節するのは面倒ですよね。

今回の設定をすれば、一括で幅を変換してくれるので、
1つ1つの画像をちまちま設定する必要はありません。

しかもスマホで見た時に画面の横幅いっぱいになります。
※画像のサイズより大きくなりません。

設定もとても簡単なので、是非やって下さい。

サイドバーの画像の幅を自動で変換するCSS

賢威では、
『外観』⇒『テーマの設定』⇒『design.css』

keni

こちらを追記するだけで大丈夫です。

#sidebar img{
	max-width:100%;
	height:auto;
}

追記する場所はお好みなんですけど、
僕は、上の方のわかり易い場所に追記しています。

もし、サイドバーはサイドバーと、
まとまっていなくて気持ち悪いのでしたら、
サイドバーを検索して、記入して下さい。

めちゃめちゃ簡単なんですが、
画像の幅に悩まされるストレスが軽減されるので、
是非やって下さい。

サイドバーのカスタマイズはこちらにまとめています。

⇒サイドバーカスタマイズまとめ

【0⇒1を目指す初心者講座】 top23 0514
サブコンテンツ

このページの先頭へ