【はてなブログ】カテゴリーに応じた広告を自動挿入する
ドリリウムは移転しました。
約5秒後に自動的にリダイレクトします。
カテゴリーに応じた特定の広告を自動挿入する方法を紹介します。
私は、このブログの記事下にGoogle Adsenseのレクタングル広告を貼り付けています。広告内容は記事の内容やユーザーの好みに合わせた内容が自動表示されますが、これを実験的に固定の広告にしたいと考えました。
具体的にはA8.netなどで提供される特定の広告を特定のカテゴリーに貼り付けたいと考えたわけです。
私の場合
やり方は様々ですが、私の場合には記事の下にレクタングル広告を2つ並べており、これがそのコードです。
<table style="width:100%;">
<tr>
<td colspan="2" style="text-align:center;">
<p style='text-align:center;'>スポンサーリンク</p>
</td>
</tr>
<tr>
<td style="width:50%; text-align:center;">
記事下（左）のGoogle Adsenseコード
</td>
<td style="width:50%; text-align:center;">
記事下（右）のGoogle Adsenseコード
</td>
</tr>
</table>
※実際にはCSSを別記していますが、ここではタグ内に最低限含めています。
以下のような非常に単純な表組をしています。
| スポンサーリンクの表示 | |
| 広告（左） | 広告（右） |
広告の自動挿入の実装方法は皆さんそれぞれ異なるかと思います。記事下ではなく記事の先頭かもしれないし、記事の途中かもしれません。私の場合には、この記事下に設置している広告をカテゴリーに応じて変更しようと考えました。
カテゴリーに応じた広告を自動挿入する方法
私の場合は先述の通り、表組の中に広告コードを指定していました。
広告の貼り付け方は人それぞれだと思います。私と同じようにテーブルを使ってtdタグの中に広告を貼り付けているケース、divタグのなかに広告を貼り付けているケースなどがあると思います。今回紹介する手順はどのようなケースでも対応可能です。
手順1：広告を貼り付ける要素にidを指定する
まずはじめに、広告を貼り付ける要素にidを指定します。複数個所を一斉に変更したい場合にはclassでも構いません。私の場合には広告（左）にはbottom-left-ad、広告（右）にはbottom-right-adというidを指定しました。以下のような感じです。
<table style="width:100%;">
<tr>
<td colspan="2" style="text-align:center;">
<p style='text-align:center;'>スポンサーリンク</p>
</td>
</tr>
<tr>
<td style="width:50%; text-align:center;" id="bottom-left-ad">
記事下（左）のGoogle Adsenseコード
</td>
<td style="width:50%; text-align:center;" id="bottom-right-ad">
記事下（右）のGoogle Adsenseコード
</td>
</tr>
</table>
以下のようにidを割り振りました。
| スポンサーリンクの表示 | |
| 広告（左） bottom-left-ad |
広告（右） bottom-right-ad |
広告コードを含むdivタグやtdタグなどにidを割り振ればOKです。
手順2：カテゴリーにあわせて置き換える
続いて「フッタ」あたりにスクリプトを記述します。
例えば私のケースでは「車」というカテゴリーの記事には、「車の買取の広告」「車検の広告」の2つを設置しようと考えました。
<script>
var adCodeKaitori = '車の買取の広告コード';
var adCodeSyaken = '車検の広告コード';
if($('body').hasClass('category-車') === true){
$('#bottom-left-ad').html(adCodeKaitori);
$('#bottom-right-ad').html(adCodeSyaken);
}
</script>
以下の2行で、adCodeKaitori、adCodeSyakenというそれぞれの変数に広告コードを設定しています。
var adCodeKaitori = '車の買取の広告コード';
var adCodeSyaken = '車検の広告コード';
以下の条件分岐で、車カテゴリーだった場合のみ処理を行っています。
if($('body').hasClass('category-車') === true)
※はてなブログでは、カテゴリーを指定した記事を開いた場合には必ず「category-カテゴリー名」というクラスが付与されます。
そして以下のコードでidがbottom-left-adの中身をadCodeKaitoriに変更しています。つまり、広告（左）がGoogle Adsenseの広告から特定の車検の広告コードに置き換わるわけです。同様にbottom-right-adの中身もadCodeSyakenに変更されています。
$('#bottom-left-ad').html(adCodeKaitori);
$('#bottom-right-ad').html(adCodeSyaken);
手順3：複数のカテゴリーに対応する
以上の手順では、「車」カテゴリーでは車検と買取の広告を表示し、それ以外のカテゴリーではデフォルトの広告コードが表示されていました。
これを複数のカテゴリーに対応させるには以下のようなコードになります。わかりやすくするため、広告を置き換える要素をbottom-left-adのみにしています。
<script>
var adCodeSyaken = '車検の広告コード';
var adCodeKagu = 'DIY用品の広告コード';
var adCodeFish = '釣り具の広告コード';
if($('body').hasClass('category-車') === true){
$('#bottom-left-ad').html(adCodeSyaken); //「車」カテゴリーには車検の広告
} else if($('body').hasClass('category-DIY') === true){
$('#bottom-left-ad').html(adCodeKagu); //「DIY」カテゴリーにはDIY用品の広告
} else if($('body').hasClass('category-釣り') === true){
$('#bottom-left-ad').html(adCodeFish); //「釣り」カテゴリーには釣り具の広告
}
</script>
以上のように「else if」で条件分岐をつなげて複数のカテゴリーに対応することができます。
