はてなブログでアドセンスを見出し前やシェアボタン前の記事直下に自動で挿入する方法

今日ははてなブログ内の任意の位置にアドセンスを自動で貼り付ける方法について紹介を。
皆さん、アドセンスってどうやって貼り付けていますか？
管理画面の記事上・記事下に貼り付けて自動で入れ込んでいる人もいれば任意の位置に手動で貼っている人もいると思います。
ただ、記事上にコードを挿入すると画面最上部に配置されるし、記事下に貼り付ければシェアボタンの下側にアドセンスが来ちゃいますよね。
これは少なからず、クリック率を下げる要因になります。
手動で貼り付ける方法も面倒ですよね。

以前の記事でも紹介しましたが、個人的にいいなと思うアドセンスの広告配置が導入文末尾(最初の見出しの上)と記事直下なんですよね。
wordpressだとプラグインで簡単に任意の場所に挿入できるのですが、はてなブログだとその機能がないようなので今日はアドセンスを見出し前や記事直下に自動で挿入する方法について備忘録を兼ねてメモ。
もちろん、アドセンス以外にも過去記事へのリンクを入れ込んだり、他の広告や任意の文章を表示させることもできます。

はてなブログで見出しの前にアドセンスを挿入する方法

なにか良い方法はないかなーと探していたらこちらの記事を参考にさせていただきました。とても詳しく紹介されています。
uxlayman.hatenablog.com
方法はとても簡単で下記コードを管理画面に挿入するだけです。
それではさっそく見ていきます。
まず下記コードを丸ごとコピペします。

<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>

管理画面から『デザイン』＞『カスタマイズ』＞『フッタ』に遷移します。そして、フッタの箇所にそのままこのコードを貼り付けます。
貼り付けた後は、アドセンスコードも貼り付けないといけないので、アドセンスからコードを取得します。
アドセンスから広告のコードを取得する方法はこちらの記事で紹介しています。
www.mutant-tetsu.com
アドセンスのコードを貼り付けるとこんな感じですね。

この箇所にアドセンスコードを貼りつけるとありますが、このすぐ下にアドセンスコードを貼り付けるだけでOKです。
上記コードだと大見出しの上にアドセンスが表示されるようになります。

もし、中見出しの前にアドセンスを表示したい場合はコード上側にある、var $target = $('.entry-content > h3');という記述の『h3』という部分を『h4』に変更することで可能になります。
var $target = $('.entry-content > h4');←こんな感じですね。

記事直下にアドセンスを自動で挿入する方法

次に記事直下にアドセンスを自動で配置する方法を見ていきます。
管理画面の『記事下』の箇所にアドセンスを貼り付けても表示されますが、シェアボタンの下側になってしまうので記事が終わった箇所で表示するようにしてみます。
こちらのブログで詳しく紹介されていたので参考にさせていただきました。
chipspd.hatenadiary.jp
それでは実際に見ていきます。とは言っても、先ほどと作業はほぼ一緒です。まず下記のコードをコピペします。
次に管理画面の『デザイン』＞『カスタマイズ』＞『記事』＞『記事下』の箇所にコードを貼り付けます。
先ほどと同じようにこの箇所にアドセンスコードを貼りつけるの下にアドセンスのコードを挿入します。

<div id="my-footer">
<p style="text-align:center;font-size: 80%" >スポンサーリンク<br>
<!--この箇所にアドセンスコードを貼り付ける-->
</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>

さっそく表示を確認してみます。

シェアボタンより上にアドセンスが挿入されていますね。

モバイルの表示も統一する

ここまでの方法だとパソコンから見た場合のアドセンス広告は確認できたと思います。
次にモバイルからアクセスした場合の表示も統一しましょう。
『デザイン』＞『スマートフォン』＞『記事』と『フッタ』にあるPCと同じHTMLを表示するの箇所にチェックを入れ変更を保存するをクリックします。
これでモバイル側でも表示が統一されるようになります。

広告の差し替えなどに便利

アドセンスやASPの広告を使う際に、1記事ずつ手動で挿入しているとかなりの時間がかかってしまいます。
しかし、こちらの2ブログで紹介されている内容を利用することで一箇所のコードを差し替えるだけで全記事に反映させることができます。
全てのアドセンス広告をレクタングル大に差し替えたい、記事末尾に特定の文章を一括で挿入させたい時などに活躍すると思います。

まとめ

今回、アドセンスの広告を導入文の後(見出しの前)や記事直下に自動で挿入する方法を紹介しました。
この方法を使えば以下のような感じで転用できます。

• アドセンスを自動で挿入する
• ASPの広告を自動で挿入する
• 特定の記事へのリンクを自動で挿入する
• 特定の文章を記事に一括して挿入する

転用範囲はいろいろと広いと思います。記事の導入文の後にアドセンスを入れたかった！という人や、手動でコードを貼り付けていた人はぜひ参考にしてみてください。