読者です 読者をやめる 読者になる 読者になる

ミニマリストは世界を変える!

無駄をはぶいて合理的に生きる。時間もお金も好きなことに集中。好きなことで稼ぐ、自立した女性を応援するサイト。

イラッとするスマホ表示の横揺れを改善。ブログカードと広告サイズの変更を。

ブログ運営
スポンサーリンク

スマホ表示の「横揺れ」が気になっていた

普段、スマートフォンを使わない私ですが

ブログを書いた後は、スマホからの見た目を確認するのに使っています。

 

確認する時、画面が微妙に横にずれるよなあ・・と思っていました。

下にスクロールさせたいのに横移動するとイラッとするかも・・と思っていたら、うさもふ様のサイトにこんな文章が。

画像やブログのガジェットやアプリを入れて、横幅がスマホで見たときに収まらなくて、スクロールする度に、画面が左右にぶれるんですよね。

これ、すごいうざいんですよね。

アドセンスで稼げないのはスマホデザインの横幅が問題 - うさもふ

 

う、うざい!

私はまさにこれ!と思いました。

 

アドセンス広告のサイズを、300×250に変更

上記のサイトを見ると、原因はアドセンス広告のサイズであることが多いと。

私は、サイズを自動調整してくれるという「レスポンシブ」のサイズを選択していました。パソコン・スマホ共通設定で、あとは勝手に調整してくれるのは手間がかからなくていいなと思っていました。

しかし、レスポンシブサイズにしておくと、スマホで見ると、ほんの少しはみ出てしまうのです(私が使っているIphone4だとそうなります)。はみ出たぶんが、横スクロールの原因になっているんだと気づきました。

速攻、うさもふさんサイトを参考に、横幅300のサイズ(300×250のレクタングル)に切り替えました。

横揺れの原因はこれも?はてなブログカードだった!

広告のサイズを変更して一安心。

早速スマホから見てみると・・・あれ、まだ横に動いてしまう!

 

自分のサイトをスクロールしながら、他の原因の探して見ていると

ブログカードの横幅がオーバーしている・・・?

と気づきました。

 

ブログカードとはこういうやつです。

f:id:megumakou2014:20150515154659p:plain

(本物のを張ると横揺れするのでスクリーンショットで↑↑↑)

過去記事や、他のブログのリンクを張るときに使う、写真付きの紹介欄

これは、私がはてなブログで一番使いたかった憧れの書式だったんです。

この見た目が好き。

 

まずは、とりあえずブログカードを外してみたら・・・

 

見事に横揺れが無くなりました。

 

原因はコレですか・・・。

大好きなブログカード、さようなら・・。

 

というわけで、コツコツブログカードを外して、リンク先の表示は文字列に変更しています。

 

 問題点を見つけてくれる便利なサイトもあり

「えじの自由帳」さまのサイトより

スマホ表示が横揺れ! 原因はGoogle Pagespeed Insightsで見つけよう

ブログの高速化と問題点を見つけてくれる便利なサービスがグーグルさんにあるとのこと。下記のサイトに、自分のサイトのURLを入力すると、あっという間に問題点を教えてくれます。下記サイトをクリックしてください。

PageSpeed Insights

 

早速自分もやってみました。数秒後に出てきた結果がこれ↓↓↓

f:id:megumakou2014:20150515154746p:plain

モバイルの速度56/100・・約半分の速さ、ということですね(泣)

えじの自由帳さんのサイトに、問題点がココに書いてあるよ!とのことで

確かに書いてありました。

が・・

この先どうしたらよいかわからない(笑)

 

明日以降、調べます・・普通の主婦にはハードル高いです・・。