こんにちはタコ３です。
レスポンシブWebデザインに対応しているテンプレートを使っていても、
サイドバーの画像の幅をしっかり設定していない人が多いです。
どういう事かというと、PCで見て画像がサイドバーからはみ出してなかったらOKとしているって事。
スマホの横幅は、機種によって違いますけど、
だいたい３２０ｐｘぐらい！
対して、ＰＣでみた時のサイドバーの横幅は、２００～２５０ｐｘぐらいです。
３カラムだったらもっと狭くなります。
ＰＣでみた時のサイドバーの横幅に画像を合わせてたら、
スマホで見た時に『小っさ！！』 ってなると思います。
それに、サイドバーに配置する画像１つ１つに幅を調節するのは面倒ですよね。
今回の設定をすれば、一括で幅を変換してくれるので、
１つ１つの画像をちまちま設定する必要はありません。
しかもスマホで見た時に画面の横幅いっぱいになります。
※画像のサイズより大きくなりません。
設定もとても簡単なので、是非やって下さい。
サイドバーの画像の幅を自動で変換するCSS
賢威では、
『外観』⇒『テーマの設定』⇒『design.css』
こちらを追記するだけで大丈夫です。
#sidebar img{
max-width:100%;
height:auto;
}
追記する場所はお好みなんですけど、
僕は、上の方のわかり易い場所に追記しています。
もし、サイドバーはサイドバーと、
まとまっていなくて気持ち悪いのでしたら、
サイドバーを検索して、記入して下さい。
めちゃめちゃ簡単なんですが、
画像の幅に悩まされるストレスが軽減されるので、
是非やって下さい。
サイドバーのカスタマイズはこちらにまとめています。
コメント