【収益化】アドセンスの広告をHTML&CSSでサイドバーの上に表示してみました

ブログを収益化（マネタイズ）するため、AdSense（アドセンス）の設定をしています。

前回、事務所のホームページで AdSense のレスポンシブ広告をダブルレクタングル化してみました。

ついでに、モバイルでは記事の上に、パソコンではサイドバーの上に、最適なサイズのレスポンシブ広告が表示されるようにしてみました。

レスポンシブの広告ユニットの確認
レスポンシブの広告ユニットをサイドバーの上に
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>

この広告ユニットコードを AdSense からコピーしてきました。

レスポンシブの広告ユニットをサイドバーの上に

アップサイド（upsideクラスの asideタグ）をメイン（mainクラスの divタグ）の上に用意して、そこに AdSense の広告ユニットコードを入れ、モバイルとパソコンで表示位置を変えることにします。

レスポンシブの広告ユニットコードを、AdSense の「レスポンシブ広告コードを修正する方法」に従って、直していきました。

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

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブサイトの要件を満たすように広告コード

HTMLファイル

エディタで、AdSense の広告ユニットコードを、HTMLファイルに追加で貼り付けました。

<body>
  ～
  <!-- .wrapper始まり -->
  <div class="wrapper clearfix">
    <!-- .upside始まり -->
    <aside class="upside">
      <!-- .sponsor始まり -->
      <div class="sponsor">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- 事務所－レスポンシブ広告 -->
        <ins class="adsbygoogle adslot_top"
             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終わり -->
    </aside>
    <!-- .upside終わり -->
    <!-- .main始まり -->
    <div class="main">
      ～
    </div>
    <!-- .main終わり -->
    <!-- .sidebar始まり -->
    <aside class="sidebar">
      ～
    </aside>
    <!-- .sidebar終わり -->
  ～
</body>

作業手順：

エディタで、広告ユニットを表示させたい HTMLファイルを開く
ラッパー（wrapperクラスの divタグ）の最初に、上位表示領域（upsideクラスの asideタグ）を作り、その中にレスポンシブの広告ユニットコードを、挿入で貼り付け
広告ユニットコードの insタグのクラス（class）に、追加で固有の名前「adslot_top」を指定
広告ユニットコードの insタグから「data-ad-format=”auto”」を削除（自動で広告サイズを決められないように）
エディタで、広告ユニットコードを貼り付けた HTMLファイルを保存

なお、insタグのクラス（class）に追加する固有の名前は、英字で始まる任意の文字列ですが、使用できる文字は英数字とアンダースコア（”_”）のみだと、アドセンスで決められています。

CSSファイル

エディタで、AdSense広告のスタイルを CSSファイルに定義しました。
モバイルファーストでスタイルを定義しています。

先にモバイル用の設定をして、メディアクエリ（@media）の中でパソコン用の変更点の設定をしています。

@media screen and (min-width: 600px) {
  .upside {
    float: right;
    width: 300px;
  }

  .main {
    float: left;
    width: 728px;
  }

  .sidebar {
    float: right;
    width: 300px;
  }
}

.adslot_top {
  height: 100px;
}

@media screen and (min-width: 600px) {
  .adslot_top {
    height: 600px;
  }
}

※マージンとパディングは、省略してあります。

定義内容：

モバイル画面では、HTMLに書かれた順に縦に並べるだけなので、設定はなし
パソコン画面では、上位表示領域（upsideクラス）を右に、メイン（mainクラス）を左に、サイドバー（sidebarクラス）を右に配置。なお、幅（width）は自分のサイトに合わせる
モバイル画面の上の広告枠（adslot_topクラス）には、広告「320×100 ラージモバイルバナー」が収まるサイズを指定
パソコン画面の上の広告枠（adslot_topクラス）には、広告「300×600 ラージスカイスクレーパー」が収まるサイズを指定

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