このブログをモバイル端末で閲覧してくださっていた方には既知かも知れませんが、右側に謎の余白が空いていて「あー気持ち悪いなー」と思いながらも、CSSのマージンやパディングをいじっても何も変わらなかったので放置したままでした。
ある日サイトを徘徊していたらピンとくるものがあったので、試してみたら一発で解決してしまい、今までの苦労は何だったのだろうという感じです。
そんなこんなで結局解決に至ったので、使ったサイトと対策方法をご紹介します。
謎の空白…CSSに一撃必殺！
本当にこんな簡単でいいのか、と言う感じですがCSSに一文加えるだけです。
簡潔に言えば、
#wrapper に overflow: hidden; をぶち込む
だけでした。参考サイト：memopad
結論から書いてしまいましたが、#wrapperが見当たらないという方は#containerな場合があります。好みで分かれているというだけで、使い方に大きな違いはありません。
で、この追記したoverflow: hidden;は何なのかというと「ボックスからはみ出たときは、はみ出た部分を表示させない」という命令です。Webデザインの話だけで本を出版できてしまうくらいですから、Webのレイアウトは相当難しいと思います。
同じことで困っている方がおられましたらぜひご活用下さい。ちなみにこのブログはWordpressでstinger7をカスタマイズしたものを使用させていただいています。
