【収益化】アドセンスの自動広告をHTML&CSSで設定してみました

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

前回、WordPress（ワードプレス）で、AdSense の広告が表示されるようになりました。

事務所のホームページにも広告を表示
まずは、広告コードだけ入れてみる
パソコンでの表示は物足りない
あとがき

事務所のホームページにも広告を表示

ボクは、行政書士事務所のホームページも運用しています。
そちらは、HTML と CSS で作っています。

最初は、行政書士事務所のホームページには、広告を入れない方針でした。
しかし、いろいろ考えてみた結果、広告を入れてみることにしました。
方針変更です。

収益化できれば、それはそれで魅力的です。
それ以上に、広告コードを直接 HTML に入れて、いろいろやってみたいというのが、本音です。

行政書士矢野浩一事務所 (廃業) －遺言・相続・家系図のことなら

岐阜県不破郡関ヶ原町にある行政書士矢野浩一事務所 (廃業)です。遺言・相続手続きの支援、家系図の作成をおもな取り扱い業務としています。わからないことがありましたら、お気軽にお尋ねください。ちなみにブログを日々更新中ですので、よろしければ御覧ください。

まずは、広告コードだけ入れてみる

次のようにして、広告コードを HTMLファイルに追加しました。

ちなみにこの広告コードは、AdSense の利用申請のときに、headタグの中に追加で貼り付けた広告コードと、まったく同じです。
すでにやっている場合は、やる必要がありません。

アドセンスにログイン

まずは、Google AdSense（グーグル・アドセンス）にログインしました。

広告コードのコピー

つぎに、AdSense の広告コードをコピーしました。

作業手順：

メニュー > 広告の設定 > コンテンツ > 自動広告へと移動
「自動広告」画面で、右上の「自動広告を設定」をクリック

作業手順：

「サイトに自動広告を設定」画面で「コードスニペットをコピー」をクリック

結果として、広告コードがコピーされました。

広告コードの貼り付け

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

<head>
  ～
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="favicon.ico">
  <script src="js/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <!-- Google AdSense 広告コード 始まり -->
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-XXXXXXXXXXXXXXXX",
      enable_page_level_ads: true
    });
  </script>
  <!-- Google AdSense 広告コード 終わり -->
</head>

作業手順：