「Google AdSense」の「関連コンテンツ」の機能が使えるようになったので、このBloggerブログに設定してみる事にました。ちなみに、このブログは「Vaster2」というテンプレートを使っています。
「Vaster2」への関連コンテンツの設定方法を解説したサイトを検索すると、記事の下への表示方法は見つかるのですが、どうやったら既存の「この記事の関連記事」という場所に表示できるか見つかりませんでした。そこで試行錯誤し何とか設定できたので、記録として残しました。これより良い方法が見つかったら随時こちらで更新します。
これからテーマのHTMLの編集ページを開き編集作業をしますが、必ずバックアップを取ってから行って下さい。
まず初めに、Ctrl＋Fのキーで<!-- 関連記事-->の項目を探します。
すると以下のようなコードの場所を見つける事が出来るので、この部分に新たにコードを書き足します。
====ここからコード====
<!-- 関連記事-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="この記事の関連記事";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<div class='post-footer'/>
<!--関連記事ここまで-->
====ここまでコード====
以下に「書き足す位置」と「既存のコードの意味」を大まかに解説します。
新たに書き足す部分は赤字で書き、コードの意味は青字で書きました。また「Vaster2」に初めからある関連記事を表示するコードは削除してしまっても問題ありませんが、元に戻す事も出来るようにコメントアウトして無効化しています。
====ここからコード====
<!-- 関連記事 -->
<b:if cond='data:blog.pageType == "item"'>【個別記事に表示】
<div id='related-posts'>【cssの適用】
<h2>この記事の関連記事</h2>【新たに関連コンテンツに付けるタイトル】
※この部分に「アドセンス」の関連コンテンツを表示するコードを貼り付ける。※
<!-- 【ここからコメントアウトを使いコードの無効化】
<b:loop values='data:post.labels' var='label'>【ここからが、元の関連記事を作るためのコード】
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=9999"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=8;
var relatedpoststitle="この記事の関連記事";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>【ここまでが、元の関連記事を作るためのコード】
--> 【ここまでコメントアウトを使いコードの無効化】
</div><div class='clear'/>【cssのクリア】
</b:if>
<div class='post-footer'/>
<!--関連記事ここまで-->
====ここまでコード====
以上のようにコードを変更することにより「Vaster2」上で関連コンテンツが問題なく機能しました。それから、表示速度に影響するので使わなくなった「Vaster2」標準の「関連記事」を作り出すjavascriptのコードを消すかコメントアウトすることをお勧めします。
コードの場所はCSSのコードが終わった辺りにある以下のコードです。
====ここからコード====
<script src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' type='text/javascript'/>
====ここまでコード====
コード内容は知らなくてもいいから簡単に済ませたいという方は以下のコードに、ご自身の関連コンテンツコードを入れたものを、<!-- 関連記事 -->から<!--関連記事ここまで-->の間に上書きしてください。そして先述のとおり旧javascriptを削除してください。
====ここからコード====
<!-- 関連記事-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h2>この記事の関連記事</h2>
※ここに「アドセンス」から発行される関連記事コンテンツのコードを貼り付ける※
</div><div class='clear'/>
</b:if>
<div class='post-footer'/>
<!--関連記事ここまで-->
====ここまでコード====
これで「Vaster2」にもとからある機能の「関連記事」と同じ場所に、「アドセンス」の「関連コンテンツ」を表示させる事が出来ます。
そしてこの関連コンテンツ機能は広告をOFFにして使う事も出来るので、試しに使ってみるのも良いと思いますよ。相性が良くなければ元に戻せばよいわけですし、そのためにもテーマhtmlの変更前には必ずバックアップを取ってくださいね。
ここからは、この変更してから暫らく後に気付いたことを書いています。「この記事の関連記事」に何も表示されない個別記事ページがある事を見つけました。これはおそらく、関連コンテンツも広告なので「アドセンス」のロボットが巡回して広告配信を承認した記事ページにしか表示されない仕様なのかもしれません。しばらく放置すると表示されるようになりましたが、投稿したばかりの記事や広告配信に適さないと判断された記事には関連コンテンツが表示されない可能性も考えられます。絶対に関連記事を表示したいのなら、「Vaster2」に初めから備わっている機能を使った方が無難のようですね。
追記：関連コンテンツを設置してから１か月ほど経ちましたが、結局「Vaster2」標準の関連記事スクリプトに戻しました。理由はあまり関連性の高い記事が表示されなかったからです。この原因はこのブログの記事数やアクセス数が多くないため広告クローラーの巡回頻度に影響した事と、雑記ブログのような特定の内容に特化していないサイトとは相性が良くないのかもしれませんね。アクセス数や記事内容の豊富なサイトでは精度よく表示されているそうなので、最終的にはブログの内容との相性という事でしょうかね。
