ランダムバナー
提供: GeeklogJpWiki
[3]管理方法 > 管理者が導入後すぐ試せる簡単カスタマイズ > テーマをカスタマイズする > ランダムバナー
バナープラグイン(banner)でランダムバナーを作成する
- ダウンロード:Geeklog Japanese(Geeklog1.5.2以上)
- 作者 hiro
バナープラグインをインストールし,ヘッダにテーマ変数{banner}を記述することで,ランダムバナーが可能です。
自動タグは,[randombanner:<カテゴリid>]で設置します。
JavaScriptでランダムバナーを作成する
ヘッダ部分に、ランダムにバナーを表示させるためのJavaScriptを紹介します。
参考サイト:eWeb(http://www.eweb-design.com/index.html) ~画像をランダムに表示する
ヘッダにバナーを置く場合は、header.thtmlの<body>内に、以下のJavaScriptを記述するだけです。
ブロックエリアに置く場合は、ブロックでノーマルブロックを追加して、以下のJavaScriptを記述するだけです。
<SCRIPT language="JavaScript">
<!--
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.domainA.foo/";
jmp[1] = "http://www.domainB.foo/";
jmp[2] = "http://www.domainC.foo/";
jmp[3] = "http://www.domainD.foo/";
jmp[4] = "http://www.domainE.foo/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img0.jpg";
img[1] = "img/img1.jpg";
img[2] = "img/img2.jpg";
img[3] = "img/img3.jpg";
img[4] = "img/img4.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</SCRIPT>
解説・注意点など
ジャンプ先、画像は追加することができます。
その際は、jmp[5],jmp[6],jmp[7]...というように、数字を1ずつ増やしてください。