その他

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

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

www.ohmg.tokyo

www.ohmg.tokyo

ABOUT ME
maru
maru
オーマイガー東京(編集長)/キグルミだ熱狂(gt, 作詞作曲)/新卒2年目エンジニアです。赤坂と浅草におります。最近作った→ https://lgtmeow3.tokyo