以前にタイトル画像をランダムに変える方法を紹介しましたが今回はタイトル以外の画像を変える具体的な方法を紹介します。


HTMLを編集します。
画像を入れたいところに次のスクリプトを挿入してください。

<script language="JavaScript">
var images = new Array();

/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "画像１のURL";
images[1] = "画像２のURL";
images[2] = "画像３のURL";

var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<img src=',images[rnd],' border="0">');
</script>

例えば画像を使用している私のテンプレートは
fullmoon_howling や white_eagle 等ありますが、
この右上の画像をランダムに変えたい場合は下記部分を上記スクリプトに置き換えます。

fullmoon_howlingの場合

<!--▼▼▼▼ ヘッダー（タイトル部分）▼▼▼▼-->
～
<img src="http://blog-imgs-19.fc2.com/1/0/p/10plate/fullmoon-howling.gif" alt="満月の咆哮" width="100" height="100" border="0">
～
<!--▲▲▲▲ ヘッダー（タイトル部分）▲▲▲▲-->

white_eagleの場合

<!--▼▼▼▼ ヘッダー（タイトル部分）▼▼▼▼-->
～
<img src="http://blog-imgs-19.fc2.com/1/0/p/10plate/light_wing.gif" alt="白い鷹" width="100" height="100" border="0">
～
<!--▲▲▲▲ ヘッダー（タイトル部分）▲▲▲▲-->

これで右上の画像がランダムに入れ替わるようになります。是非これを応用していろんな画像をランダムに表示させてみることに挑戦してみてください。

関連記事

• 新着コメントに新着表示「NEW」マークを付けて目立たせる (2007/01/28)
• プロフィール画像をランダムに変える (2007/01/25)
• 「管理者だけに表示を許可する」のチェックボックスを消す (2007/01/24)
• 画像をランダムに変える (2007/01/22)
• 新着記事に新着表示「NEW」マークを付けて目立たせる (2007/01/19)
• 便利なトラックバックURL表示 (2007/01/18)
• Tree-CATEGORYの大見出しの前にアイコンを設置する (2007/01/18)