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(28)

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

[ 1048 ]

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

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

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

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

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

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

[ 1055 ] > 毛丸家さん

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

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

[ 1056 ] > developmentさん

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

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

[ 1061 ] こんばんは＾＾

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

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

[ 1065 ] > hoshiさん

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

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

[ 1818 ] ありがとうございました

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

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

[ 1821 ] > えるさん

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

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

[ 3040 ] 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 ] [ 編集 ]

[ 3493 ] 質問です。

質問ってここで大丈夫ですかね？？
違ってたらすみません；；
いつもテンプレ等お借りしてます。

本題の質問ですが、画像をランダム表示でその画像がFLASH(swf)の場合はどのようなタグになるのでしょうか？？
ランダム表示すべてFLASHと考えております。
お忙しいと思いますが、宜しくお願い致します。

[ 2008/08/18 06:34 ] [ 編集 ]

[ 3496 ] > うつどんさん、管理人さん

> うつどんさん
ランダム画像は何枚使おうとも重さは変わらないので安心してください。

> 管理人さん
私もFLASHには大変興味がありこれから覚えたいと思うのですが、今はまだ詳しくなく解りません。ご期待に添えず申しわけありませんm(__)m

[ 2008/08/20 02:03 ] [ 編集 ]

[ 3499 ] ほんとに毎回

よく拝見してますが
ほんとにすばらしいことが書いてありますね

よくこれだけのことを調べてかけるなんて
すばらしい技術ですよ

記事を見るたびに感心しています

[ 2008/08/21 22:25 ] [ 編集 ]

[ 3669 ]

はじめまして。
質問です。

記事の中で画像をランダムに変更したい時もこのスクリプトで出来るのでしょうか？

やってみたのですが・・・できなくて。

[ 2009/01/21 16:50 ] [ 編集 ]

[ 3687 ] 質問です

はじめまして。
こちらで拝見した画像をランダムに表示するスクリプト大変役立っています。

しかし飛び先が一つしか指定できないのが困っています。
"URL1"に対して画像をたくさんかえるのではなく、”URL1"のとき"画像1"、"URL2"のとき"画像2"の様に飛び先と画像セットでランダム表示できないのでしょうか？

ご返答いただけると助かります。よろしくおねがいします。

[ 2009/02/24 01:38 ] [ 編集 ]

[ 8065 ]

ありがとうございました＾＾

それとですが・・・
<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>

の
画像4つ目は
images[3] = "画像4のURL";
ですか？？

[ 2010/01/27 18:50 ] [ 編集 ]

[ 8066 ]

<h1><script language="JavaScript">
var images = new Array();
何度もすみません
↓
/* 使用するタイトル画像を好きなだけ記述 */
images[0] = "http://blog-imgs-36.fc2.com/m/i/n/minnnaatumare/20100119210242d5a.png";
images[1] = "画像２のURL";
images[2] = "画像３のURL";

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

</h1>
とやったんですが
画像が出ませんなぜですか？？

[ 2010/01/27 18:56 ] [ 編集 ]

[ 8067 ]

あ！！
http://blog-imgs-36.fc2.com/m/i/n/minnnaatumare/20100119210242d5a.png
がなぜか
表示できませんなってる・・・
解りました・・・

[ 2010/01/27 18:59 ] [ 編集 ]

[ 8075 ] > ウルフことSKULLさん

3つのうち１つしか画像を設定してないので、画像が表示される確率は 1/3 です。全てを設定するか、使わない変数は削除してください。

[ 2010/01/27 23:29 ] [ 編集 ]

[ 8448 ] トップ画について

トップ画をランダムに表示したいのですが、
どこに上のスクリプトを挿入すればいいでしょうか？


<div id="header_outline">
<div id="header_body">
<h1><a href="<%url>" title="<%blog_name> トップページへ"><%blog_name></a></h1>
<div class="intro"><%introduction></div>
</div>
</div>

[ 2010/02/18 12:08 ] [ 編集 ]

[ 8449 ] [ 8448 ] にちゃえるさんへ

トップ画像とは、20100217181353697.jpg の事でしょうか？
でしたら、これを、背景画像から、タイトル画像にして、

後は、
「SEOを考慮したランダムなタイトル画像」
http://10plate.blog44.fc2.com/blog-entry-190.html
あたりを読んでみてください。

[ 2010/02/18 12:25 ] [ 編集 ]

[ 8451 ] sakuraiさんへ

ご回答ありがとうございます。

20100217181353697.jpgの右の大きな画像の部分をランダムに表示したいのですが、
方法はありますでしょうか？

[ 2010/02/18 13:04 ] [ 編集 ]

[ 8452 ]

>>にちゃえるさん
http://10plate.blog44.fc2.com/blog-entry-88.html
ここを参考にしてみてください。

[ 2010/02/18 13:39 ] [ 編集 ]

[ 8454 ]

ありがとうございます！
なんとかなりそうです。

[ 2010/02/18 14:08 ] [ 編集 ]

[ 8548 ]

はじめまして、今度こちらのstandard_pinkの
テンプレートを使わせていただきたくて
カスタマイズ中なのですが、現在プラグイン３にランダム
小さい画像が表示されていますが
standard_pinkに変えると、プラグイン３が大きなスペースに
変わるので、もとの画像の大きさ（480×272）で表示
したいのですが、width="480" height="272と　入れると
ボヤけた画像（小さいのを引き延ばしたような状態）に
なってしまいます。
上記ＨＴＭＬのどの部分を変えると、画像がもともとのサイズで
表示されるのか、教えてください。

[ 2010/02/25 14:37 ] [ 編集 ]

[ 8566 ] memoryさん

スクリプト内で画像を指定しているファイルが全部サムネイルになっています。

sna1s.jpg

赤色部分を全部消せば元の画像になります。

[ 2010/02/27 16:54 ] [ 編集 ]

[ 8569 ] やっすぃぃぃーさん

あっ！　すべてにｓが入ってました。
ありがとうございます＾＾
すごい、初歩的なミスですね、すいませんでした。

助かりました。（かなり、悩んでいたので）

[ 2010/02/28 14:47 ] [ 編集 ]

[ 8765 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/11/18 19:24 ] [ 編集 ]

[ 8860 ] 承認待ちコメント

このコメントは管理者の承認待ちです