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

とある技術の開発日記

Diary of irregular phrase programmer

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

はてなBlog Adsense

きっかけ

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

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

直し方

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

やり方は簡単で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>

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

f:id:airish9:20140927160053j:plain

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