お金プログラム ~だれでもノマド~

ノマド的な稼ぎ方、投資、IT系(プログラミング)に関するブログです。

【便利】はてなブログにアドセンスを簡単に貼る方法【div1行、一括変換できる】

はてなブログにアドセンスを貼る方法について、一つ前の記事で紹介しましたが、今回は応用技もお知らせしますね!

 

divタグ1行で、はてなブログにアドセンスを貼る方法です。

 

前回記事はこちらです。

www.toyo104-memo.com

 

Adsenseのコードをそのまま貼ることもできますが・・・

divタグ1行で、はてなブログにアドセンスを貼る方法、をお伝えしようと思うのですが、ぶっちゃけ、Adsenseのコードをそのまま貼っても表示されます

 

こんな風に貼って……

f:id:toyo--104:20180521230217p:plain

 

ちゃんと表示されます。

f:id:toyo--104:20180521230319p:plain

 

ただ、これだと毎回数行に渡るコードを貼らなくてはいけなくて手間ですし、

 

非表示にしたり、別のコードに差し替えたい時に、各記事を個別で編集しないといけないので面倒です。

 

今回お知らせする方法を使えば、divタグ1行で全ページ一括操作が出来て便利ですよ。

 

 

早速ためしてみよう、アドセンス一括表示コード

では始めましょう。まずは設定を追加です。

以下のコードをコピーして下さい。

 

<script>
addEventListener("DOMContentLoaded", function() {

  var gads = document.getElementsByClassName('gads');

  for (var i = 0, len = gads.length; i < len; i++) {
  
    var adsScript_gads = document.createElement('script');
      adsScript_gads.async = true;
      adsScript_gads.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    
    var adsInsert_gads = document.createElement('ins');
      adsInsert_gads.className = 'adsbygoogle';
      adsInsert_gads.style.display = 'block';
      adsInsert_gads.dataset.adClient = 'ca-pub-*********************';
      adsInsert_gads.dataset.adSlot= '**************';
      adsInsert_gads.dataset.adFormat = 'auto';

    var adsGoogle_gads = document.createElement('script');
      adsGoogle_gads.text = '(adsbygoogle = window.adsbygoogle || []).push({});';

    gads[i].insertAdjacentHTML('beforeend', "<p>スポンサーリンク</p>");
    gads[i].appendChild(adsScript_gads);
    gads[i].appendChild(adsInsert_gads);
    gads[i].appendChild(adsGoogle_gads);
  }
});
</script>

 

★注意点★

adsInsert.dataset.adClient = 'ca-pub-****************';
adsInsert.dataset.adSlot= '**********';

の部分は、ご自分のコードに書き換えて下さい。

 

Adsenseのコードに、

data-ad-client」「data-ad-slot」と2つ記載があると思います。

これを転記すれば大丈夫です。

 

コピーしたコードは、管理画面から、

デザイン⇒カスタマイズ(スパナのマーク)⇒「記事上下のカスタマイズ」⇒「記事下」に、ペーストして、保存してください。

f:id:toyo--104:20180520233150p:plain

 

早速記事にdivタグを貼ってみましょう

貼るのはこの1行だけ!簡単でしょ!

 

<div class="gads"></div>

 

記事の編集画面で【HTML】モードでコピペしてみて下さい。

こんな感じに貼ってあげると……

f:id:toyo--104:20180521233100p:plain

 

アドセンスが表示されますよ。

f:id:toyo--104:20180521233138p:plain

 

沢山貼っても大丈夫! 3つ貼ってみると……

f:id:toyo--104:20180521233215p:plain

 

ちゃんと3つ表示されますよ!

f:id:toyo--104:20180521233239p:plain

 

どうですかね、結構使えそうでしょ!?

 

「アドセンス一括表示コード」を編集してもらえば、他のアドセンスコードや、アフィリエイトコードも貼れます。

 

万一、アカウント停止の懸念があるときは、コードを削除すれば、全ページからアドセンスが消えるので安心^^

 

よかったら、どんどん使ってみてくださいね!!

 

 

また、最後に前回同様で恐縮ですが、注意点です。

 

今回の方法が、Adsenseの運営ポリシーに違反していないか特に確認してません。万一、アカウント停止になっても責任取れませんので、そこだけご注意くださいね。(個人的には大丈夫だと思ってます)

 

それでは、皆様にアドセンスのご加護があらんことを!