横幅(width)に気を使おう。ぼくがブログテーマ作成時に気にしたこと

皆様こんにちは。とろあ( @tohroa )です。

昨日、ブログテーマの更新を適用しました。

適用後の記事で「細かいところに気を使って作りこんでいく」ということを書いたのですが、ぼくが今回のブログテーマ作成に際して気にした「細かいところ」を取り上げてご紹介していきたいと思います。

まず今回最初にお話したいのが width。つまり横幅です。

これは以前から気を使っている部分ですが、CSSで padding や margin と、width を併用すると想定より幅広になってしまうことがあります。

特にスマホでは閲覧自体に影響がでてくるのですが、詳しくはこちらの記事で詳しく解説されています。

参考：[Å] ぐらぐらデザインは嫌われる！スマホ用ブログを修正しました。 | あかめ女子のwebメモ

スマホでブログを読んでいると、時々このような記事に出会うのですが、結構読み辛いです。

対処方法として、padding や margin と width を使用する場合、box-sizing: border-box;を指定しておきましょう。

width に指定した幅が、padding と margin でした値を含んでくれるようになります。

(この時は逆に要素の幅が小さくなりすぎていないか確認しておいた方がいいですね)

広告の幅

また、CSSでの幅以外にも、広告の幅が大きすぎる場合も時々見受けられます。

スマホでもPC版をそのまま表示している場合は関係ないのですが。

スマホ用に別のページを用意している場合、画面の幅を考えて作成しないと広告だけ画面から飛び出してしまいます。

例えば幅320pxで作成しているページに、幅480pxの広告配置しているのを、たまーーに見かけたりします。

その広告のためだけに横幅が広がってしまっているのは、違和感を感じずにはいられません。

CSSのoverflow: hidden;を利用して横に移動しないようにすることも可能ですが、表示しきれず見えない部分があるので、これも良い対処とは思えません。

きちんと幅に収まる広告を使用するとか、Google AdSenseならレスポンシブ対応の広告なんかもあります。

画面幅にあった広告を配置するよう気を使いましょう。