ブログでスマホ対応のテーマ・テンプレートを使っていても、広告や表（table）が枠からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。
レスポンシブ web デザインテーマはそうしたことがおきないように設計されていますが、HTML タグの使い方や CSS の指定によっては表示が崩れてしまいます。
そこで、よくある横揺れの原因と具体的な対策方法、一発で解消できる CSS コードをご紹介します。
Headline
スマホの横揺れはなぜおこるのか
横揺れは、ブログの画面幅より大きな要素（div や iframe）があるときにおきます。
枠内におさまっているように見えても、はみ出している要素のぶんだけ横にスクロールできるわけですね。
記事を読み進めようと思っても、ちょっと指がななめ上にすべるだけで “ぐらぐら” してしまうので、読者は “いらいら” してしまいます。
せっかく素晴らしい記事を書いても、横揺れが原因で離脱されてしまうこともあるかもしれません。
よくある原因が、次の 4 つです。
- コードなどを紹介する
<pre> - 表組みで使う
<table> - 広告やウィジェットの
<iframe> - WordPress のキャプションなどで使われる
<div>や<figure>
テーマによってはすでに対策済みのものもありますが、横揺れでお悩みであれば、以下を参考に原因を探ってみてください。
※ WordPress 前提で解説していきますが、他のブログサービスや HTML サイトでも原因と対策の基本は同じです
pre タグ内のテキストが飛び出してしまう原因と対策
CSS や HTML のコードサンプルを載せるときに <pre> を使いますが、このなかに長い単語が入っていると、テキストが枠を突き抜けてしまいます。
URL も「長い単語」のようなものですね。
とくにパーマリンクが日本語の URL は、このように長い文字列になってしまいます。
たまに、パソコン表示でもテキストが突き抜けているブログを見かけますね。
この対策は CSS に数行追記するだけで OK です。
枠内でのみ横スクロールさせる方法
まず、CSS に一行加えて、<pre> 内でのみ横スクロールさせる方法。
pre { overflow: auto; }
「横スクロールできる」とわかるような注釈を付けておいたほうが良いかもしれません。
単語の途中でも強制改行させる方法
スクロールが好ましくない場合は、テキストの途中で強制的に改行させましょう。
pre { word-wrap: break-word; }
プラグインで対応する方法
WordPress なら「Crayon Syntax Highlighter」というプラグインを使えば、枠からはみ出さず、かつきれいにコードを表示できます。
ただ、CSS でも対応しておかないと、プラグインの使用をやめたときに表示が崩れてしまいます。
表（table）がはみ出してしまう原因と対策
WordPress のビジュアルモードで記事を書いているなら、TinyMCE Advanced を使っているかもしれません。
表作成なども Word 感覚でできる便利なプラグインです。
しかし、表やセルの横幅をドラッグで変更してしまうのはあまりおすすめしません。
HTML ソースを見てみるとわかりますが、インラインで幅と高さの指定が入ってしまいます。
<table style="height: 156px;" width="632"> <tbody> <tr> <td style="width: 178px;">セル1</td> <td style="width: 189px;">セル2</td> <td style="width: 187px;">セル3</td> </tr> </tbody> </table>
そうすると、スマホの画面サイズより表が大きくなってしまい、このように突き抜けてしまいます。
残念ながら table に max-width を指定するだけでは解決できません。
対策をいくつか見ていきましょう。
幅を％で指定する方法
セルや表の幅を px で固定すると枠を突き抜けてしまうので、％で指定するのがオーソドックスな方法です。
<table> <tbody> <tr> <td style="width: 20%">セル1</td> <td style="width: 40%;">セル2</td> <td style="width: 40%;">セル3</td> </tr> </tbody> </table>
TinyMCE Advanced を使う場合、セルのプロパティで指定していきます。
スマホ表示でも、画面のサイズに応じて表の横幅が変わります。
特定の列のみ幅を指定しておくのでも OK です。すべての列の幅を調整する場合は、合計 100 ％になるようにしておきましょう。
レスポンシブwebデザイン対応の表にする方法
簡単な表であれば横幅を縮小するだけでも対応できますが、横に何列もあるような表だと、ただ見づらくなるだけかもしれません。
そのため、スマホで見たときのことを考えたレイアウトを考え、CSS で調整していくのが一番です。
どれが最適か、というのは難しいですね。
表だけ横スクロールできるようにする方法
何列もある横に長い表であれば、表自体をスクロールできるようにしておくのが簡単です。
表全体をこのように div で囲みます。
<div class="table-scroll"> <table> <!--表の中身--> </table> </div>
CSS は、div が横スクロールできるように指定しておけば OK です。
.table-scroll { overflow-x: auto; }
そうすると、表のみ横スクロールできるようになります。
これなら、幅を px で指定していても大丈夫ですね。
ただ、<pre> のときと同じく、横スクロールできる旨を書いておかないと、読者は気づかないかもしれません。
広告が見切れてしまう原因と対策
広告が原因で横揺れしているケースが一番多いと思います。
とくに、Google AdSense のラージモバイルバナー（320 x 100）を使っているときは、注意が必要です。
iPhone5 など画面が小さいスマホは横幅が 320px なので、このサイズでもぴったりおさまりそうですよね。
でも、margin や padding で左右に余白をとっていると、実際のコンテンツ幅は 320px 以下になっています。
サンプル画面ではコンテンツ幅が 269px なので、300 x 250 のレクタングルも入りません。
また、パソコン表示だけを考えて 728 x 90 のビッグバナーを設置すると、そのサイズに合わせてブログが表示されることもあります。
スマホ表示がおかしいと思ったら、Google AdSense が固定サイズになっていないか確認してみてください。
対策は 2 つあります。
レスポンシブ用広告を使う
最も簡単な方法は、広告ユニット作成時に「レスポンシブ」を選択することです。
画面幅に応じて最適な広告が配信されるので、とくにコードを調整する必要はありません。
ただ、ブログにアクセスしたときに最初に見える部分にレクタングルサイズがあると、規約違反となります。ここだけ注意してください。
条件分岐で広告を切り替える
思いどおりのサイズで広告を出したい場合は、条件分岐で切り替えましょう。
is_mobile 関数を作成すれば、「スマホとそれ以外」で条件分岐できます。
なお、display:none で Google AdSense 広告を非表示にできるのはレスポンシブユニットのみです。通常のレクタングルなどを CSS で非表示にすると規約違反になるので注意しましょう。
div 要素がはみ出してしまう原因と対策
div や figure 要素がはみ出すのは、インラインで幅を指定したときや、padding の計算を間違ったときです。
WordPressで画像にキャプションをつけるとき
WordPress では、画像のキャプションを使ったときにおこり得ます。
レスポンシブ web デザインでは、ほぼ画像に max-width が指定されており、枠を飛び出すことはありません。
しかし、キャプションをつけると枠を突き抜けることがあります。
キャプションをつけたときに div や figure が自動的に追加され、そこにインラインで幅指定が入るのが原因です。
<figure id="attachment_xxx" style="width: 640px" class="wp-caption"> <img src="" /> <figcaption class="wp-caption-text">キャプション</figcaption> </figure>
「wp-caption」にも max-width を指定すれば OK です。
.wp-caption { max-width: 100%; }
囲み枠やボックスを作るとき
CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターン で紹介したようなボックスを作るとき、横幅を指定するなら padding や border も計算に入れましょう。
たとえば横幅 200px のボックスを作って、padding を左右 60px ずつ入れると、実際は 320px の幅になってしまいます（ 200 + 60 + 60 ）。
padding は余白というより「つめもの」ですから、横幅に含まれてしまうのです。
ただし、これは box-sizing の値を変更すれば簡単に対応できます。
* { box-sizing: border-box }
この指定を入れておくことで、「padding や border を含めて」計算してくれるようになります。
レスポンシブ web デザインテーマならあらかじめ指定されていると思いますので、その場合はあまり気にしなくても大丈夫です。
横揺れを完全に防ぐCSSコード
横揺れの原因と対策をご紹介してきましたが、実は CSS に数行追加するだけで完全に防ぐことができます。
@media screen and (max-width : 480px){
html,
body {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
「画面幅が 480px 以内のとき、横にはみ出しているものは非表示にする」という指定です。
これで横揺れしなくなりますが、表や広告がはみ出している状態ならこのコードは使わないほうが良いかもしれません。
ある程度調整したうえで使ってみてください。
スマホ横揺れ対策まとめ
広告や表のほかにも、SNS のタイムラインウィジェットが横揺れの原因になっていることがあると思います。
いずれにしても、横揺れで読者をイライラさせないようにしたいですね。
いつもパソコンからブログをチェックしているなら、たまにはスマホでじっくり眺めてみてください。意外なところで表示崩れが起きているかもしれません。
どうしても直らないときはご相談ください。
それでは、また。