今はやり？の見出し直下の広告（adsence）をBloggerに導入して見た

おすすめ記事ピックアップ

最近、見出し直下の広告を良く見かけますよね。ihayato.書店さんなんかも、見出し直下の広告入れています。かならず目に入り、そして誤クリックを誘導しない最適な場所なんだと思います。

Bloggerだと、エラーが出て導入できない人がいると思いますので、コツを紹介いたします。テンプレートをいじる際は、ご自分でコードのバックアップを忘れずに。

まず広告はすでに用意できている物とします。今回はadsenceを利用しました。下記のような広告用コードです。

<script async src="xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js"></script>
<!-- main-ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-xxxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="538xxxxxxxxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bloggerの場合、トップページの一覧は、投稿記事と同じ見出しが表示されるため（テンプレートによって異なりますが）個別記事に表示したい広告設定が、一覧にどかっと表示されて阿鼻叫喚グチャグチャになることがあります。それを回避するために、個別記事のみに表示するコードを使います。

簡単に書くと「b:if cond＝表示させる条件」で制御します。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
－－－ここに広告コードを入れる－－－
</b:if>

b:if condを詳しく知りたい方はこちらの記事を参考ください。
http://www.furimuke.com/2013/04/blogger_21.html
http://www.furimuke.com/2013/05/linkwithinblogger.html

次にBloggerテンプレートのHTMLにコードを書き込むとき、特定の表記がエラーになります。adsenceのコードをそのまま張り付けるとエラーが出てしまい保存できません。これで9割の人は、googleには、逆らってはいけないと諦めてしまうのではないでしょうか。

主にこの3つ「”」「<」「>」を書きなおすことでエラーが出なくなります。

「”」→「"」
「<」 →「&lt;」
「>」 →「&gt;」

追伸：変換ツール作ってみました
http://furimuke.sub.jp/changemoji/

該当の箇所をすべて置換しましょう。置換するとこんな感じになります。手動書き換えてもよいですが、間違ったり大変ですのでワードパット等を使って置換しましょう。

<script async src="xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js"></script>
<!-- main-ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-xxxxxxxxxxxxxxxxxxxxx"
     data-ad-slot="538xxxxxxxxxxxxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これをb:if condで挟みます。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script async src=&quot;xxxxxxxxxxxxxxxxxxxxx/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- main-ad --&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:300px;height:250px&quot;
     data-ad-client=&quot;ca-xxxxxxxxxxxxxxxxxxxxx&quot;
     data-ad-slot=&quot;538xxxxxxxxxxxxxxxxxxxxx&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</b:if>

これでコードは完成です。
次にテンプレートHTMLの見出し直下の場所を探します。
大体post-headerの下あたりがその場所になります。

    <div class='post-header'>
    <div class='post-header-line-1'>

使っているテンプレートによっては、post-headerが2箇所あったりすることもあると思います。その場合、それぞれの箇所に設定してテストして見てください。名称が異なる場合もあると思いますが、じっくり調べればわかると思います。

使っているテンプレート、書き込む場所によって、広告の表示位置が多少異なりますので、保存で実際に書き込んでみて、自分が良いと思える場所に設定しましょう。

こうして完成です。

同じ要領で、記事の最後にも設定することができます。コードの場所は自分で探してみましょう。あとadsenceはルールに厳しいので、スポンサードリンクとか、広告だとわかる表記をきちんと付けた方が良いという話もあります。