はてなブログの文章中にはscriptタグが入力できない
正しくはscriptタグを入力しても保存時に消えてしまう、ということなんですが、このことによりはてなブログにはAdSenseの広告タグを好きな位置に手動で設置することができないようになっています。
記事の本文外であれば、タグの手動設置は可能です。
手動で設置してみようと思ったきっかけ
僕がブログを始めた当初からTwitterフォローしているルゥクさん（@luq_mini）は、ブログを始めてわずか4ヶ月目で月7万円の収益を発生させ、そして月30万も達成したものすごいブロガーさんです。
そのルゥクさんの記事で、「【アドセンス】収益がアップする広告の貼り方？「〇〇をイメージして貼る」」という記事があるのですが、
この記事で以下のようなアドバイスをされています。
記事の流れや構成に溶け込ませ、ここぞという場所に設置すると、アクセス数が増えます。
アドセンスも同じイメージで貼ると、クリック率は上がるはずです。
AdSenseの広告も、アフィリエイトの広告と同じように成約までをイメージして記事の流れの中でもっともふさわしい位置に貼りましょう、ということです。
記事内広告はいちおう自動的に全部の記事に入るように設定してはいるのですが、記事によっては「そこはちょっと…」という場所に入ることがあります。これは以下の記事を参考にして設定したものです。
でも、ルゥクさんの記事を見て、「うーん、やっぱり最初からWordPress」で作っておくべきだったぜ…とちょっと後悔したんですが。。
ちょっと待てよ？記事内に任意の場所に出してる広告が1つあるじゃないか！
それが目次の上のリンクユニットです。これは、AdSenseを入れたばかりのころに以下の記事を見ながら設置したものでした。
これアレンジすればできるんじゃね？
……
できました。
はてなブログでAdSenseの記事内広告を記事本文の好きな所に手動で設置する方法
1．以下のコードをはてなブログ管理画面の［デザイン］＞［カスタマイズ］＞［記事］＞［記事下］に入力し、保存する
<script>
addEventListener(“DOMContentLoaded”, function() {
var inarticleads = `
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”><\/script>
<ins class=”adsbygoogle”
style=”display:block;text-align:center;”
data-ad-layout=”in-article”
data-ad-format=”fluid”
data-ad-client=”ca-pub-0000000000000000”
data-ad-slot=”0000000000“></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({});<\/script>
`;
$(‘.inarticle‘).html(inarticleads);
},false);
</script>
「`」から「`」の間に自分のAdSenseコードを入れればいいんですが、注意点がいくつかあります。
- </script>の「/」の前にバックスラッシュ（「\」）を入れる（2箇所）
- adsbygoogle.js は、他のところですでに読み込み済なら記述する必要はない
- data-ad-client および data-ad-slot は自分のコードを入れる
また、上記のコード内の「inarticleads」「inarticle」に関しては任意の名前でかまいませんが、同じ色で示しているところは同じ名前で対応するようにしないといけません。
「inarticle」はどこで使うの？と思うと思いますが、これはこのあと使います。
2．個別の記事の編集画面を開き、任意の場所に空の要素を入れる
<div class=”inarticle“></div>
上記のように先ほどの「inarticle」をclass名とした空のdiv要素を記事内で広告を表示させたい場所に入力します。このときだけ編集モードを「HTML編集」に切り替えます。
<div class=”inarticle“></div> を使わなかった記事にはもちろん広告は表示されません。
以上で完了です。記事を保存して実際のページを確認してみましょう。
▼広告表示イメージ
上記のコードで何をやったのかというと、scriptタグを本文内に直接記述できないので、空の箱だけ用意してあげて実際の記事ページ上でコードを挿入してあげるといった感じです。
ちなみに、この記事では↓ここに手動で記事内広告を置いています。
まとめ
今のところ、まだこの仕組みをつかえるようになっただけで、まだ実際に手動で記事内広告を置いている記事はほとんどありません。
これから全部のページを見直して、それぞれ適切だと思われる場所に手動で広告を設置していき、自動表示にしている記事内広告は最終的には廃止にしたいと考えています。
ちなみに、ルゥクさんの先ほどの記事では
これから話す手法は、「表示広告の内容が、予測できるタイプの記事」であることが大前提です。
という注意書きがあるのですが、これを考えるのはもう少しあとのことにすることにします。
まずは最初のステップとして、好きな場所に記事内広告を表示する、ということだけを実現してみました。
