ダメ人間ブログ

30代職歴なしニートの闇を放出してるブログです

【はてなブログ】Googleアドセンスの広告を「記事下」と「記事中の見出し前」に自動挿入する方法とそれに使ったコードをまとめました

今回は自分のメモ用に、はてなブログの記事下と見出し前にGoogleアドセンスの広告を自動挿入する方法とその時に使ったコードをまとめておこうと思いました。


基本的には参考にしたブログのリンクを残しておけばいいんですが、ブログなんていつ消えるか分かりませんからね。


リンクだけじゃ、もしブログを辞められてしまった時に困ってしまうので、使ったコードを残しておいた方がいいと思いました。


それに、もしこれからアドセンスに受かって、広告を自動挿入したいと思った方の役にも立つと思ったので。


今回、私が広告を自動挿入されるようにした場所は


・記事下
・1つ目の見出し前
・3つ目の見出し前
・5つ目の見出し前


です。とりあえずこの4箇所に自動挿入しておけば問題ないと思います。


特に、記事中の見出し前はクリック率が高いのでオススメです。ここに貼らない理由がないってくらいね。


どこに貼ったらいいかよく分からないという方は、とりあえず私と同じ4箇所に貼っておけば大丈夫ですよ。


では、それぞれの箇所に広告を自動挿入する方法とコードを紹介したいと思います。


記事下に広告を自動挿入する方法

今回紹介するコードはこちらのサイトを参考にしました。


【Adsense】記事下広告をPCはダブルレクタングル、スマホはレスポンシブにする方法|ボムログ


記事下に、パソコンではダブルレクタングル、スマホではレスポンシブで自動挿入される方法です。


この方法は、パソコン、スマホ、共に最適なものなので一番理想的な表示方法かと思います。


詳しくは上記のサイトを見てもらえれば分かるので、私は使ったコードだけ書いておこうと思います。


細かい事はよく分からないという方は下記のコードをお使いください。


メモ帳などにコピペして、変更箇所を入力していくと分かりやすいと思います。

<div id="my-footer">
<p style="text-align: center; font-size: 80%;">スポンサーリンク</p>
<table class="table-css">
<tr>
<td class="td-css">ここに1つ目レクタングルのアドセンスコードを入れる</td>
<td class="td-css">ここに2つ目レクタングルのアドセンスコードを入れる</td>
</tr>
</table>
ここにレスポンシブのアドセンスコードを入れる
</div>
<script>
var myFooter=document.getElementById("my-footer");
var temp=myFooter.cloneNode(true);
myFooter.parentNode.removeChild(myFooter);
document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>


このコードにアドセンスコードを貼り付ける時の注意点を説明します。


5行目と6行目の「ここに1つ目(2つ目)のレクタングルのアドセンスコードを入れる」という文字を消して、そこにレクタングルのアドセンスコードを入れてください。


9行目の「ここにレスポンシブのアドセンスコードを入れる」という文字を消して、そこにレスポンシブのアドセンスコードを入れてください。


この文字を消さないと、そのままこの文字も広告と一緒に表示されてしまうので注意しましょう。


そしてレクタングルのコードとレスポンシブのコードを入れたらちょっとコードを書き換えます。


レクタングルのアドセンスコードに

ins class="adsbygoogle"

という箇所があるので、そこを

ins class="adsbygoogle mobile"

と書き換えます。2つともです。


もう1つ、レスポンシブのアドセンスコードに

ins class="adsbygoogle"

という箇所があるので、そこを

ins class="adsbygoogle widedisplay"

と書き換えます。


そして出来上がったコードをデザインカスタマイズの「記事下」に貼り付けます。記事下の場所は・・・


ダッシュボード > デザイン > カスタマイズ(スパナのマーク) > 記事 > 記事下


にあります。ここに貼り付けましょう。


そしてもう1つやる事があります。

/* アドセンススマホ対応 */
@media screen and (max-width: 680px) {
.mobile{
display: none !important;
}
}
@media screen and (min-width: 680px) {
.widedisplay{
display: none !important;
}
}
/* テーブルの線非表示,中央寄せ */
.table-css, .td-css {
border-style:none !important;
margin:0 auto;
}


上記のコードをCSSに貼り付けます。CSSの場所は・・・


