りーずです。忘れないための記事です。

Songstoryに試験的にアドセンス広告を入れてみました。

トップに横長のバーのような広告を入れたかった。

まず、最初に広告を作らないといけませんね。Googleアドセンスの広告ユニットで新規広告を作ります。

広告はレスポンシブを選択して作成します。

出来たコードは

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

（これを①とします。）

こういうものになると思います（数字の00～00の部分には適宜数字が入ります）

ここで、Googleに
「Google Adsenseで画面の幅ごとに正確なサイズを指定する」というチュートリアルがあるので、それをほぼそのまま使用します。

「レスポンシブ広告コードを修正する方法」
https://support.google.com/adsense/answer/6307124?hl=ja

これの「画面の幅ごとに正確な広告ユニットサイズを指定する場合の例」という項目を見ます。

サンプルコードに

<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>

（②とします）

とあります。
使うのは前半部分だけです。前半のstyleの部分はスタイルシートですね。
ここで画面幅を判別して、広告のサイズを変えているようです。

今回の広告は①のようなものなので、②のstyleの部分だけをコピペして、①の前に持ってきます。

<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>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

ここでは、コピペしたあとに、後半の

<ins class="adsbygoogle"

だった部分にスタイルシートを使いたいので

<ins class="adsbygoogle adslot_1"

としてあげています。adslot_1という名前のスタイルシートを適応させているわけですね。
このadslot_1という名前は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; } }
.adcenter {
margin: auto;
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1 adcenter"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このような感じでとりあえず表示されるようになりました。margin: autoをしているだけですが、きちんと真ん中に表示されました。adcenterというのも適当な名前です。アドセンスをセンターにもっていきたいのでadcenterです。

CSSをそのまま打ち込んでいるので色々と初心者ですが、とりあえず動作しているので大丈夫ということでお開きにしたいと思います。

ちなみにこれは

• 画面幅 500px 未満: 広告ユニット 320×100
• 画面幅 500px～799px: 広告ユニット 468×60
• 画面幅 800px 以上: 広告ユニット 728×90

という設定なので、あとは数値の部分を変えてあげれば色々とカスタマイズ可能なはずです。

とりあえずのメモでした。