はてなブログの記事一覧やカテゴリーページである「archive-category」の記事の間にどうしてもアドセンスを設置したい。そんな想いでとうとう完結編まで来る事ができた。
Googleアナリティクスでカテゴリーページのアクセスが多いことに気付き、ググりまくって、コードを変えたりしてやっとできた・・・。まぁ、前置きは長くなるのでこれくらいにします。
僕ははてなブログproなので、無料の方は厳しいかもしれません。また、導入はこのブログではなく、違うやつでやっています。コードは、はてな記法じゃなくgitからでもなくてすみません。
スマホ記事一覧にアドセンスを挿入するコード
すなばいじりさん（id:psne）の記事を元に作成しました。また、現在はレスポンシブで無いため、スマホのみの表示としています。
【確認】「head」にアドセンスを呼ぶjavascriptが書いてあるか？
「設定」>「詳細設定」>「headに要素を追加」に下記のコードがあるか確認する。複数のアドセンスを設置している場合はこの方法で毎回読み込まなくてよくなる。もしくは、今回の下記コードに追加します。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
「デザイン」>「フッター」に設置するコード
下記のコードを新規アドセンス広告から、「自分のID」「広告ID」を持ってきて書き直してください。
また広告の大きさによって<style>を変更すると良いと思います。PC表示場合は、@mediaを使って切り替えるようです。これは元記事を参照してください。
僕は広告は真ん中に表示するために、<center>を入れました。
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<center><ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-自分のアドセンスID" data-ad-slot="広告ID"></ins></center>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}</style>
アドセンス広告挿入画面
上記のコードを設置したことで、アドセンスを表示することが出来ました。上から２つ目の所に挿入されます。
・トップページの記事一覧
・カテゴリーの記事一覧
中編からの試行錯誤と表示できなかった原因
表示できるまで、色々と試行錯誤することになりましたが、副産物として勉強になったこともありました。ちょっと失敗してからの過程を振り返ります。
①中編ですなばいじりさんのコードをそのまま利用してアドセンス表示できず（他人のせいにするな！！）
アドセンスを動的に生成し、archive-categoryに挿入できないか考え始める
②アドセンスをDOMオブジェクト生成（Javascriptで動的に生成）して、挿入することを調べて考える。勉強が足らず、表示するコードが分からずググりまくる旅にでる。
副産物として、記事中のアドセンスは多くの方のように「はてなブログで「文中にアドセンス広告を入れる」を自動化する方法」を利用していたが、１回記事下or上に表示してから、移動されるのに不満があり、こちらの改善をする。結果として、DOMオブジェクトを使い、記事中のアドセンスを表示できた！
・Adsense を Javascript で動的に作成し、ブログの好きな場所に挿入する
・記事中のアドセンス挿入でアクティブビュー視認可能率が低下する？（続） (id:akanesky)さん
③DOMオブジェクト生成したアドセンスコードを、「archive-category」に表示できないか？と、すなばいじりさんや、池田仮名 (id:bulldra)さんの記事からgithubに行き、コードを眺めてみる。
・はてなブログのアーカイブページやプロフィールページにアドセンス広告を表示させるプラグイン
・はてなブログのカテゴリーや記事一覧にアドセンスなどを表示させるやつ
もう１度すなばいじりさんのコードに立ち返り分析した
中編の記事で出力されなかったコードをもう１度見直すと、改善点が見つかったのでもう１度やってみる。すると、、、、できるではないか！！
劇的before→after
before
間違え①：アドセンス出力コードがない
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
間違え②：アドセンスコードから<ink></ink>をそのまま抜き出しているため、styleがある
間違え③：PC表示しないのに、@media以下がstyleにかいてある。
<!-- カテゴリー一覧にアドセンス -->
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-自分ID"
data-ad-slot="各アドセンスのID"></ins>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}@media (min-width:500px){.my_adslot{width:468px;height:60px;}}@media (min-width: 800px){.my_adslot{width:550px;height:90px;}}</style>
after
<script src="//niyari.github.io/hatenablog-modules/push-content.js" charset="utf-8"></script>
<script>
Htnpsne.PushHTML.init('<center><ins class="adsbygoogle my_adslot" style="display:inline-block" data-ad-client="ca-pub-自分のアドセンスID" data-ad-slot="広告ID"></ins></center>', 'googleads');
</script>
<style>.my_adslot{width:320px;height:100px;}</style>
【課題】記事一覧で記事列の挿入部位を指定する方法が不明
今回は、結局すなばいじりさんのコードをgitから利用しているため、「記事一覧の２番目」にアドセンスを挿入するしか無かった。
しかし、自分のブログにはタイトル下にアドセンスがあるため、４とか５番目くらいに挿入できると都合が良い。
記事中でも「3つ目のh3の前」などと指定ができるので、これを記事一覧でもできないか考えて改善していきたい。最終的には他人のgithubコードを利用せずに、DOMオブジェクト生成して、自分で場所を決めて出力したいな。
とにかく、色んな方の記事やコードに出会いお世話になりました。ありがとうございます。
【追記】Wordpressでは多く行われてるカスタマイズのようです。
・WordPressのループで記事と記事の間に広告を入れて、表示位置を毎回ランダムにする
・【STINGER】記事一覧にかっこよくアドセンスを挿入するWordPressカスタマイズ方法
・【STINGER6】トップページの記事一覧にアドセンスを表示する方法
・【Stinger5】収益増加！トップページ記事一覧にアドセンスをのせるカスタマイズ
・AFFINGER（Ver.20151021）でトップの記事一覧に広告を入れる方法