ダッシュボード > デザイン > カスタマイズ(スパナのマーク) > デザインCSS


にあります。ここに貼り付けましょう。


これで終了です。


ブログの記事下を確認して、パソコンではダブルレクタングル、スマホではレスポンシブで表示されていればOKです。


1つ目の見出し前に広告を自動挿入する方法

1つ目の見出し前に自動挿入するコードを紹介します。


参考にしたサイトはこちら。


はてなブログで記事中の見出しの前、記事下シェアボタンの手前にアドセンスを貼る方法とその手順を画像付きで解説! | Love Wife Life


使ったコードはこちらです。

<!-- 1つめの見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(0).before($('.insentence-adsense'));
}, false);
// ]]></script>
<div class="insentence-adsense">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
ここに自分のアドセンスコードを貼り付け
</p>
</div>
<!-- 1つめの見出し前にアドセンスを配置ここまで -->


10行目の「ここに自分のアドセンスコードを貼り付け」という文字を消して、そこにお好きなアドセンスコードを貼り付けてください。


出来上がったコードを先ほどと同じ、デザイン > カスタマイズ の「記事下」に貼り付ければ完了です。


記事を確認して1つ目の見出しの前に広告が表示されてればOKです。


3つ目の見出し前に広告を自動挿入する方法

次は3つ目の見出しの前に広告を自動挿入する方法です。


これは先ほどの1つ目の見出し前に自動挿入するコードをちょっといじればできます。


参考にしたサイトはこちら。


コピペで簡単!アドセンス広告の自動挿入位置を自由自在に指定する方法(目次や見出し) - ケンキブログ!


詳しくは上記のサイトに書かれている内容を参考にしてください。


細かい事はよく分からないという方は下記のコードをお使いください。

<!-- 3つめの見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(2).before($('.insentence-adsense-2'));
}, false);
// ]]></script>
<div class="insentence-adsense-2">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
ここに自分のアドセンスコードを貼り付け
</p>
</div>
<!-- 3つめの見出し前にアドセンスを配置ここまで -->


使い方は先ほどと同じです。


10行目の「ここに自分のアドセンスコードを貼り付け」を消して、そこにお好きなアドセンスコードを入れて デザイン > カスタマイズ の「記事下」に貼り付けるだけです。


記事を確認して、3つ目の見出しの前に広告が表示されていればOKです。


5つ目の見出しの前に広告を自動挿入する方法

最後は、5つ目の見出しの前に広告を自動挿入する方法です。


これも先ほどのコードをちょっといじっただけです。


細かい事はよく分からない方は、下記のコードをお使いください。

<!-- 5つめの見出し前にアドセンスを配置 -->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > h3');
$target.eq(4).before($('.insentence-adsense-3'));
}, false);
// ]]></script>
<div class="insentence-adsense-3">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
ここに自分のアドセンスコードを貼り付け
</p>
</div>
<!-- 5つめの見出し前にアドセンスを配置ここまで -->


これも使い方は先ほどと同じです。


10行目の「ここに自分のアドセンスコードを貼り付け」を消して、そこにお好きなアドセンスコードを入れて デザイン > カスタマイズ の「記事下」に貼り付けるだけです。


記事を確認して、5つ目の見出しの前に広告が表示されていればOKです。


そんなに長い記事を書かず、見出しは3つくらいしか使ってないならこのコードは貼り付けなくても大丈夫です。


各々の記事の書く長さで貼るか貼らないかはご自由にお決めください。


最後に

ここまでやれば、記事下、1つ目、3つ目、5つ目の見出し前に広告を貼り付ける事ができていると思います。


もし、今回の記事のコードを使ったけどうまくいかないという場合がありましたら、私の記入ミスかもしれないのでコメントで教えてくださると助かります。


とりあえず後でやり直す事になった時のために自分用に残したコードのメモだったので分かりにくかったらすみません。


分かりにくい場合は、私が参考にしたサイトのリンク先へ行き、解説をじっくり見てゆっくり学んでください。


とても分かりやすいサイトなので読めば分かると思います。


最後に、今回、参考にさせていただいたサイトの管理人様、あなた方のおかげで、無事、アドセンス広告を任意の箇所に貼り付ける事ができました。


分かりやすい記事を作成して頂きありがとうございました。