wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

はてなブログのモバイル表示のトップバナー広告を横長固定に

このはてなブログはレスポンシブデザインじゃなくて、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 ヘルプには、広告ユニットサイズのカスタマイズ方法が載ってますよね。

support.google.com

この方法を応用するしかないと思ったわけです。

<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からチェックしてみたら、こんなかんじになりました。

f:id:wanichan:20200521095316p:plain



ポリシー違反はしてないはずですよ。CSSメディアクエリがないだけで。