ブログ運営-Wordpress

【cocoon】スマホ表示の横揺れを防ぐ方法【WordPressカスタマイズ】

ブログ運営-Wordpress
この記事は約2分で読めます。

 

miyuki
miyuki

こんにちわ!miyukiです。
今回は、このブログをスマホで見た時に発生する『横揺れ』を解決することができたので、備忘録として記事にしたいと思います。

 

 

ブログ運営をしている方は必ず通るレスポンシブ化のカスタマイズ。

 

これがWEB制作初心者には難しくて、あれやこれやと試しているうちに恐ろしいくらい時間を取られ、
気づいたら今日一日、ググることしかしてないんですけど!みたいな事ありませんか。

 

ピンポイントで答えを見つけるのってホントに難しいんですよね。
なので、同じ悩みを抱える方の参考になれば嬉しいです。

 

 

スマホ表示の時、縦にスクロールすると画面の横揺れが発生する

 

私のブログはスマホ表示で縦にスクロールすると、若干横揺れする。という現象が起こっていました。
原因はブログの余白を合わせた幅が、スマホ幅より少し大きめだったこと。

 

微妙な横揺れなんだけど、それでも私にとっては画面酔いしそうな不快な現象だったので、何とかならんか!ということで、ググって調べましたよ。(探し方が下手なのか、なかなかの時間ロスでした。。)

 

で、見つけたのが下記のCSS。

 

@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}

 

引用元サイト: スマホ対応で横揺れを矯正する方法

 

 

上記のCSSをcocoonダッシュボードの「外観」→「カスタマイズ」→「追加CSS」のところにコピペしたらスマホ表示の横揺れが解消されました。

 

画面の横揺れでお悩みの方は試してみて下さい。

 

CSSのカスタマイズは自己責任でお願いします。
シェアしてくれたら嬉しいです(*^^*)
↓応援クリックお願いします

miyuki(イラストレーター)

ADHDの長女、自閉症の次女を育てる2人姉妹のママ。

発達障害な姉妹との療育生活や、コミュ障の悩みなど、日々ラクに暮らす方法を探し求めています。

このブログで使用しているイラストは帰属が明記してあるもの以外はすべてmiyukiのオリジナルですので無断転載はご遠慮ください。よろしくお願い致します。

 

発達姉妹とコミュ障ママ
タイトルとURLをコピーしました