テケオは眠くても頑張るぞ!

便利なサービスや製品紹介、スマホゲームや動画視聴のレビュー、ブログのカスタマイズ方法などを書く雑記ブログ

はてなブログのスマホページで記事が横スクロールするのを防ぐ方法

f:id:tektekeo:20170820231637g:plain

先日自分のブログのスマホ用ページをチェックしていたら、記事内が横向きにスクロールしてしまう事が発覚しました。

当ブログもスマホユーザー様からの割合が多くなりつつあり、記事を読み進めていく上でマイナスであると考えてカスタマイズした。

1記事としてまとめるほどじゃ無いけど、困ってる人は試して見てください。

 

現象の確認

ちょっとだけ横に動く現象が...

ヘッダーやフッター部分は問題ないけど、記事の部分だけこんな感じになってしまう。

スマホで縦にスクロールして行く際に、めっちゃ鬱陶しい。

対策

スマホ用ページで以下のCSSを追加

<style type="css/text">div.entry-content.section{overflow-x:hidden;}</style>

記事のx軸方向のはみ出しを隠してしまいます。

結果  

挙動は良さそうですね( ^∀^)

原因

多分、javascriptで記事内にAdsenseを挿入しているから。

Adsenseが横にほんの少しはみ出てるんだと思う。

スマホページの記事内にjavascriptで動的に広告を配置している人は、一度確認した方がいいかもしれません。

まとめ

ブログのスマホページの記事が横向きに少しスクロールするのを停止させた。

 

記事にするようなほど難しい話じゃないけど、理解せずにコピペで広告を動的に配置した人達にとって、需要があるんじゃないでしょうか。

注意点としては、スマホページで横にはみ出す記事があると不十分です。

でも、自分のブログにはない(はず)ので、これでOKですね。