アメブロのスクロールが勝手に戻る？無料会員がCSSで対抗してみた件

「スクロールが勝手に戻る」現象がツライ

アメブロを使っているんだけど

スクロールしたら本文が勝手に移動する…ウザい…

アメブロがJavaScriptで
画面がスクロールされるたびに、広告の位置を固定したり動かしたり、高さ変えたり、幅変えたり…云々
で、あわせて、メインコンテンツがズレたり、意図しない位置に戻されたり…
非常に読みづらくて迷惑。
「ちゃんとテストしたの？」ていう…。

でも無料会員は、JavaScript使えないから、CSSだけで対処するしかない！
この記事では、そんなアメブロの「スクロール巻き戻り問題」に対して、CSSだけで対抗して何とか解決したので書いておきます。

先に書いた通り、広告用のJavaScriptが原因。
あくまで「広告を画面内に残すためのJS制御」なので、有料プラン（ビジネスプラン）ではこの問題が発生しないらしい。
1500円払ったことないから知らんけど。

あっちもビジネスだからね。
わざと使いづらくしてる可能性もあるってこと。
仕方ないけど、もう少しやりようってもんありそうなものだけど…。

ブログデザインのCSSの編集｜Ameba (アメーバ)にて
『現在使用中のブログデザインCSS』の最終行に追記する形

フリースペースに書く場合、自動的に改行が<br>に変換されるので、<style>含めすべて改行なしにすること。

.skin-blogSubAInner {
  position: static !important;
  margin-top: 0 !important;
}

ここで紹介されている有名なコード⇩

でもCSS編集画面に

広告を消す行為の他、掲載位置変更や視認性を悪くする修正なども、規約違反に該当する可能性がありますのでご遠慮下さい。

みたいな一文があるので、この処理は『広告の位置を変更する処理』とも取れるから、結構グレイだと思う。

なので

.skin-blogSubA{
  float: right !important;
  position: absolute !important;
}

逆に浮かせることで本文に影響をなくした版（自作）です。
これならアメブロ側のJavaScriptの処理は邪魔しないので、広告が表示される位置自体は変わらない。

試しに使ってみて、現在使っているテンプレートと相性が良い方を使えばいいと思いますよ。