はてなブロガー必見！スマホ版表示時に上下スクロールがカクカクする問題を解決する方法【コピペ1発】
こんにちは、だいぱんまん(@donchan922)です。
お気に入りのはてなブログの記事を読んでいるときに残念なのが、上の図のようにスマホ版表示時に上下スクロールがカクカクすることです。
面白そうな記事でもこれが起きていると読む気がなくなってしまいます。そこで、そんなブログを1つでも減らしたい！という気持ちで、カクカク問題を解決してみました。
そもそもなんで起きるの？
この問題が起きているブログに共通しているのは、ブログのカスタマイズをしていること。中途半端にカスタマイズしてしまうことで、スマホレイアウトが崩れてしまうのだと思います。
この問題が起きているはてなブログを5つほど確認したところ、どれも以下の箇所でカクカク問題が起きていました。
- 記事のヘッダ
- 記事の本文
- 記事のフッタ
ということで、その3箇所に対してカクカクしないようにするのが以下のコードです。
スマホ版表示時に上下スクロールがカクカクする問題の解決方法
<style type="text/css"> .entry-header-html { overflow-y: hidden; } .entry-content { overflow-y: hidden; } .entry-footer-html { overflow-y: hidden; } </style>
上のコードをコピーし、「ダッシュボード」⇒「デザイン」⇒「スマホのアイコン」⇒「ヘッダ」⇒「タイトル下」に貼り付けてください。作業はこれだけです。
はい、解決！ぬるぬるスクロールできるようになりました。
まとめ
ご自身のブログで同じ問題が起きている場合は、是非お試しあれ。「やってみたけど直らないよ！」という方はブクマやコメントなどでご連絡ください。
ちなみに、冒頭の図でも出てきているフラットなシェアボタンを実装したい方は以下の記事をご覧ください。もちろん、カクカク問題は発生しませんよ。