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

■バナー広告などをランダムに表示させ、且つ、
 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さんに感謝です!



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

  1. crain より:

    こんにちは、ピンクデルタのサポートでお世話になっている
    crainです。

    PHPについてよくわからないので質問させてください。

    ピンクデルタでこの広告バナーのランダム表示をやってみようかと考えています。

    「3.内に挿入

    以下のソースを、表示させたいページの~の中に挿入します。」の箇所なのですが、

    を書き加えるファイルは「index.php」でいいんでしょうか?
    page.php にも書き加える必要はありますか?

    あと、ピンクデルタのスマホ用広告表示欄はフローティング?というか動くようになってますが、そういう箇所にも
    このランダム表示はできますか?

    PHPのことがよくわからなくて不用意にいじるのが
    ちょっと怖いので一応お聞きしてからしようかと
    思い質問させていただきました。

    教えていただけましたら幸いです。
    宜しくお願いいたします。

  2. crain より:

    すいません、上のコメントでPHPの記述部分が表示されないようです。

    「3.<ヘッド>内に挿入

     <スクリプト src=”自分のドメイン/random01.js”>

    の部分をどのファイルに書き加えるのか、
    書き加えるファイルはindex.phpでよろしいですか?
    という質問です。

    よろしくお願いいたします。

  3. QUEST KING より:

    crainさん 訪問&コメントありがとうございます。

    > 書き加えるファイルは「index.php」でいいんでしょうか?
    > page.php にも書き加える必要はありますか?

    はい、両方に書き加えればサイト更新時に反映されます。

    > ピンクデルタのスマホ用広告表示欄はフローティング?というか動くようになってますが、
    > そういう箇所にもこのランダム表示はできますか?

    基本的には出来るはずですが、Javascriptの位置(順番)によって
    上手く行かない可能性もあります。

コメントを残す

サブコンテンツ

タイムセールでお得に(^o^)

オススメ 教材&ツール

すべてのカテゴリー

その他



ページビューランキング

  • seo

このページの先頭へ