今回は自分のメモ用に、はてなブログの記事下と見出し前にGoogleアドセンスの広告を自動挿入する方法とその時に使ったコードをまとめておこうと思いました。
基本的には参考にしたブログのリンクを残しておけばいいんですが、ブログなんていつ消えるか分かりませんからね。
リンクだけじゃ、もしブログを辞められてしまった時に困ってしまうので、使ったコードを残しておいた方がいいと思いました。
それに、もしこれからアドセンスに受かって、広告を自動挿入したいと思った方の役にも立つと思ったので。
今回、私が広告を自動挿入されるようにした場所は
・記事下
・１つ目の見出し前
・３つ目の見出し前
・５つ目の見出し前
です。とりあえずこの４箇所に自動挿入しておけば問題ないと思います。
特に、記事中の見出し前はクリック率が高いのでオススメです。ここに貼らない理由がないってくらいね。
どこに貼ったらいいかよく分からないという方は、とりあえず私と同じ４箇所に貼っておけば大丈夫ですよ。
では、それぞれの箇所に広告を自動挿入する方法とコードを紹介したいと思います。
記事下にPCではダブルレクタングル、スマホではレスポンシブで広告を自動挿入する方法
今回紹介するコードはこちらのサイトを参考にしました。http://bombkun.com/2017-05-20-161455
記事下に、パソコンではダブルレクタングル、スマホではレスポンシブで自動挿入される方法です。
この方法は、パソコン、スマホ、共に最適なものなので一番理想的な表示方法かと思います。
詳しくは上記のサイトを見てもらえれば分かるので、私は使ったコードだけ書いておこうと思います。
細かい事はよく分からないという方は下記のコードをお使いください。
メモ帳などにコピペして、変更箇所を入力していくと分かりやすいと思います。
<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>
このコードにアドセンスコードを貼り付ける時の注意点を説明します。
５行目と６行目の「ここに１つ目（２つ目）のレクタングルのアドセンスコードを入れる」という文字を消して、そこにレクタングルのアドセンスコードを入れてください。
９行目の「ここにレスポンシブのアドセンスコードを入れる」という文字を消して、そこにレスポンシブのアドセンスコードを入れてください。
この文字を消さないと、そのままこの文字も広告と一緒に表示されてしまうので注意しましょう。
そしてレクタングルのコードとレスポンシブのコードを入れたらちょっとコードを書き換えます。
ins class="adsbygoogle"
という箇所があるので、そこを
ins class="adsbygoogle mobile"
と書き換えます。２つともです。
もう１つ、レスポンシブのアドセンスコードに
ins class="adsbygoogle"
という箇所があるので、そこを
ins class="adsbygoogle widedisplay"
と書き換えます。
そして出来上がったコードをデザインカスタマイズの「記事下」に貼り付けます。記事下の場所は・・・
ダッシュボード ＞ デザイン ＞ カスタマイズ（スパナのマーク） ＞ 記事 ＞ 記事下
にあります。ここに貼り付けましょう。
そしてもう１つやる事があります。
/* アドセンススマホ対応 */
@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
にあります。ここに貼り付けましょう。
これで終了です。
ブログの記事下を確認して、パソコンではダブルレクタングル、スマホではレスポンシブで表示されていればOKです。
１つ目の見出し前に広告を自動挿入する方法
１つ目の見出し前に自動挿入するコードを紹介します。参考にしたサイトはこちら。
はてなブログで記事中の見出しの前、記事下シェアボタンの手前にアドセンスを貼る方法とその手順を画像付きで解説！ | 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行目の「ここに自分のアドセンスコードを貼り付け」という文字を消して、そこにお好きなアドセンスコードを貼り付けてください。
出来上がったコードを先ほどと同じ、デザイン ＞ カスタマイズ の「記事下」に貼り付ければ完了です。
記事を確認して１つ目の見出しの前に広告が表示されていればOKです。
３つ目の見出し前に広告を自動挿入する方法
次は３つ目の見出しの前に広告を自動挿入する方法です。これは先ほどの１つ目の見出し前に自動挿入するコードをちょっといじればできます。
参考にしたサイトはこちら。
http://www.minimalist-kenki.net/entry/auto-adsense
詳しくは上記のサイトに書かれている内容を参考にしてください。
細かい事はよく分からないという方は下記のコードをお使いください。
<!-- 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行目の「ここに自分のアドセンスコードを貼り付け」を消して、そこにお好きなアドセンスコードを入れて デザイン ＞ カスタマイズ の「記事下」に貼り付けるだけです。
記事を確認して、３つ目の見出しの前に広告が表示されていればOKです。
５つ目の見出しの前に広告を自動挿入する方法
最後は、５つ目の見出しの前に広告を自動挿入する方法です。これも先ほどのコードをちょっといじっただけです。
細かい事はよく分からない方は、下記のコードをお使いください。
<!-- 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行目の「ここに自分のアドセンスコードを貼り付け」を消して、そこにお好きなアドセンスコードを入れて デザイン ＞ カスタマイズ の「記事下」に貼り付けるだけです。
記事を確認して、５つ目の見出しの前に広告が表示されていればOKです。
そんなに長い記事を書かず、見出しは３つくらいしか使ってないならこのコードは貼り付けなくても大丈夫です。
各々の記事の書く長さで貼るか貼らないかはご自由にお決めください。
～追記～ 記事下にシンプルに広告を自動挿入する方法
記事下に広告を自動挿入する方法として、先ほど一番最初に「PCではダブルレクタングル、スマホではレスポンシブ」で表示される方法を紹介しました。でも、中には「ダブルレクタングルは主張が強すぎてうっとおしいかなぁ・・・PCでもスマホでもシンプルに１つの広告だけを表示したい」という方もいるかもしれません。
そんな方の為に、記事下にシンプルに広告を自動挿入する方法も紹介しておきます。
使うコードはこちら。
<!--記事下アドセンス-->
<div id="my-footer">
<p style="text-align:center; font-size: 80%" >スポンサーリンク<br>
※ここに自分のアドセンスコードを貼り付け
</p>
</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>
<!--記事下アドセンスここまで-->
使い方はシンプルです。
４行目の「※ここに自分のアドセンスコードを貼り付け」という文字を消して、そこにお好きなアドセンスコードを入れて デザイン ＞ カスタマイズ の「記事下」に貼り付けるだけです。
記事を確認して、記事下に広告が表示されていればOKです。
最後に
ここまでやれば、記事下、１つ目、３つ目、５つ目の見出し前に広告を貼り付ける事ができていると思います。もし、今回の記事のコードを使ったけどうまくいかないという場合がありましたら、私の記入ミスかもしれないのでコメントで教えてくださると助かります。
とりあえず後でやり直す事になった時のために自分用に残したコードのメモだったので分かりにくかったらすみません。
分かりにくい場合は、私が参考にしたサイトのリンク先へ行き、解説をじっくり見てゆっくり学んでください。
とても分かりやすいサイトなので読めば分かると思います。
最後に、今回、参考にさせていただいたサイトの管理人様、あなた方のおかげで、無事、アドセンス広告を任意の箇所に貼り付ける事ができました。
分かりやすい記事を作成して頂きありがとうございました。
