いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
medium_4800938997.jpg
photo credit: Bert Kaufmann via photopin cc

皆様こんにちは。とろあ( @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ならレスポンシブ対応の広告なんかもあります。

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

当ブログが気になったら…是非RSSにご登録ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です