ただのバナー広告では、味気ないし、いちいちメンテナンスも面倒だったので、javascriptで、ローテーションバナーを作成しました。ローテーションバナーといっても、ランダムのバナー広告だったりしますが。時間で、自動的にパラパラかわるのがローテーションバナーなのかもしれませんが、それはそれとして、再読込が発生する度に、変わる広告です。
まず、
からの間に、次の関数を記述します。<!--ローテーションバナー--> <script type="text/javascript"> function rdmad() { totalprobability = 0; rdmadi=0; ad=new Array(); //基本入力項目 ad[0]=new adlist('確率(入力値/入力値の合計)','URLを記述','バナー広告の画像パスを入力','バナーのALTタグ用のタイトル'); //記述サンプル ad[1]=new adlist('50','http://b-promotion.jp/','http://b-promotion.jp/banner/images/banner_bpro_b_fullbanner.gif','B-Promotion'); ad[2]=new adlist('50','http://d-pegasus.com/','http://d-pegasus.com/link/images/banner_01_l.jpg','群馬ダイヤモンドペガサス公式サイト'); //確率の合計を計算 for(i=0; i < ad.length ;i++) { totalprobability += parseInt(ad[i].probability); } //乱数を発生させる //rdmadi=Math.floor(ad.length * Math.random()); rdmadi=Math.floor(totalprobability * Math.random()); totalprobability = 0 ; //確率の合計を計算 for(i=0; i < ad.length ; i++) { totalprobability += parseInt(ad[i].probability); if (rdmadi <= totalprobability) { rdmadi = i; break; } } //乱数をインデックスとして利用し、配列から広告データ取り出す document.write ('<a href=\"' + ad[rdmadi].url + '\" target=\"_blank\"><img src=\"' + ad[rdmadi].imgpath + '\" alt=\"' + ad[rdmadi].title + '\" width=\"468\" border=\"0\" height=\"60\"></a>'); document.close(); } //adlistクラス function adlist(probability,url, imgpath, title){ this.probability=probability; //Probability this.url=url; //URL this.imgpath=imgpath; //Image Path this.title=title; //Title } </script>
バナーの数は、ad[0]=〜のセットを、どしどし増やしていただければ、何個でもいけますよ。
そしてローテーションバナーを設置したい場所に、次のコードを追加します。
<script type="text/javascript"> <!-- rdmad(); // --> </script>
要は、ここに広告を入れてよって場所から、head部に記述しておいた関数を呼び出すわけですね。
jsファイルにしておいて、呼び出してもOKです。
実際のところ、そうしています。
こんなかんじ。
<!-- トップ記事のローテーションバナー--> <script type="text/javascript" src="http://www.〜〜 /jsファイルのパス名.js"></script>
いつも、お世話になっている、チョークスリーパー今井さんのブログに設置させていただきました。４種類のバナーを回しています。確率はかなり偏りがあり、1/100のレアバナーも潜っていますよ。
設置サンプル
■群馬ではたらくプロレス大好きチョークスリーパー今井のブログ
F5を連打して更新してみて下さい！！
