広告 TRENDHACK

ブログで横揺れするスマホの対処法

  1. HOME >
  2. TRENDHACK >

ブログで横揺れするスマホの対処法

ブログなど記事を書いて、完成したのを見たら『あら?』と、『思ってたのと違う!?』と、いった経験があるのではないでしょうか?

特にPCで確認したら問題ないのに、スマホで見たらあら?と・・・

思ってたのと違う原因は様々ですが、今回はスマホで見たら横揺れしてしまう時に、画面が揺れないようにする対処法をご紹介していきます。

横揺れとは

ブログでスマホ対応のテーマ・テンプレートを使っていても、広告や表が枠からはみ出してしまったり、グラグラと横揺れしてしまうことです。

レスポンシブ web デザインテーマは、そうしたことがおきないように設計されていますが、HTML タグの使い方や CSS の指定によっては表示が崩れてしまいます。

せっかくいい内容の記事でも横揺れしたりすれば、読みにくい記事となって残念な記事になってしまいます。

何故横揺れが起こるのか原因を知っていれば探る手がかりにもなります。横揺れしてしまう原因は、何かが画面幅からはみ出しているためです。

よくある原因と対処法

①URLが突き抜けている

対象に word-break: break-all; を入れて強制的に折り返す指示をする。

②画像がのサイズが固定されてはみ出ている

サイズを%指定にする。
max-width100% にする。

③iframeの幅が固定されている

iframe を新しいdivで囲って max-width 100% にする。

④テーブルがレスポンシブ対応していない

テーブルや表が複雑なら sp用に組み直して Media Queries で、pcspを切り替える。

⑤広告がはみ出ている

広告の幅調整をしていないサイトはよく見かけるので、スマホサイズでのブラウザチェックを、注意して見たほうがいいでしょう。

インスタやツイッター・You Tubeなどを埋め込むときも埋め込みサイズが、デバイス最小幅まで対応しているか確認してください。

横揺れを見つける方法

どこが原因か分からないときは、まずデベロッパーツールなりで横幅チェックをします。

サイトを作った時はもちろんのこと、サイト運営中でもプラグインや広告など、何かしらの追加や変更で横幅100%超えてしまう場合があります。

デベロッパーツールを使ってスマホの画面サイズをシミュレートしながら、飛び出している要素がないかチェック。

そこが、%ではなくてpx指定になっているオブジェクトは、全体の設計次第では突き破る原因になりやすいです。

なので、原因の特定できたら%指定に変えたり、飛び出さないよう修正していきます。

診断した時にエラーの箇所を教えてくれるオススメは

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja

 

それでも分からない時は、デベロッパーでHTMLの上から順に見ていき、CSSでwidth指定が固定値になっていないか調べていきましょう。

例えば、widthが〇〇pxになっていたり、max-widthが指定されていない場合は、はみ出している可能性が高いです。

pxで指定するのではなく、パーセントを使ってwidth〇〇%などにすると解消されます。

横揺れの一時的な応急処置

body {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

CSSにコピペするだけ。
とっても強引なやり方ですが、大体はこれで横揺れは解消されます。

横揺れの原因は、記事にあるURLの折り返しができていない時や、画像がデバイスの画面幅を超えはみ出てしまっている時が多いので、このCSSを入れると画面やURLの途中で強制的に切ってしまうことになります。

これはあくまでも一時的な応急処置なので、このままにしておくと、コンテンツに影響が出てきたり、見た目が悪くなることもあるので、原因を突き止めることは必要です。

ただ、このCSSを入れた後に原因の箇所を見つけやすくなることもあります。
原因を見つけられたらCSSを外してくださいね。

-TRENDHACK