バナー広告などをランダムに複数のセット表示させる方法


■バナー広告などをランダムに表示させ、且つ、
 1ページに複数のセット表示させる方法

広告をランダムに表示させる方法としては、
JavaScriptで、表示させるのが簡単なようです。

他にもPHPなど方法はあると思いますが、
勉強が追いつかないので、これで行きます!

私が求めていた条件としては、

(1)サイトにアクセスする度に違う広告を表示させたい

(2)サイトの1ページの中の、「ヘッダー下部」、「記事上部」、
  「記事下部」、「フッター上部」の4カ所のスペースの広告を
  全てランダムに表示させたい

しかも、4カ所はサイズが違うのと、
違うASPにしたいので、4種類必要になります。

(3)ランダム広告は、別に4種類が必要

もう1点。

ページ内に、例え見えていなくても
『20~50ヶの広告×4』のリンクを載せたくない!

それと、ランダム広告の内容を一括で書き換えたいので
ファイルを外部から読み込むようにすること。

(4)外部ファイルから読み込ませたい

これで、ページの中のHTMLもキレイになります♪

おまけに、広告管理が楽になるしね~

ということで、必要な作業は以下の4つ。

1.広告の取得
2.JavaScriptの作成
3.<head>内に挿入
4.表示したい箇所に挿入

それでは順番に説明していきますよ。

1.バナーなどの貼り付けたいリンクを用意する

貼り付けたい形で、テキストリンクやバナーリンク、
または、その両方を含めて、1行で作成します。

例えば、楽天のアフィリリンク↓↓↓

ソースを表示させると、こんな感じですね
~~~~~~~~~~~~~~~~~~~~~~~~~
<div align=”center”><table border=”0″ cellpadding=”0″ cellspacing=”0″><tr><td valign=”top”><div style=”border:1px solid;margin:0px;padding:6px 0px;width:320px;text-align:center;float:left”><a href=”http://hb.afl.rakuten.co.jp/hgc/1220cd70.48cf1a0c.1220cd71.f6b6b5da/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fseven-two-seven%2fkp10%2f%3fscid%3daf_link_tbl&m=http%3a%2f%2fm.rakuten.co.jp%2fseven-two-seven%2fi%2f10001205%2f” target=”_blank”><img src=”http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fseven-two-seven%2fcabinet%2f02929761%2fimg60095663.jpg%3f_ex%3d300x300&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fseven-two-seven%2fcabinet%2f02929761%2fimg60095663.jpg%3f_ex%3d80x80″ alt=”レビューを書いて100円引きSX98☆鮮やか刺繍!選べる訓練兵団or調査兵団or憲兵団ジャケット 進…” border=”0″ style=”margin:0px;padding:0px”></a><p style=”font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px”><a href=”http://hb.afl.rakuten.co.jp/hgc/1220cd70.48cf1a0c.1220cd71.f6b6b5da/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fseven-two-seven%2fkp10%2f%3fscid%3daf_link_tbl&m=http%3a%2f%2fm.rakuten.co.jp%2fseven-two-seven%2fi%2f10001205%2f” target=”_blank”>レビューを書いて100円引きSX98☆鮮やか刺繍!選べる訓練兵団or調査兵団or憲兵団ジャケット 進…</a><br></p></div></td></tr></table></div>
~~~~~~~~~~~~~~~~~~~~~~~~~
これで1行なのです。長いですけどね。

これが改行コードが入っていない状態です。

2.JavaScriptの作成

ゼロから書くことは出来ないので、こちらのサイトを参考にしました。

⇒ 『JavaScriptでランダム広告』

※プログラムソースは、上記サイトから取得してください

(1)ファイル名

このソースをテキストエディターに貼り付けて、
ファイル名[random01.js]とします。

今回は、こうしたソースを4つ用意するので
中身を変えて[random01.js]~[random04.js]とします。

(2)ソース名

ソースの一部の↓↓↓この部分

function randomAdv() {

赤で示した[randomAdv]が、
このソースを呼び出す時の名前になります。

こちらも、それぞれ
[randomAdv01]~[randomAdv04]にします。

(3)広告リンク挿入

’広告1’~’広告6’に、サイトに表示させたい広告タグを
1つに1行入れていきます。

(4)もっと増やしたい

hit[5] = 4; adv[5] = ‘広告6’;

の下に、以下のように追加する。

hit[7] = 1; adv[7] = ‘広告タグ’;
hit[8] = 1; adv[8] = ‘広告タグ’;
hit[9] = 1; adv[9] = ‘広告タグ’;
hit[10] = 1; adv[10] = ‘広告タグ’;

      ・
      ・
      ・
      ・

[]内の数字を連番で増やしていけば良いだけで、
いくつ増やしてもOKです。

(5)相対確率について

hit[5] = 4; adv[5] = ‘広告6’;

これに「4」が相対確率の設定数値となります。
完全にランダムにしたい場合は、全て「1」にします。

重点的に表示させたいモノには、
「10」とか「5」など相対的に大きな数字を入れます。

ココで設定した数値の合計に対しての割合となるようです。

とりあえずは、すべて「1」にしておいて
あとから調整してみましょうね。

3.<head>内に挿入

以下のソースを、表示させたいページの
<HEAD>~</HEAD>
の中に挿入します。

<SCRIPT src=”http://quest-king.com/random01.js”></SCRIPT>
<SCRIPT src=”http://quest-king.com/random02.js”></SCRIPT>
<SCRIPT src=”http://quest-king.com/random03.js”></SCRIPT>
<SCRIPT src=”http://quest-king.com/random04.js”></SCRIPT>

[http://quest-king.com/random01.js]は、
[random01.js]~[random04.js]ファイルをアップロードした場所になります。

なので、URLはご自身のサイトに合わせて修正してください。

※無料ブログの場合は、テンプレートのHTMLの修正で行えます。

今回の例では、ソースファイルを4つ作ってますが、
これが5つなら、サンプルに習って数を増やしてくださいね。

4.表示したい箇所に挿入

ページのソースを見て、表示させたい部分に
以下のJAVA呼び出し文を挿入します。

<SCRIPT language=”JavaScript”>
<!–

randomAdv01();
//–>
</SCRIPT>

赤文字の[randomAdv01]が、ソースの名前でしたね。

[randomAdv01]~[randomAdv04]に書き換えて
表示させたい部分に、入れていきます。

※無料ブログの場合は、プラグインなどで行います

ちなみに、[randomAdv01]を同じページ内に
2カ所以上に入れても表示されていました。

ツールなどPHPで自動生成されるページの場合
そのテンプレートとなるPHPファイルを探して
上記の修正を加える必要があります。

これが、ちと大変かもね(^_^;

PS:元となるJavaScriptを作ってくれた
 eWeb(イーウェブ)のsakiさんに感謝です!