今回は、ブログのページをスクロールした時、画面が左右に揺れてしまう問題の対処法を紹介したいと思います！
スマートフォン用の表示でよく起こる現象なのですが、スクロールした時にページの表示が左右にガタガタぶれてしまうと言った経験は無いでしょうか？
この現象が起きてしまうと、スクロールが非常にしづらくなり、ページも見づらくなってしまうので、早急に対処が必要です。
特に、ご自身のブログをPCで編集している方は、スマホ版での表示が正しくされているかチェックを怠ってしまいがちです。
是非、この機会にスマホ版での表示もチェックしてみて下さい！
はてなブログでの対処法
はてなブログでの対処法はとても簡単です。
「デザイン」→「カスタマイズ」→「デザインCSS」のCSSに、以下の記述を追加して下さい。
/* 画面の横揺れ防止 */
html,
body {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
スマホ版のデザインにのみ適用したい場合は、赤色部分を先程の記述に追記して下さい。
@media only screen and (max-width: 320px) {
html,
body {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
これでスクロール揺れを防止できたのではないかと思います。
まとめ
今回は、久しぶりにブログカスタマイズの記事を書いてみました。
ブログカスタマイズについては、まだまだ書ききれていない部分が沢山あるので、暇を見つけて少しずつ追加してければと思います。
それでは、みなさんも良いブログライフを！
