はてなブログのカテゴリ一覧トップにアドセンスを挿入する方法

こんにちは、元情報システム部のちびくじらです。
はてなブログのカテゴリ一覧トップにアドセンスを挿入したいと思って、
いろいろ調べていたら、よい解決方法があった。実際に広告表示できるまでに、つまずいたところを記入していく。

いま、カテゴリ一覧トップにアドセンスを挿入したい人、詰まっている人、
これから設置を検討している人は、確認してみてほしい。

はてなブログのカテゴリ一覧トップにアドセンスを挿入してみた

まず、結論から、これから伝える内容を実施することで、こうなりますよって話から。

スマホ　カテゴリ一覧トップ

カテゴリ一覧のトップにGoogle アドセンスの広告が配置される。

PC　カテゴリ一覧トップ

PCも同様で、カテゴリ一覧のトップにGoogle アドセンスの広告が配置される。

この配置する広告は、レスポンシブデザインになっている。
これから紹介するコード内では、

　・横幅が800px以上だったら、320✕100、
　・横幅が799px以下だったら、300✕250

で表示するよう調整している。

参考にしたページ

この仕組みを実行するにあたって、参考にしたページはこちら。
少し詰まった点があるので記入していく。

はてなブログのカテゴリ一覧ページアドセンス広告表示で詰まった点

詳しい設置方法はリンク先を確認してもらえれば大丈夫だが、
注意点は以下の２つ。

・ソースを使うときの注意点として、２つの広告ユニット（レスポンシブが良い）を作成すること

・作成して貼り付けるときは、文字列として記入すること。

２番目について詳しく書くと、addAdsenseArchiveの引数は、””ダブルクオートで囲わないと上手く動作しない(*)ので注意しないといけない。コードを確認しても、この引数の記入方法が書いてなくて、クライアントID、上部広告スロット、下部広告IDスロットの箇所に、英数字として貼り付けてみたところアドセンスが表示されなくて詰まってしまった。

若干、作者の説明が不足しているような気もするけど、無料でこんなに役立つソースを公開していただいているので感謝したい。

*注意点

addAdsenseArchive(“クライアントID“,“上部広告スロット“,“下部広告IDスロット“,“スポンサーリンク”);

貼り付けることになるソース

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/adsensearchive.js" charset="utf-8"></script>
<style>
.archive_adslot { width: 320px; height: 100px; }
.archive_pr { font-size: 12px; }
@media(min-width: 800px) {
.archive_adslot { width: 728px; height: 90px; }
.archive_pr { font-size: 13px;  margin-top:20px; }
}
</style>
<script type="text/javascript">
addAdsenseArchive(クライアントID,上部広告スロット,下部広告IDスロット,"スポンサーリンク");
</script>

はてなブログにインフィード広告をスマホに挿入する方法について

こちらも調べてみたところ、モバイルのソースをPCとは別で修正できる環境であれば、記事一覧内に広告を挿入できる。現在、自分の環境はモバイルの表示にはレスポンシブデザインを使っている。モバイルに分けた場合、対応に工数がかかるため作業をしないが、PCとスマホに分けてソースを記入できるようにするのは検討課題だ