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

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

画像をランダムに変える

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


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

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

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

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


例えば画像を使用している私のテンプレートは
fullmoon_howlingwhite_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">

<!--▲▲▲▲ ヘッダー(タイトル部分)▲▲▲▲-->


これで右上の画像がランダムに入れ替わるようになります。是非これを応用していろんな画像をランダムに表示させてみることに挑戦してみてください。
関連記事
[ 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] = "画像1のURL";
images[1] = "画像2のURL";

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

images[0] = "画像1のURL";
images[1] = "画像2のURL";
images[2] = "画像3のURL";

images[100] = "画像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] = "画像1のURL";
images[1] = "画像2のURL";
images[2] = "画像3の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] = "画像2のURL";
images[2] = "画像3の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つしか画像を設定してないので、画像が表示される確率は 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><!--/header-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->
[ 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の
テンプレートを使わせていただきたくて
カスタマイズ中なのですが、現在プラグイン3にランダム
小さい画像が表示されていますが
standard_pinkに変えると、プラグイン3が大きなスペースに
変わるので、もとの画像の大きさ(480×272)で表示
したいのですが、width="480" height="272と 入れると
ボヤけた画像(小さいのを引き延ばしたような状態)に
なってしまいます。
上記HTMLのどの部分を変えると、画像がもともとのサイズで
表示されるのか、教えてください。
[ 2010/02/25 14:37 ] [ 編集 ]
[ 8566 ] memoryさん
スクリプト内で画像を指定しているファイルが全部サムネイルになっています。

sna1s.jpg

赤色部分を全部消せば元の画像になります。
[ 2010/02/27 16:54 ] [ 編集 ]
[ 8569 ] やっすぃぃぃーさん
あっ! すべてにsが入ってました。
ありがとうございます^^
すごい、初歩的なミスですね、すいませんでした。

助かりました。(かなり、悩んでいたので)

[ 2010/02/28 14:47 ] [ 編集 ]
[ 8765 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/11/18 19:24 ] [ 編集 ]
[ 8860 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/09/21 10:39 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る