久しぶりのSTINGERカスタマイズ記事です！お待たせしました、IT系ブロガーあめたま（@ametama_l2l）です( ´,_ゝ`)ｲ ﾋ
私事ですが、昨日引っ越しました。6年間住んだ愛着のある部屋でしたが、新築のキレイな部屋に移った瞬間、前の部屋のイヤなところが目立ってしょうがありません。
エゴ満開ですか？それが人間ですよﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ
普段はブログを読むときはほぼPCです。まだ引っ越してネット環境が整っていないため、今はiPhoneでネットサーフィンを楽しんでいます。
そうすると気付いたことが1つ。
スマホで見ると横に画面が揺れてしまうブログが意外と多い！
今回はその原因と解決法を説明していきます。
スポンサーリンク
もくじ
あなたのページは大丈夫？横揺れしてない？
スマホ用ページの横揺れとは？
自分のブログをスマホで確認してみてください。通常スマホの画面は縦長で見ていると思います。つまり読み進めるときは画面を上下にドラッグするはずです。
このとき、上下ではなく左右に引っ張ってみてください。
動きませんか？動かないなら今回の話は全く関係ないので、安心してネットを楽しんでてください。
横に動いた方。
誤解を恐れずにハッキリと言います。これ、意外とウザイです(´･ω･`)ｼｮﾎﾞｰﾝ
では、その原因を考えていきます。
横揺れの原因はスマホ用アドセンス広告
私がよく見るブログはSTINGERを使ってる方が多いです。そのSTINGERの作者であるENJIさんが以前ブログに書いてたのかツイートしてたのかは忘れましたが、原因を一言で書かれていました。
横揺れの原因は何かの要素がはみ出している。
何がはみ出しているかは人それぞれなので、ご自身で検証したらいいと思います。
ただ、私が閲覧していて横揺れしたブログのほとんどは原因は1つ。スマホ用アドセンス広告です。
原因となるスマホ用アドセンス広告のサイズ
原因となっているスマホ用Googleアドセンス広告のサイズは320×50（モバイルバナー）と320×100（ラージモバイルバナー）です。
試しに私もスマホ用ページに導入してみたところ、見事に横揺れが発生しました。
私の閲覧環境であるiPhone5Sの横幅は320pxのため、通常であればはみ出すことはありません。
と、思っているあなた。実はそうじゃないんです。
STINGER5のスマホ閲覧時の横幅は300pxが基本
STINGER5のスマホ用の横幅は300pxが基本になっています。
自分でphpファイルを触って直接広告を表示させている場合はわかりませんが、STINGER5の広告表示機能を使っている場合、Googleアドセンスの広告は横幅336pxと横幅300pxを登録しているはずです。
STINGER5では閲覧している環境に応じて、自動的にこの2つを切り替えてくれます。PCの場合は336px、スマホの場合は300pxです。
つまり、スマホ用の広告は横幅300pxを使ってね。とENJIさんは言ってるわけです。
STINGER5では左右に10pxの余白が取ってある
STINGER5の記事本文の横幅は300pxです。
そこに左右10pxずつpaddingで余白が取ってあり、合計320pxとなっています。
このpaddingがポイント。消したらいいんでしょ？いやいやいや。余白大事。これホント。
※paddingは<div id="wrapper">で取っています。
スマホ用広告が原因の横揺れの解決方法
では、横幅320pxの広告は使えないの？と聞かれれば、答えはNO。
実際使ってる人もいますし、このページもスマホで見てもらえれば、ちゃんと表示されているはずです。
全員が解決するとは限りませんが、解決策を2つ提示しておきます。
ネガティブマージンを使う
CSSがSTINGER5のデフォルトの状態であれば、ネガティブマージンで解決できます。
スマホ用広告を<div>で囲み、適当なIDまたはクラスを設定します。CSSで<div>に「margin-left:-10px」と設定すればOKです。
[STINGER5]スマホ用モバイルバナー広告をキレイに設置するテクニック
ただしこれはあくまでもデフォルトの状態であれば…ということです。
CSSを変更していると該当箇所はそれ以外のところに及ぶ場合もあるため、これですべてが解決とはいきません。
スマホ用広告を廃止する
スマホ用広告の効果は正直懐疑的です。
中にはものすごく売り上げが上がってる！という人もいるのかもしれませんが、私の知る限り記事中広告以上にクリックされているという人は知りません。
横揺れの発生でユーザビリティを下げてまで広告を貼る価値はないと思っています。どうしても解決しない場合は、取っ払ってしまうのも1つの手段ではないでしょうか。
まとめ
文字ばかりでわかりにくいかもしれません(´･ω･`)ｼｮﾎﾞｰﾝ
一番言いたいことは、せっかくいい記事書いてるのに、横揺れのせいで読者を逃がしてたらもったいない！ってことなんです。
うちのサイト横揺れ直らないんだけど見てくれない？なんて気軽にTwitterで声かけてもらえば、私見ます！
最近横揺れサイトの原因探しが趣味になりつつあるので( ´,_ゝ`)ｲ ﾋ
もちろん時間がないとできないので、全員のお手伝いができるとは限りませんが出来る限り尽力する所存です！
というわけで、今日はこの辺で。IT系ブロガーあめたま（@ametama_l2l）でした。