miyuki
こんにちわ！miyukiです。
今回は、このブログをスマホで見た時に発生する『横揺れ』を解決することができたので、備忘録として記事にしたいと思います。
ブログ運営をしている方は必ず通るレスポンシブ化のカスタマイズ。
これがWEB制作初心者には難しくて、あれやこれやと試しているうちに恐ろしいくらい時間を取られ、
気づいたら今日一日、ググることしかしてないんですけど！みたいな事ありませんか。
ピンポイントで答えを見つけるのってホントに難しいんですよね。
なので、同じ悩みを抱える方の参考になれば嬉しいです。
スマホ表示の時、縦にスクロールすると画面の横揺れが発生する
私のブログはスマホ表示で縦にスクロールすると、若干横揺れする。という現象が起こっていました。
原因はブログの余白を合わせた幅が、スマホ幅より少し大きめだったこと。
微妙な横揺れなんだけど、それでも私にとっては画面酔いしそうな不快な現象だったので、何とかならんか！ということで、ググって調べましたよ。（探し方が下手なのか、なかなかの時間ロスでした。。）
で、見つけたのが下記のＣＳＳ。
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
引用元サイト： スマホ対応で横揺れを矯正する方法
上記のＣＳＳをcocoonダッシュボードの「外観」→「カスタマイズ」→「追加CSS」のところにコピペしたらスマホ表示の横揺れが解消されました。
画面の横揺れでお悩みの方は試してみて下さい。
