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

ブログを収益化（マネタイズ）するため、AdSense（アドセンス）の設定をしています。
以前、事務所のホームページで、AdSense広告を手動で追加してみました。

そこから1歩ステップアップして、いよいよレスポンシブ広告のダブルレクタングル化に挑戦です。

レスポンシブの広告ユニットの確認
レスポンシブの広告ユニットのダブルレクタングル化
1. HTMLファイル
2. CSSファイル
インターネットで公開
あとがき

レスポンシブの広告ユニットの確認

レスポンシブの広告ユニットコードは以前、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 の「レスポンシブ広告コードを修正する方法」に従って、直していきました。

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

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブサイトの要件を満たすように広告コードを修正してください。次の例に従うと、広告コードを正しく修正することができます。重要: CSS メディアクエリのご使用や広告コードの変更の経験が初めての場合は、画面の幅ごとに正確な広告ユ...

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

定義内容：