このはてなブログはレスポンシブデザインじゃなくて、PC用とモバイル用とに分かれています。デフォのままですね。
はてなブログProにした頃か、モバイル用320x100のアドセンス広告ユニットを作成しました。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 320x100 for hatena -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>
しかし、このサイズ固定は悉く無視されちゃってます。いきなりレクタングル広告がでーんと。すごく煩わしく感じてるのは私だけでしょうか？
どうにかしてモバイルの横長バナーサイズにしたい、と思っていろいろ模索してました。
Google AdSense ヘルプには、広告ユニットサイズのカスタマイズ方法が載ってますよね。
この方法を応用するしかないと思ったわけです。
<style>
.example_responsive_1 { width: 320px; height: 100px; }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 320x100 for hatena -->
<ins class="adsbygoogle example_responsive_1"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>
しかし、これでは左揃えになってしまいます。んでもって、<p>タグで囲んでインラインスタイルを適用、っと。
<p style="text-align:center">
<style>
.example_responsive_1 { width: 320px; height: 100px; }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 320x100 for hatena -->
<ins class="adsbygoogle example_responsive_1"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
iPhone 7のSafariからチェックしてみたら、こんなかんじになりました。
ポリシー違反はしてないはずですよ。CSSメディアクエリがないだけで。
