アドセンスのレスポンシブ広告のサイズ設定を外部スタイルシートから行う

2015/05/12
1. Web
2. CSS
3. HTML

Google Adsense のレスポンシブ広告ユニットのサイズ設定を外部 CSS から行うことは禁止されてはいません。

Adsense のヘルプには次のように書かれています。

なお、外部スタイルシートで CSS を使って広告コードのサイズを設定することは、正式にはサポートされていません。

(高度な機能 - レスポンシブ広告ユニットを作成する)

文字通り、正式サポートではないというだけの話です。

外部 CSS ファイルに記述する

他のスタイル同様に、外部 CSS で管理したほうが都合良いので、以下のように書き換えることにしました。

次のコードは、先ほどの引用箇所で例示されているレスポンシブ広告コードです。説明用にこれを使うことにします。

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

サイズ指定を行う場合、通常はこの例のような感じに修正したコードを貼りつけて実装します。

CSS 部分

外部 CSS 化するには、この style 要素内の記述をそのまま外部 CSS ファイルに移植します。

.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }

HTML 部分

あとは style 要素を削除し、残りのコードを随意の場所に貼って実装完了です。

<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

今日学んだこと

レスポンシブ広告の style 要素部分は外部 CSS に書いていい。