はてなブログのモバイル表示でGoogle AdSenseの位置を調整した話

きっかけ

酢酸先生に私のブログを見てもらった際にご意見を頂きました。

はまもつさんのブログの広告をmargin-left:10pxしたい

— 酢酸(さくさん) (@ch3cooh) 2014, 9月 26

@nakaji 返事が遅くなりました！プロフィール上部のバナー広告に左マージンが8pxくらい空いているので、320pxの広告が収まっていないのが原因かもしれないです。前に記事を書きました http://t.co/jSDM6iR7Im pic.twitter.com/F5ORnafFT5

— 酢酸(さくさん) (@ch3cooh) 2014, 9月 14

この問題は、はてなブログモバイル版の仕様が原因のようで色々な方が解決方法をご紹介しています。

直し方

上の記事ではAdsenseの広告の横幅を300px以内のサイズで使いましょう！との事なのですが、しばやん先生がかなりスマートな方法で解決方法を教えてくれました！

なかじブログはマイナスのマージンで調整したほうがいいよ

— しばやん (@shibayan) 2014, 9月 14

やり方は簡単でGoogle AdSenseから吐き出されるコードのstyleにmargin-left: -10pxを付与するだけです。

やってみた

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- モバイル -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:50px;margin-left: -10px"
     data-ad-client="ca-pub-1293206454245978"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードを入れた状態の画面は以下のようになります。

AdSenseの広告も横幅ピッタリに収まって、iPhoneでも横スクロールする事がなくなりました！！