FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

画像をランダムに変える

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

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">
～

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

記事編集 [ 2007/01/22 23:24 ] カスタマイズ　共通 | TB(0) | CM(9)

≪「管理者だけに表示を許可する」のチェックボックスを消す | HOME | 新着記事に新着表示「NEW」マークを付けて目立たせる≫

速いお返事ありがとうございます。
早速試してみました。

これからもよろしくお願いします。

[ 2007/01/23 00:19 ] [ 編集 ]

そのせつはお世話になりました。

しばらく前にコメントさせていただいたものです。
いたおさんのテンプレートとこちらのサイトのおかげで、自分なりになっとくのいくカッコいい見た目にだんだんと仕上がってきました。おかげさまで更新するのが毎日楽しいです。
今後もどんどんカスタマイズしていこうと思っていますので是非参考にさせていただきます。
ありがとうございました。

[ 2007/01/23 00:38 ] [ 編集 ]

> 毛丸家さん

こんばんは、毛丸家さん。
このカスタマイズを覚えると画像のバリエーションを増やすことがきっと楽しくなりますよ＾＾

[ 2007/01/23 21:45 ] [ 編集 ]

> developmentさん

こんばんは、developmentさん。
カスタマイズする喜びが伝えられて私も嬉しいです＾＾
どんどんカスタマイズしちゃってくださいね。

[ 2007/01/23 21:56 ] [ 編集 ]

こんばんは＾＾

うーん、何時来ても参考になることが多いです。
今月はチョット忙しいので、
来月カスタマイズする時のためにメモしておかなくては( ..)φ

[ 2007/01/24 22:32 ] [ 編集 ]

> hoshiさん

こんばんは、hoshiさん。
忙しいときはゆっくり休みましょう。時間が有る時に心行くまでカスタマイズを楽しんでください。自分で何かを作るということは本当に楽しいです＾＾

[ 2007/01/24 23:18 ] [ 編集 ]

ありがとうございました

おかげさまで
記事ごとのランダムアイコン表示ができ
ますますお気に入りのテンプレートになりました。
本当にありがとうございました

[ 2007/05/02 13:08 ] [ 編集 ]

> えるさん

お役に立てましたか＾＾
ちょっとしたカスタマイズでも施すとそのテンプレートに愛着が湧きますね。

[ 2007/05/02 22:57 ] [ 編集 ]

1年前の記事ですが…

こんばんは。
テンプレート＆ここのブログ、共に役に立たせていただいております。

この画像を変えるスクリプトですが、

images[0] = "画像１のURL";
images[1] = "画像２のURL";

と2枚だけ画像を使うのと

images[0] = "画像１のURL";
images[1] = "画像２のURL";
images[2] = "画像３のURL";
…
images[100] = "画像１００のURL";

と100枚画像を使うのでは、そのページが重くなる程度は変わりますか？
やはり、画像を多く使うほど重くなるのでしょうか？

[ 2008/01/15 01:09 ] [ 編集 ]

コメントの投稿