アメブロのPC向け画面で、スクロールした時にサイドバーや(フリースペースに設置した)グローバルナビの位置がズレてしまい、本来あるべき場所とは違う位置へ移動してしまうことがあります。
当記事では、この問題の発生原因と発生を防ぐための対策についてご紹介します。
なぜサイドバーやグローバルナビがズレるのか？
原因はいくつかあるかもしれませんが、大きな原因の一つに、無料版アメブロと広告ブロッカーとの相性問題があります。
これが原因の場合は分かりやすく、広告ブロッカーを導入済みのPCでのみ発生し、そういった機能を導入していないPCでは発生しません。
また、無料版のようにサイドバーに広告が表示される場合のみ発生し、広告が表示されない有料版（ビジネスプラン）では発生しません。
アメブロは、ビジネスプランという有料契約をしていない限りサイドバーに広告が表示され、その広告がスクロールに合わせてできるだけ画面内に残るようにJavaScriptで書かれたプログラムで制御されています。
このプログラムと広告ブロッカーの相性が悪く、広告ブロッカーによって広告が消されるとプログラムによる制御が誤動作してしまい、おかしな位置にズレてしまうということが起こります。
相性問題ですので広告ブロッカー側の仕様にもよるとは思いますが、試してみた限り、かなり多くの広告ブロッカーで発生するようです。
ちなみに、相性問題が発生するのはページを閲覧する人のPCに入っている広告ブロッカーで、アメブロの管理人さんが広告ブロッカーを使わない、または、問題の発生しない広告風呂カーを使うなどしても意味がありません。
もっとも良い対策は？
この問題を防ぐもっとも良い対策は、ビジネスプランという、月額1,490円(2024年8月現在)の有料プランに加入することです。
ビジネスプランであれば、サイドバーに広告が表示されませんし、そもそもサイドバーの位置制御のプログラムが実行されない仕様になっていますので、この問題は発生しません。
ただ、個人的に、今のアメブロに月1,500円ほどの出費は安いとまでは言えないと感じます。
無料で防ぐ方法は？
もし、無料で何とかしたいという場合、新CSS編集用デザインを使っていれば、CSSの編集によるカスタマイズで対策することが可能です。
CSSの末尾に以下のようなコードを追加します。
/************************************************
新CSS：スクロールによるサイドバーの位置ズレを防ぐ
************************************************/
.skin-blogSubAInner {
position: static !important;
margin-top: 0 !important;
}新CSS編集用デザインでなくても同様の世代のデザインであればフリースペースに以下のコードを記述すれば、ほぼ同じ対策になります。
<style>.skin-blogSubAInner{position:static!important;margin-top:0!important;}</style>まとめ
以上、広告ブロッカーとの相性でスクロールした時にサイドバーやフリースペースに設置したグローバルナビの位置がズレてしまう問題の原因と発生を防ぐ対策方法についてご紹介しました。
おすすめの対策方法は、
- 有料：ビジネスプランに加入
- 無料：CSSでカスタマイズ
のどちらかになります。
よかったら参考になさって下さい。
