ブログを収益化(マネタイズ)するため、AdSense(アドセンス)の設定をしています。
以前、事務所のホームページで、AdSense広告を手動で追加してみました。
モバイル(シングルレクタングル) パソコン(ダブルレクタングル)
そこから1歩ステップアップして、いよいよレスポンシブ広告のダブルレクタングル化に挑戦です。
レスポンシブの広告ユニットの確認
レスポンシブの広告ユニットコードは以前、Google AdSense(グーグル・アドセンス)で、作成してありました。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サンプル-レスポンシブ広告 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
この広告ユニットコードをアドセンスからコピーしてきました。
レスポンシブの広告ユニットのダブルレクタングル化
モバイル(シングルレクタングル) パソコン(ダブルレクタングル)
スポンサー(sponsorクラスの divタグ)をメイン(mainクラスの divタグ)の最後に用意して、そこに AdSense の広告ユニットコードを 2つ入れ、モバイルでは片方を表示しないことにします。
レスポンシブの広告ユニットコードを、AdSense の「レスポンシブ広告コードを修正する方法」に従って、直していきました。
HTMLファイル
エディタで、アドセンスの広告ユニットコードを 2つ連続して、HTMLファイルに追加で貼り付けました。
<body>
~
<!-- .wrapper始まり -->
<div class="wrapper clearfix">
<!-- .main始まり -->
<div class="main">
~
<!-- .sponsor始まり -->
<div class="sponsor sponsor--label">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サンプル-レスポンシブ広告 -->
<ins class="adsbygoogle adslot_left"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- サンプル-レスポンシブ広告 -->
<ins class="adsbygoogle adslot_right"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- .sponsor終わり -->
</div>
<!-- .main終わり -->
~
</body>
作業手順:
- エディタで、広告ユニットを表示させたい HTMLファイルを開く
- メイン(mainクラスの divタグ)の最後に、レスポンシブの広告ユニットコードを2つ連続して、挿入で貼り付け
- 2つの広告ユニットコードの insタグのクラス(class)に、追加で固有の名前「adslot_left」と「adslot_right」をそれぞれ指定
- 2つの広告ユニットコードのどちらの insタグからも「style=”display:block”」を削除(displayプロパティは、CSS で指定するため)
- エディタで、広告ユニットコードを貼り付けた HTMLファイルを保存
なお、insタグのクラス(class)に追加する固有の名前は、英字で始まる任意の文字列ですが、使用できる文字は英数字とアンダースコア(”_”)のみだと、AdSense で決められています。
CSSファイル
エディタで、AdSense広告のスタイルを CSSファイルに定義しました。
モバイルファーストでスタイルを定義しています。
先にモバイル用の設定をして、メディアクエリ(@media)の中でパソコン用の変更点の設定をしています。
.adslot_left {
display: block;
}
.adslot_right {
display: none;
}
@media screen and (min-width: 600px) {
.adslot_left,
.adslot_right {
display: inline-block;
width: 336px;
height: 280px;
}
}
定義内容:
- モバイル画面の左の広告枠(adslot_leftクラス)の表示を block にする
- モバイル画面の右の広告枠(adslot_rightクラス)には、何も表示しない
- パソコン画面の左右の広告枠の表示を inline-block にして、横に並べる
- パソコン画面の左右の広告枠には、広告「336×280 レクタングル(大)」が収まるサイズを指定
なお、外部CSSファイルの中で、広告コードのサイズを設定することは、正式には AdSense でサポートしていないそうです。
インターネットで公開
最後に、保存した HTMLファイルと CSSファイルをインターネットで公開しました。
モバイル(シングルレクタングル) パソコン(ダブルレクタングル)
しばらくして確認すると、モバイルでは広告「自動サイズ レスポンシブ」が 1つ表示され、パソコンでは広告「336×280 レクタングル(大)」が 2つ並んで表示されていました。
めでたし、めでたし。
あとがき
ダブルレクタングルに表示される広告って、左右に同じものが表示されていることが、よくあります。

広告が、目立つとことは目立つのですが、押し付けがましくないか心配になります。
将来ダブルレクタングルに関して、別の理論が発表されるまでは、このままですかね。
つぎは、サイドバーの上にラージスカイスクレーパーの広告を表示します。
もちろん、モバイルの場合の対応もしていますよ。
コメント
ありがとうございました。できました。
どういたしまして。またどうぞ。