WordPressのテーマを製作している途中で、スマートフォンで表示を確認すると、横にグラグラと動いて酔いそうになりました。

横ズレの原因はとっても単純なことでした。解決方法をご紹介します。

①横ズレの原因はサイズオーバーがほとんど

横ズレしてしまう一番の原因は、サイトの幅（width）のサイズがスマホ画面サイズを超えてしまっている状態である場合です。サイズがオーバーしているので、表示しきれなかった分だけ横にズレてしまいます。

これをきちんと解決するなら、要素1つ1つの幅を確認して修正していくのが正しいのですが、めんどくさいじゃないですか。
なので、「コンテンツの幅を超えたものは表示しない」という次の命令をスタイルシートに追加しましょう。

body{
    overflow-x: hidden;
}

これだけで、グラグラ横ズレするのが解決します。

②それでも解決しない時はコード記述部分を見直そう

私の場合、①の対応をしても、解決しないページが残りました。横ズレが直らないページを最確認すると、HTMLやCSSなどのコードを書いているページばかりだったんです。文章は、表示幅に応じて折り返されてきちんと表示されるのですが、コードは折り返されない状態で、サイズオーバーしてしまっていました。

これを解決するために、コードをそのまま書くのではなく、短いコードならコードタグ（<code></code>）で囲み、長いコードはプレタグ<pre></pre>で囲むと解決しました。

<pre>
<script>
     document.addEventListener("DOMContentLoaded",function(eve){
         var date = new Date();
         var year = date.getFullYear();
         var month = date.getMonth()+1;
         var day = date.getDate();

         document.body.insertAdjacentHTML("beforeend", "<p>今日の日付は" + year + "年" + month + "月" + day + "日です。</p>");
 },false);
 </script>
</pre>

スマホでサイトを見ると、横ズレが気になる時にはチェックしてみてください。

WordPressに関する記事一覧はこちら