【Google AdSense】縦幅固定・横幅可変のレスポンシブの広告を作成する方法

今回は久しぶりにGoogle AdSense関連の記事です。

レスポンシブの広告で縦幅は固定で、横幅は可変のレスポンシブの広告を作成する方法を書きます。

自分の場合は、個別記事のページの上部に表示させている広告になります。

Sponsored Links

縦幅固定・横幅可変のレスポンシブ広告の設定方法

この方法は払い出されるAdSenseのコードに少し手を加えることになるのですが、Google AdSenseの公式ページでも紹介されている方法なので、規約上は問題ありません。

【参考】レスポンシブ広告コードを修正する方法 - AdSense ヘルプ 

まず下記が普通に取得したレスポンシブのコード＞＞

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

このままでは縦も横も可変になるので、自分のサイトにあったデザインに変更します。

自分の場合は、縦は100pxで固定、

横は320px〜970pxの範囲で可変となるように指定しています。

下記が手を加えた後のコードです。＞＞

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ad_sample_code -->
<ins class="adsbygoogle"
style="display:inline-block;min-width:320px;max-width:970px;width:100%;height:100px"
data-ad-client="ca-pub-***********"
data-ad-slot="217719*****"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記の「style=」の行を変更することで自分好みのサイズに変更ができます。

まず、「display:block」は「display:inline-block」に変更します。 

横は320px〜970pxの範囲で固定にしたいので、

「min-width:320px;max-width:970px;width:100%」としています。

また、縦は100pxで固定にしたいので、 

「height:100px」とだけ指定。

それ以外の部分はいじっていません。

変更後のコードを広告を載せたい部分に貼り付ければ完了です。

自分の場合は、個別記事のトップにこの広告を表示されていますので、single.php（※Stinger7の場合）の上部に貼り付けています。 

それほど難しくはありませんので、ぜひ参考になれば幸いです。 

Sponsored Links