スマホ表示の「横揺れ」が気になっていた
普段、スマートフォンを使わない私ですが
ブログを書いた後は、スマホからの見た目を確認するのに使っています。
確認する時、画面が微妙に横にずれるよなあ・・と思っていました。
下にスクロールさせたいのに横移動するとイラッとするかも・・と思っていたら、うさもふ様のサイトにこんな文章が。
画像やブログのガジェットやアプリを入れて、横幅がスマホで見たときに収まらなくて、スクロールする度に、画面が左右にぶれるんですよね。
これ、すごいうざいんですよね。
アドセンスで稼げないのはスマホデザインの横幅が問題 - うさもふ
う、うざい！
私はまさにこれ！と思いました。
アドセンス広告のサイズを、300×250に変更
上記のサイトを見ると、原因はアドセンス広告のサイズであることが多いと。
私は、サイズを自動調整してくれるという「レスポンシブ」のサイズを選択していました。パソコン・スマホ共通設定で、あとは勝手に調整してくれるのは手間がかからなくていいなと思っていました。
しかし、レスポンシブサイズにしておくと、スマホで見ると、ほんの少しはみ出てしまうのです（私が使っているIphone４だとそうなります）。はみ出たぶんが、横スクロールの原因になっているんだと気づきました。
速攻、うさもふさんサイトを参考に、横幅300のサイズ（300×250のレクタングル）に切り替えました。
横揺れの原因はこれも？はてなブログカードだった！
広告のサイズを変更して一安心。
早速スマホから見てみると・・・あれ、まだ横に動いてしまう！
自分のサイトをスクロールしながら、他の原因の探して見ていると
ブログカードの横幅がオーバーしている・・・？
と気づきました。
ブログカードとはこういうやつです。
（本物のブログカードを張ると横揺れするのでスクリーンショットで紹介↑↑↑）
過去記事や、他のブログのリンクを張るときに使う、写真付きの紹介欄。
これは、私がはてなブログで一番使いたかった憧れの書式だったんです。
この見た目が好き。
まずは、とりあえずブログカードを外してみたら・・・
見事に横揺れが無くなりました。
原因はコレですか・・・。
大好きなブログカード、さようなら・・。
というわけで、コツコツブログカードを外して、リンク先の表示は文字列に変更しています。
問題点を見つけてくれる便利なサイトもあり
「えじの自由帳」さまのサイトより
スマホ表示が横揺れ！ 原因はGoogle Pagespeed Insightsで見つけよう
ブログの高速化と問題点を見つけてくれる便利なサービスがグーグルさんにあるとのこと。下記のサイトに、自分のサイトのURLを入力すると、あっという間に問題点を教えてくれます。下記サイトをクリックしてください。
早速自分もやってみました。数秒後に出てきた結果がこれ↓↓↓
モバイルの問題点56/100、多すぎですか・・。
えじの自由帳さんのサイトに、問題点がココに書いてあるよ！とのことで
確かに書いてありました。
が・・
この先どうしたらよいかわからない（笑）
明日以降、調べます・・普通の主婦にはハードル高いです・・。
役に立ちましたら、下のボタンを押してシェア又は応援していただけると嬉しいです＾＾