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

偏差値ふぉーてぃー

教科書捨ててブログしてる偏差値40台の高校に通う高校生のブログ。

Googleアドセンスのレスポンシブ広告ユニットをディズプレイサイズごとにサイズ指定する方法

ブログ

f:id:quoqlishkun:20150922102248p:plain

はてなブログのカスタマイズが面白くてしょうがない、くぉ(@QuoQlish)です。

先日もカスタマイズをしていたのですが、昔管理画面から出来たレスポンシブ広告ユニットをサイズ指定する方法が現在も可能だったので紹介します。

何をどうするのか?

以前、Googleアドセンスにレスポンシブ広告ユニットが登場した際には管理画面からサイズ指定したコードを書き出すことが出来ました。

しかし、現在では管理画面からその設定をすることが出来ません。ですが、以下のGoogleのサポートページに可能だと言うことが書かれていましたので試してみます。

support.google.com

サイズ指定するコード

通常のレスポンシブ広告ユニットは以下のようなコードになります。

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

それを下記のように書き換えます。説明は後ほどしていきましょう。

<style type="text/css">
.adslot_1(広告の名前) { width: 300px; height: 250px; }
@media (min-width:680px) { .adslot_1(広告の名前) { width: 336px; height: 280px; } }
</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>

まず、追加されたコードは1行目から4行目にあたる部分です。これは、CSS 3のメディアクエリ機能を使った物で画面サイズごとに適応するCSSを変更するものです。

次に、括弧書きで「広告の名前」と書いた部分です。ここでは「adslot_1」になっていますが、自分で設定した広告の名前を入れましょう。

上記のコード記述であれば、画面横幅が680以上あれば336×280pxの広告が表示され、それ以下であれば300×250が表示されるようになります。

まとめ

いかがでしたか?

意外と簡単にできますし、これで変なサイズの広告を差し込まれることもなくなります。また、他のサイズ指定方法もあるようなので興味がある方はチェックしてみてください。

また、はてなブログは意外とカスタマイズが効くので当ブログも広告含めカスタマイズを色々しました。そちらもまた紹介出来ればと思います。