【収益化】アドセンスの広告をHTML&CSSでダブルレクタングルにしてみました

ホームページ
この記事は約7分で読めます。

ブログを収益化(マネタイズ)するため、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 の「レスポンシブ広告コードを修正する方法」に従って、直していきました。

レスポンシブ広告コードを修正する方法 - 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>

作業手順:

  1. エディタで、広告ユニットを表示させたい HTMLファイルを開く
  2. メイン(mainクラスの divタグ)の最後に、レスポンシブの広告ユニットコードを2つ連続して、挿入で貼り付け
  3. 2つの広告ユニットコードの insタグのクラス(class)に、追加で固有の名前「adslot_left」と「adslot_right」をそれぞれ指定
  4. 2つの広告ユニットコードのどちらの insタグからも「style=”display:block”」を削除(displayプロパティは、CSS で指定するため)
  5. エディタで、広告ユニットコードを貼り付けた 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;
  }
}

定義内容:

  1. モバイル画面の左の広告枠(adslot_leftクラス)の表示を block にする
  2. モバイル画面の右の広告枠(adslot_rightクラス)には、何も表示しない
  3. パソコン画面の左右の広告枠の表示を inline-block にして、横に並べる
  4. パソコン画面の左右の広告枠には、広告「336×280 レクタングル(大)」が収まるサイズを指定

なお、外部CSSファイルの中で、広告コードのサイズを設定することは、正式には AdSense でサポートしていないそうです。

インターネットで公開

最後に、保存した HTMLファイルと CSSファイルをインターネットで公開しました。

しばらくして確認すると、モバイルでは広告「自動サイズ レスポンシブ」が 1つ表示され、パソコンでは広告「336×280 レクタングル(大)」が 2つ並んで表示されていました。

めでたし、めでたし。

あとがき

ダブルレクタングルに表示される広告って、左右に同じものが表示されていることが、よくあります。

絵画を押し売りする女性

広告が、目立つとことは目立つのですが、押し付けがましくないか心配になります。
将来ダブルレクタングルに関して、別の理論が発表されるまでは、このままですかね。

次は、サイドバーの上にラージスカイスクレーパーの広告を表示します。
もちろん、モバイルの場合の対応もしていますよ。

コメント

  1. weijian より:

    ありがとうございました。できました。

タイトルとURLをコピーしました