ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

【はてなブログ】カテゴリーに応じた広告を自動挿入する

f:id:katamichinijikan:20181004121309p:plain

カテゴリーに応じた特定の広告を自動挿入する方法を紹介します。

私は、このブログの記事下に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」で条件分岐をつなげて複数のカテゴリーに対応することができます。

 

▼IT系の転職なら

▼誰かにプログラミングを教えてみませんか?

▼釣り具の宅配買取なら