【収益化】アドセンスの任意広告をHTML&CSSで挿入してみました

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

前回、事務所のホームページで自動広告を設定しましたが、パソコン画面での自動広告がちょっと物足りません。

というわけで、自分で任意の場所に追加してみることにしました。

レスポンシブの広告ユニットの作成
レスポンシブの広告ユニットコードの貼り付け
1. HTMLファイル
2. CSSファイル
インターネットで公開
あとがき
1. 追記

レスポンシブの広告ユニットの作成

Google AdSense（グーグル・アドセンス）で、次のようにして、広告ユニットを作成しました。

新しい広告ユニットの作成

メニュー > 広告の設定 > 広告ユニットと移動して、まずは「＋新しい広告ユニット」をクリックしました。

作成する広告の種類の選択

つぎに「テキスト広告とディスプレイ広告」をクリックしました。

広告の名前とサイズとタイプを指定

新しい広告ユニットの設定をしました。

作業手順：

名前には、あとで見て分かるような名前を指定
広告サイズが、「自動サイズレスポンシブ」であることを確認
広告タイプが、「テキスト広告とディスプレイ広告」であることを確認
「保存してコードを取得」をクリック
「広告コード」ウィンドウで、広告コードをすべて選択してコピー

結果として「自動サイズレスポンシブ」の広告ユニットコードが、コピーされました。

レスポンシブの広告ユニットコードの貼り付け

エディタで、次のようにして、広告ユニットコードを設定しました。

HTMLファイル

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

<body>
  ～
  </header>
  <!-- .header終わり -->

  <!-- .wrapper始まり -->
  <div class="wrapper clearfix">
    <!-- .sponsor始まり -->
    <div class="sponsor">
      <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>
    </div>
    <!-- .sponsor終わり -->
    <!-- .main始まり -->
    <div class="main">
  ～
</body>

作業手順：

エディタで、広告ユニットを表示させたい HTMLファイルを開く
広告ユニットを表示したい場所に、広告ユニットコードを挿入で貼り付け
エディタで、広告ユニットコードを貼り付けた HTMLファイルを保存

CSSファイル

エディタで、AdSense広告のスタイルを CSSファイルに定義しました。

/* スポンサーリンク */

.sponsor {
  position: relative;
  margin-bottom: 1em;
}

.sponsor--label {
  padding-top: 1.75em;
}

.sponsor--label::before {
  position: absolute;
  top: 0;
  content: 'スポンサーリンク';
}

HTMLファイルで、sponsorクラスの後ろに、sponsor- -labelクラスを追加することで、文字列「スポンサーリンク」が付きます。