Bloggerで記事下に関連コンテンツ広告を設置する方法

Bloggerで記事下にGoogle Adsenseの関連コンテンツ広告を設置するのにめちゃくちゃハマりました。 今後ハマらないようにメモを残しておきます。

結論だけ言えば、「テーマ」→「HTMLの編集」から、以下のコードを <data:post.body/> の直後に貼ればOKです。 <data:post.body/> は2箇所あると思うので注意。
見栄えに関してもやはりそこがベストなのかなと思います。 少しずつ場所を変えて色々な場所に貼ってみたけど、場所を変えたりするとコメント欄が崩壊したり、意外と面倒でした。 なので直後に貼って、見た目を微調整したほうが良いのかなと思う。

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<ins class='adsbygoogle' data-ad-client='ca-pub-...'
data-ad-format='autorelaxed' data-ad-slot='...' style='display:block'/>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>

このコードを作るまでにハマったのは、Adsenseのコードをそのまま貼ろうとするとトップページの記事一覧に、記事ごとに関連広告が表示されてしまって最高に鬱陶しくなってしまうという事でした。 上記コードでは、トップページで関連広告を表示しないために、<b:if> というBlogger特有タグで、個別記事ページのみ表示するようにしています。 "item"' というおまじないが個別記事ページを判定するための文字列です。



ところでBloggerには他にも<b:include> や <b:includable> と言った特有タグがあります。 こちらを使って設置する方法もネット上で紹介されていたので試してみたのですが、これをまともに編集しようとするのは本当につらい。 Blogger特有タグの編集をミスると割とあっさり編集ページがフリーズするので、ここで1時間くらい取られました。

テーマを編集する時も、あまりBlogger特有タグは編集しないようにして、<b:if> の仕組みだけ覚えるのが良いのかなと思っています。