横スクロールバーを消す


アメブロで、2011年8月から登場した新しいデザインは、ブログ幅が980pxになりました。

画面の小さい(解像度の低い)パソコンでは、横スクロールバーが出てしまうものもあります。

出張用などモバイルノートを使われている方もいらっしゃると思います。
横幅が1024pxのパソコン画面の方は、↓ のように横スクロールバーが出てしまいます。


この横スクロールバーは、嫌がられます。面倒なので。

でもこの横スクロールバーがでてしまうのは、ブログ幅が980pxになったからというわけではありません。

実は、新しいデザインではページ全体の幅が1100px以下の場合、横スクロールバーがでてしまう設定になっています。

なぜ1100pxかというと、はっきりとはわかりませんが、ブログ幅980pxと右下にあるフッターナビがいっぱいいっぱいに並んだ幅が1100pxなんだと思います。


(フッターナビ)

幅が1024pxのパソコンだと無条件に横スクロールバーが出てしまいますね。

アクセス解析を見ると 幅が1024pxの解像度のパソコンをお使いの方はまだまだいます。
1024pxの場合でも横スクロールバーが出ないようにするには、次のコードをCSSに追加します
※CSSを編集できるのは【CSS編集用デザイン】のみとなっています。

body{
min-width:1000px;
}

これで1024pxの幅のパソコンでも横スクロールバーが出なくなりました。
(ウィンドウを最大化している場合)

ついでにもう1つ。
画面が小さい場合、フッターナビがブログと重なります。


これが嫌だという場合

@media screen and (max-width: 1100px) {
.footerNav{
display:none!important;
}}

を追加すると、幅1100px以下の場合のみ非表示にすることができます。

参考にしてみてくださいね。

その他のカスタマイズはこちら

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください

コメントを残す