オーマイガー東京

オーマイガー東京というブログを24歳東京暮らし新卒2年目のエンジニアが書いています。

【簡単コピペ】はてなブログの記事中にアドセンス広告を自動挿入する方法(解説つき)

f:id:maru_33:20180609001748p:plain

昨日の書いた記事が伸びて嬉しくなったので、
"はてなブログの記事中にアドセンス広告を自動挿入する方法"も紹介、解説しておこうと思います。

www.ohmg.tokyo

簡単3stepで完成なので気軽に試して見てくださいー!

3stepではてなブログの記事中にアドセンス広告を自動挿入する方法

[1step] はてなブログの記事内に自動挿入したいアドセンス広告を作成

以下からアクセスして任意の広告を作成してください。

www.google.com

作成後に表示されるコードはあとで使うので取っておいてください

[2step]自動挿入用のコードをコピペする

アドセンス広告を作成したらあとは以下の自動挿入用のコードをコピペするだけです。
head内に貼り付けてもいいし、デザイン編集画面から任意の場所に貼り付けてもいいです。

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

    let heredoc = `
<div class="middle-adsense">
  <!--先ほど取得したコードを以下にコピペ-->
  

  <!-- ↑↑↑↑↑       ここまで       ↑↑↑↑↑ -->
</div>
`
    let middleAd = $(heredoc);
    let $hTags = $('.entry-content > h2,h3');
    $hTags.eq(Math.floor($hTags.size() / 2)).before(middleAd);
  }, false);

</script>

[3step]一箇所だけコピーしたコードを変更

一箇所だけ変更する箇所があります。 後ろのscriptタグのスラッシュの前にバックスラッシュを入れてください。

こんな感じで

<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
<\/script>

これで完成です!簡単!!

コードの解説

コードの意味を理解しておくと応用が効きますのでぜひ。

<script>
  // DOMを読み込んだタイミングで走るイベントを登録します
  addEventListener("DOMContentLoaded", function() {

    // 追加したいhtmlのヒアドキュメントを作成します
    let heredoc = `
<div class="middle-adsense">
  <!--先ほど取得したコードを以下にコピペ-->
  

  <!-- ↑↑↑↑↑       ここまで       ↑↑↑↑↑ -->
</div>
`
    // ヒアドキュメントをhtmlタグ化します
    let middleAd = $(heredoc);

    // 記事内の要素のみを考えたいので .entry-content の要素を指定
    // .entry-content は はてなブログの記事内を表すクラスです
    // そして、次に指定されたエリア内のh2,h3タグを取得します
    let $hTags = $('.entry-content > h2,h3');

    // h2,h3のタグ合計数 / 2 すると真ん中をある程度表現できます
    // 合計数が奇数の場合、割った数が整数で無くなるのでMath.floorで切り捨てします
    // 切り捨てして整数になった真ん中の値をeqで探し、中間のhタグを取得します
    // その中間のhタグにbeforeで先ほど作成したmiddleAdを追加します
    $hTags.eq(Math.floor($hTags.size() / 2)).before(middleAd);
  }, false);

</script>

という具合です!!

めちゃめちゃ収益が増える目次上のリンクユニット追加方法はこちら

www.ohmg.tokyo