広告をランダムに表示する方法

テキスト広告やバナー広告等をランダム(ローテーション)に表示する方法です。
サイトにアフィリエイト広告等を貼る場合、いつも同じ広告ではクリック率が下がります。そういう場合やサイトに「広告を複数表示したいがスペースがない」という場合に便利です。

ソース

下記のソースを広告を表示したい場所に挿入します。


<script type="text/javascript">
<!--
$(function(){
var INTERVAL = 5000;
setInterval(function(){
for( i=1; i<4; i++ ){
if( i == 3 ){
j = 1;
}
else{
j = i + 1;
}
if( $( "#cm" + i ).css( "display" ) != "none" ){
$( "#cm" + i ).hide();
$( "#cm" + j ).show();
break;
}
}
},INTERVAL);
});
//-->
</script>
<div id="cm1"">
ここに広告1
</div>

<div id="cm2">
ここに広告2
</div>

<div id="cm3">
ここに広告3
</div>

説明

上のソースは3つの広告を5秒間隔で表示する為のものです。
広告を4つ、3秒間隔で表示したい等の場合は微調整が必要です。

表示する広告数を設定

元の「5000」は広告を5秒間隔で表示するという意味です。
秒間隔を変える場合はこの数字を変えます。
3秒間隔の場合は下記になります。


$(function(){
var INTERVAL = 3000;
setInterval(function(){
for( i=1; i<5; i++ ){
if( i == 4 ){
j = 1;
}

表示する広告数を設定

元のソースでは表示する広告は3つですが、4つに変更するには、上のソースのように数字を変更します。
さらに、下記のソースを加えます。


<div id="cm4">
ここに広告4
</div>

実例

4つの広告を3秒間隔で表示すると下記のようになります。
下記の例ではテキストですが、テキストリンク、バナー広告でも同じです。

ここに広告1
ここに広告2
ここに広告3
ここに広告4

HTMLの関連記事

このページの先頭へ