黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】スクロール時に画面が揺れてしまう時の対処法!

今回は、ブログのページをスクロールした時、画面が左右に揺れてしまう問題の対処法を紹介したいと思います!

 

スマートフォン用の表示でよく起こる現象なのですが、スクロールした時にページの表示が左右にガタガタぶれてしまうと言った経験は無いでしょうか?

 

この現象が起きてしまうと、スクロールが非常にしづらくなり、ページも見づらくなってしまうので、早急に対処が必要です。

 

特に、ご自身のブログをPCで編集している方は、スマホ版での表示が正しくされているかチェックを怠ってしまいがちです。

 

是非、この機会にスマホ版での表示もチェックしてみて下さい!

 

はてなブログでの対処法

はてなブログでの対処法はとても簡単です。

 

「デザイン」→「カスタマイズ」→「デザインCSSCSSに、以下の記述を追加して下さい。

/* 画面の横揺れ防止 */
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;
  }
}

 

これでスクロール揺れを防止できたのではないかと思います。

 

まとめ

今回は、久しぶりにブログカスタマイズの記事を書いてみました。

 

ブログカスタマイズについては、まだまだ書ききれていない部分が沢山あるので、暇を見つけて少しずつ追加してければと思います。

 

それでは、みなさんも良いブログライフを!