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

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

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

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

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

スポンサーリンク

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

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

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

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

新しい広告ユニット

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

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

広告ユニットの選択

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

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

新しい広告ユニットの名前の設定

作業手順:

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

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

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

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

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>

作業手順:

  1. エディタで、広告ユニットを表示させたい HTMLファイルを開く
  2. 広告ユニットを表示したい場所に、広告ユニットコードを挿入で貼り付け
  3. エディタで、広告ユニットコードを貼り付けた 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クラスを追加することで、文字列「スポンサーリンク」が付きます。

インターネットで公開

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

しばらくしてパソコンで確認すると、手動で広告ユニットコードを貼り付けた場所に、最適なサイズの広告が表示されていました。

ホームページの広告

また、ブラウザの検証モードにして、モバイル表示で再読み込みすると、モバイルに最適化された広告が表示されました。

あとがき

もっと広告を表示しても良いという話も聞きます。

また、コンテンツの下に、レクタングル(大)を2つ並べると良いという話も聞きます(通称、ダブルレクタングル)。

しかし、とりあえずは、グローバルナビの下とサイドバーの下だけにしておきました。

自動運転車

残りの部分は、AdSense の自動広告が追加してくれるのを期待して、今日はこのへんにしておきます。

追記

実は、ダブルレクタングルをやってみました。
しばらく様子を見ましたが、今までのところ、AdSense からは注意されていません。

コメント

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