1. ホーム > 
  2. Webサイト制作 > 
  3. サイト制作のヒント > 
  4. JavaScriptでバナーをランダム表示させる方法

JavaScriptでバナーをランダム表示させる方法

サイドメニューなどに表示する広告などのバナー画像。 どのページも同じ広告が表示されていてもいいのですが、少しでもユーザーの興味をひいてクリック率を高めようとする […]

  • 2015/8/9
  • 2012/4/27

サイドメニューなどに表示する広告などのバナー画像。
どのページも同じ広告が表示されていてもいいのですが、少しでもユーザーの興味をひいてクリック率を高めようとするなら、複数のバナー画像をランダム表示させるようにしましょう。

そこで、JavaScriptを使って複数のバナー画像をランダムに表示させる方法をご紹介します。

JavaScriptでバナー画像をランダム表示させる仕組み

まずはどうやってJavaScriptを使ってバナー画像をランダム表示させるのか、その仕組みを簡単にご紹介します。
とても簡単な仕組みですが、仕組みを理解できればバナー画像だけに限らずいろいろなシーンで応用させることもできます。

  1. まずバナー画像のURLをJavaScriptの配列に入れます。配列の要素の数を増やせば、何個でもバナーをランダムに表示させることができます。また、JavaScriptの配列は0から始まりますのでご注意ください。
  2. 次にJavaScriptでランダムな乱数を作ります。これは「Math.randomメソッド」を使えば簡単にできます。
  3. Math.randomメソッドは、0から1の間の少数を返すメソッドですので、これを整数を返すように工夫する必要があります。そこで、与えられた数値の小数点以下を切り捨てる「Math.floorメソッド」を使います。
  4. しかし単に「Math.floorメソッド」を使うと、返される数値は0しかありませんので、あらかじめ「Math.randomメソッド」を使って作った乱数に、ランダム表示させたい画像の数を掛けておき、0〜表示させたい画像の数までの数値を取得できるようにしておきます。
  5. 最後に取得したランダムな数で配列にセットしたコードを呼び出して表示させます。

大まかな仕組みはこれだけです。
JavaScriptが少しだけ理解できる方でも分かりやすいシンプルな方法ですので、いろいろなシーンで応用しやすいと思います。

次からは具体的な実装の手順をご紹介します。

バナー画像のURLを格納したJavaScriptファイルの作成

まずはバナー画像のURLを格納しておくJavascriptのファイル(banner-url.js)を作成します。
テキストエディタを使って新規ファイルを作って、以下のスクリプトをコピー&ペーストしてください。

var banner = new Array();
banner[0] = 'ここにバナー画像のURLやリンク先を書いておきます';

ファイルは「banner-url.js」というファイル名で保存をしておいてください。
複数のバナーを表示させたい場合は、同じ要領で増やしていきますが数字の部分が1ずつ増えていく点に注意してください。

var banner = new Array();
banner[0] = '';
banner[1] = '';
banner[2] = '';

概要説明でも書いた通り、配列の数字は0から始まりますので気をつけてください。

ページ上にバナーをランダム表示させるコードをHTMLに書く

次にいま作成したバナー画像のURLをランダムに呼び出して、ページ上に表示させるスクリプトです。

<script type="text/javascript" language="javascript">

//0〜99までのランダムな数字をつくる
num = Math.floor( Math.random() * 99 );

//作った数字で配列のURLを呼び出して「document.writeメソッド」を使って表示
document.write( banner[ num ] );

</script>

バナー画像を表示させたい箇所に上記のコードを設置します。

サンプルでは「99」という数字を使いましたが、banner-url.jsに書かれた数に修正してください。
10個のバナーをランダムに表示させたい場合は「10」に修正します。
(10個しかバナーが無いのに、99のままコードを使用すると、バナーが表示されない可能性があります)

バナーのコードを書いたJavaScriptファイルを読み込む設定を書く

最後に実際にバナーを表示させるHTMLファイルの<head>〜</head>内に、以下のコードを書いてbanner-url.jsを読み込むように設定します。
banner-url.jsを保存する場所は任意の場所で大丈夫です。ここではルートに置かれたjsフォルダ内に保存したと仮定して説明します。

<script type="text/javascript" src="/js/banner-url.js" charset="utf-8"></script>

charset=”utf-8″はWebサイトの文字コードを表します。

Shift-JISの場合はcharset=”shift-JIS”と修正しておきます。ホームページ作成ソフトで作ったページの場合、charset=”○○”という記述があるはずですので、この○○の部分と同じ内容にしておけば大丈夫です。

これで複数のバナーが1箇所の広告枠でランダムに表示されるようになっているはずです。

応用例 アフィリエイトバナーをランダム表示させる

ここでは自社で用意したバナー画像とリンク先ページを指定する方法をご紹介しましたが、アフィリエイト用のバナー画像を表示するコードを配列に格納することもできます。

アフィリエイトなどの広告バナー画像は、ASPから取得したコードをホームページに貼り付けるだけで表示させることができますが、基本的にコードを設置したバナーしか表示させることはできません。
しかしサイドメニューなどの、全ページ共通部分で枠も固定の広告枠に一つしか広告が表示されないと、どのページでも同じ広告なので、クリック率は落ちてしまいます。

かといって、サイドメニューなどに複数の広告枠を設置してしまうと、「広告だらけ」という印象をユーザーに与えてしまい、かなりページが見にくくなるだけでなく、一番重要な信頼まで損なう結果になってしまいます。

そのためここでご紹介した方法を応用すれば、アフィリエイトバナーをランダムに表示させて、クリック率を高めていくことも可能です。

他にも応用方法はあると思いますので、自社サイトの状況に合わせてご活用ください。

「役にたった」と思ったらシェアお願いします