横スクロールバーが勝手に表示されて困ってしまう時

アメブロカスタマイズのわざめーばです。

こんにちは。

以前からHTML構造やCSSの設定が勝手にコロコロ変わって追随するのが大変なことの多いアメブロですが、少し前のCSSの変更で、今まで表示されていなかった横スクロールバーがブラウザ下部に表示されて困っているとのお問い合わせを複数いただきましたので、解消方法をシェアしておきたいと思います。

CSSを編集しますので、一応カスタマイズの一つとしてご紹介します。

対象となる現象は、アメブロの新しいタイプのスキン(CSS編集用デザイン等)を使用しているアメブロで、記事冒頭の画像のように、ブラウザの表示幅を狭めていくと、

『まだ左側に余裕があるはずなのに』
 ある位置より左に寄らなくなって、
 下側に横スクロールバーが表示される。

というものです。

モニター解像度がある程度以上ある方は、気づくことすらないかもしれない現象ですし、気づいても全く気にならない方も多いと思いますが、気になる方も結構いらっしゃるようですので。

解消方法は、以下の設定をCSSの末尾に追加するだけです。

body{
  min-width:0;
}

CSSを編集できないスキンの場合は、フリースペースやフリープラグインに、

<style>body{min-width:0;}</style>

でOKです。

このカスタマイズによって、ブラウザの表示幅を狭めていった時の動作が、下の画像のように、

『まだ左側に余裕がある間は』
 ある位置で止まること無く左に寄るようになって、
 下側に横スクロールバーが表示さなくなります。

もちろん、ブログの横幅として設定している幅(初期値は980ピクセル)よりもブラウザの表示幅が狭くなれば横スクロールバーは表示されます。

以上、まだ左側に余裕があるのにブラウザ下部に横スクロールバーが表示されてしまう現象を解消する方法でした。

気になる方は、よかったらお試し下さい。

アメブロカスタマイズで自分らしい空間を作る技