Googleアドセンスをはてなブログで自動挿入させるには

こんにちは、タカヲさんです。

先日2週間の審査期間を経て、Googleアドセンスに合格したので早速広告を貼っていこうと思います。

 しかし、これって記事１つ１つに毎回コードと貼らないと記事内に広告出せないの？それって面倒じゃない？？ということで色々調べてみます。

はてなブログで広告を貼っている方は、記事の中でも広告を出していますよね？

今回調べた結果
・はてなブログでアドセンス広告の自動挿入位置を自由自在に指定する方法

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

こちらの2サイトを参考に広告の自動挿入を行ってみることにしました。

Googleアドセンスをはてなブログで自動挿入させてみる

目次の上にテキスト広告を入れる

最近は目次の上に広告を入れているサイトが多いですよね？

タカヲさんも同様に目次の上にアドセンスのテキスト広告を入れることにしました。

<!--広告の自動挿入-->
<script>// <![CDATA[
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content > ul');
$target.eq(0).before($('.adsense-0'));
}, false);
// ]]></script>
<div class="adsense-0">
<!--ここに自動挿入したいアドセンス広告のコードをそのままコピペ-->
</div>
<!---->

こちらのコードにある
<!--ここに自動挿入したいアドセンス広告のコードをそのままコピペ-->
の部分を消してアドセンスより取得した広告用のコードをいれてください。

目次上への広告自動挿入用のソースが完成したら、
はてなブログ管理画面の「デザイン＞記事＞記事下」にコードをコピペしてください。
保存をすると目次上に広告が自動挿入されます。
※広告用コードを取得直後などは広告が反映しない場合がありますので、しばらく時間をおいてから確認をしてください。

見出し上に広告を自動挿入する

見出しの上に広告を自動挿入させる方法です。
見出しとは「大見出し」「中見出し」「小見出し」と3種類設定が出来ますが、タカヲさんの日記では、「大見出し」は目次の上に1個だけ入れるようにしているので今回は「中見出し」に対して広告を自動挿入させるようにしたいと思います。

2つめの中見出し前に広告を自動挿入

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

10行目にある「ここに自分のアドセンスコードを貼り付け」という部分を消して、入れたい広告コードを貼り付けてください。
タカヲさんの日記では、336×200のレクタングル（大）を設置しました。

2つ目の中見出しへの広告自動挿入用のソースが完成したら、
はてなブログ管理画面の「デザイン＞記事＞記事下」にコードをコピペしてください。
保存をすると目次上に広告が自動挿入されます。
※広告用コードを取得直後などは広告が反映しない場合がありますので、しばらく時間をおいてから確認をしてください。

var $target = $('.entry-content > h4'); 

 今回は「中見出し」の「h4タグ」をを対象にしましたが、上記部分をh4からh3に変更すると大見出しの上に広告が自動挿入されるようになります。

4つめの中見出し前に広告を自動挿入

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

10行目にある「ここに自分のアドセンスコードを貼り付け」という部分を消して、入れたい広告コードを貼り付けてください。
タカヲさんの日記では、336×200のレクタングル（大）を設置しました。

4つ目の中見出しへの広告自動挿入用のソースが完成したら、
はてなブログ管理画面の「デザイン＞記事＞記事下」にコードをコピペしてください。
保存をすると目次上に広告が自動挿入されます。
※広告用コードを取得直後などは広告が反映しない場合がありますので、しばらく時間をおいてから確認をしてください。

6つめの中見出し前に広告を自動挿入

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

10行目にある「ここに自分のアドセンスコードを貼り付け」という部分を消して、入れたい広告コードを貼り付けてください。
タカヲさんの日記では、336×200のレクタングル（大）を設置しました。

6つ目の中見出しへの広告自動挿入用のソースが完成したら、
はてなブログ管理画面の「デザイン＞記事＞記事下」にコードをコピペしてください。
保存をすると目次上に広告が自動挿入されます。
※広告用コードを取得直後などは広告が反映しない場合がありますので、しばらく時間をおいてから確認をしてください。

何番目に見出しに広告を自動挿入させるかなど、細かい設定方法はこちらを参考にしていただけると非常にわかりやすいと思います。 

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

パソコンからブログを見た際に記事の下に

このように2つ並んだ広告がよく表示されると思います。
こちらではこの2つ並んだ表示させるコードの説明です。

<div id="my-footer">
<p style="text-align: center; font-size: 80%;">スポンサーリンク</p>
<table class="table-css">
<tr>
<td class="td-css">ここに１つ目レクタングルのアドセンスコードを入れる</td>
<td class="td-css">ここに２つ目レクタングルのアドセンスコードを入れる</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>

 このコードをコピーして
「ここに１つ目レクタングルのアドセンスコードを入れる」
「ここに２つ目レクタングルのアドセンスコードを入れる」
の部分をアドセンスの広告コードに差し替えてください。
ここでは、300×250のレクタングルを使用することを推奨します。

上記はスマホ用の広告コードで、次にスマホ用の広告コードを設定します。
「ここにレスポンシブのアドセンスコードを入れる」
の部分をレスポンシブの広告コードに差し替えてください。

広告コードにちょっと手直しをします。

レクタングルの広告コードに

ins class="adsbygoogle"

 という部分がありますので、そちらを

ins class="adsbygoogle mobile"

 と2つとも書き換えてください。

さらにスマホ用の広告コードも

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」にコードをコピペしてください。

以上で設定が完了となります。

記事タイトル下にテキスト広告を入れる

記事を開いたファーストビューとなる記事タイトルの下にも広告を入れてみたいと思います。

ただ、バナーとかを入れてしまうとそちらに目が行ってしまうかもしれないので、今回はテキスト広告を入れます。

こちらに関しては自動挿入などの特殊なコードを使うことはなく、アドセンスから取得した広告コードをはてなブログ管理画面の「デザイン＞記事＞記事上」にコードをコピペしてください。
保存をすると画像のようなイメージで広告が表示されます。
※広告用コードを取得直後などは広告が反映しない場合がありますので、しばらく時間をおいてから確認をしてください。