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

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

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

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

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

（１）サイトにアクセスする度に違う広告を表示させたい

（２）サイトの１ページの中の、「ヘッダー下部」、「記事上部」、
　　「記事下部」、「フッター上部」の４カ所のスペースの広告を
　　全てランダムに表示させたい

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

（３）ランダム広告は、別に４種類が必要

もう１点。

ページ内に、例え見えていなくても
『２０～５０ヶの広告×４』のリンクを載せたくない！

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

（４）外部ファイルから読み込ませたい

これで、ページの中のＨＴＭＬもキレイになります♪

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

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

１．広告の取得
２．JavaScriptの作成
３．<head>内に挿入
４．表示したい箇所に挿入

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

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

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

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

レビューを書いて100円引きSX98☆鮮やか刺繍！選べる訓練兵団or調査兵団or憲兵団ジャケット　進…

ソースを表示させると、こんな感じですね
～～～～～～～～～～～～～～～～～～～～～～～～～
<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>
～～～～～～～～～～～～～～～～～～～～～～～～～
これで１行なのです。長いですけどね。

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

２．JavaScriptの作成

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

⇒　『JavaScriptでランダム広告』

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

（１）ファイル名

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

今回は、こうしたソースを４つ用意するので
中身を変えて［random01.js］～［random04.js］とします。

（２）ソース名

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

function randomAdv() {

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

こちらも、それぞれ
［randomAdv01］～［randomAdv04］にします。

（３）広告リンク挿入

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

（４）もっと増やしたい

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

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

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

　　　　　　・
　　　　　　・
　　　　　　・
　　　　　　・

［］内の数字を連番で増やしていけば良いだけで、
いくつ増やしてもＯＫです。

（５）相対確率について

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

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

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

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

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

３．<head>内に挿入

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

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

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

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

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

４．表示したい箇所に挿入

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

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

［randomAdv01］～［randomAdv04］に書き換えて
表示させたい部分に、入れていきます。

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

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

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

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

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