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

こんにちはタコ３です。

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

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

スマホの横幅は、機種によって違いますけど、
だいたい３２０ｐｘぐらい！

対して、ＰＣでみた時のサイドバーの横幅は、２００～２５０ｐｘぐらいです。
３カラムだったらもっと狭くなります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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