ゼロツク

最終的にゼロから人の役に立つ物を作りたいなぁ

はてなブログでトップページやカテゴリー一覧に特定のHTMLを挿入する

前回、はてなブログで記事一覧やカテゴリー記事にアドセンスを導入するメモという記事の中で、「カテゴリー一覧にアドセンスを挿入したい」という想いで、とりあえずググって、記事を拝見しコピペして動作するか確認、失敗する。という所までいった。

今回は、どこに原因があってアドセンスが表示されなかったのか?段階を踏んで検証することで解決の糸口を探したい。そんなメモ。
プログラミングは初心者であり、あくまで素人の仮説を積み重ねるしかないので、参考になるかどうかはわかりません。

前回で記事一覧にHTML挿入するコードはいくつかありそうだったが、1番カスタマイズしやすそうな、すなばいじりさんのコードを元にやってみる。

アドセンスが表示されない原因は?

【すなばいじりさんのコードアドセンスが表示されない】

・アドセンスが表示されない考えられる原因は?
→Javascriptが正常に動いていない
→表示するHTMLが間違っていて、アドセンスコード側に問題がある

検証すること。
・Javascriptが動いているか確認する
・特定のHTMLが表示されることを確認する

→すなばいじりさんも現在使ってるコードを利用して、まずHTMLを表示してみる。
 はてなproのため、フッターに挿入。
 スマホとPCは別々にしているため、スマホのフッターです。
 本番表示はせずに、デザインの段階でプレビューを確認。

f:id:makio1186:20160127203018p:image

うん。表示はされるようだ。

ということは、すなばいじりさんのコードそのままで、javascriptは正常に動作しているはず。HTMLも出力される。

HTMLを弄って、自分の表示したい記事を挿入してみると、下記のように表示される。特定のHTMLは挿入できることが検証できた。

f:id:makio1186:20160127203219p:image

再度アドセンスでやってみた結果

次に、もう1度アドセンスで表示を挑戦してみる。

320×100のサイズのアドセンスを、記事一覧の中に挿入したい。そこで下記のコードをすなばしりさんの記事を参考に「デザイン>フッター」に挿入する。

<!-- カテゴリー一覧にアドセンス -->
<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>

 

 

f:id:makio1186:20160127203427p:image

 アドセンスの所に問題がある?

結果は上記の画像のように、HTMLは挿入されなかった。アドセンスも新規広告のまま、アクティブにならず、配信環境が整っていないようだ。

CSSの部分での指定は、「@media」以降がPCでそれ以外がスマホなので、サイズの指定も間違っていないはず。

結果としては、下記のアドセンスのコードに何かしらの問題かあることが、また仮説として浮かび上がった。まだ表示までの道のりは長そうだ。

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

 【追記】

やっと出来た、完結編!