はてなブログで横幅を拡大するときはfooterも忘れずに

メモ

全部の公式デザインテーマで共通なのかどうかは知らないが、とりあえず自分がいま使ってるReportというデザインテーマの場合。

#container {
  width: 855px; /*変更前810px*/
}
#wrapper {
  width: 605px; /*変更前560px*/
}
#footer {
  width: 875px; /*変更前830px*/
}

という感じで横幅を広げた。いろいろな環境を考慮した結果、ちょっとしか広げられなかったけどまあいいや。注意すべきは#footerの横幅を合わせるのを忘れないこと。自分はブラウザの背景色を変えているので気が付いたけど、背景色が同じだと気が付かない。

このテーマの場合、元のpaddingの値が#containerと#footerで違っていたので上記のような感じになったけど、気持ち悪かったらpaddingも変えてwidthの数値を#containerと一緒にすればいいんじゃないかな。

#container {
  width: 855px; /*変更前810px*/
}
#wrapper {
  width: 605px; /*変更前560px*/
}
#footer {
  width: 855px; /*変更前830px*/
  padding: 10px 30px; /*変更前は左右が20px*/
}

こんな感じか。

はてなブログに実施した、4つのデザインカスタマイズ - Banguardサイト

ホットエントリー入りしたのでこの記事を参考にして横幅を広げた方も多いかもしれないが、この方のブログも#footerを広げ忘れていて、一番下だけ狭くなっている。横幅の拡大をした方は一応御自身のブログを確認した方が良いだろう。

まあ、大多数の人はブラウザの背景色なんて変えていないだろうし、逆にブラウザの背景色を変えている人はこういうboxのズレは見慣れているので、どうでもいいといえばどうでもいいんだけどね。んでも一応、背景色を指定したboxは気にした方がいいだろう。

http://cdn-ak.f.st-hatena.com/images/fotolife/l/llil/20131101/20131101161222.png

おわり