「スクロールが勝手に戻る」現象がツライ
アメブロを使っているんだけど
アメブロがJavaScriptで
画面がスクロールされるたびに、広告の位置を固定したり動かしたり、高さ変えたり、幅変えたり…云々
で、あわせて、メインコンテンツがズレたり、意図しない位置に戻されたり…
非常に読みづらくて迷惑。
「ちゃんとテストしたの？」ていう…。
でも無料会員は、JavaScript使えないから、CSSだけで対処するしかない！
この記事では、そんなアメブロの「スクロール巻き戻り問題」に対して、CSSだけで対抗して何とか解決したので書いておきます。
原因
先に書いた通り、広告用のJavaScriptが原因。
あくまで「広告を画面内に残すためのJS制御」なので、有料プラン（ビジネスプラン）ではこの問題が発生しないらしい。
1500円払ったことないから知らんけど。
あっちもビジネスだからね。
わざと使いづらくしてる可能性もあるってこと。
仕方ないけど、もう少しやりようってもんありそうなものだけど…。
解決策
ブログデザインのCSSの編集｜Ameba (アメーバ)にて
『現在使用中のブログデザインCSS』の最終行に追記する形
広告の固定を解除版
.skin-blogSubAInner {
position: static !important;
margin-top: 0 !important;
}
ここで紹介されている有名なコード⇩
でもCSS編集画面に
みたいな一文があるので、この処理は『広告の位置を変更する処理』とも取れるから、結構グレイだと思う。
なので
サイドバーを固定して浮かせる版
.skin-blogSubA{
float: right !important;
position: absolute !important;
}
逆に浮かせることで本文に影響をなくした版（自作）です。
これならアメブロ側のJavaScriptの処理は邪魔しないので、広告が表示される位置自体は変わらない。
試しに使ってみて、現在使っているテンプレートと相性が良い方を使えばいいと思いますよ。
レスポンシブデザイン対応版
画面サイズにあわせて要素が移動するレスポンシブデザインもアメーバにはあります。
いいんですけど、このCSS適用すると、画面サイズによっては、要素が重なってしまったりすることがあるのですよね
そんな場合は、CSS適用するメディアサイズを指定しちゃってください。
⇩こんな感じ。
@media (min-width: 760px){
.skin-blogSubA{
float: right !important;
position: absolute !important;
}
}
関係ないけど、ちょっと役に立つかもメモ
ハッシュタグの存在感を薄くしたい人用対応
ハッシュタグの文字が大きいので目立つから、ちょっとどうにかしたいって人向けです。
CSSに以下を追加します。
/* ハッシュタグ */
div:has(+ .hashtag-module-wrapper) {
margin-bottom: 5px;
margin-top: 5px;
}
.hashtag-module{
padding:0;
margin:0;
font-size:0.8rem;
line-height:1.0em;
}
.hashtag-module a {
color: #bbddff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha( opacity=70 );
opacity: 0.7;
}
あくまで、主張を減らすだけにしておいてください。
消すのは✕、見えなくするのも✕。
見づらくするのも規約違反に該当する可能性がある。
なので、ギリギリのラインを攻める必要があります。
コメント