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

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

背景画像をランダムに変える

サイト背景やタイトル背景等の画像をランダムに変えるカスタマイズを紹介します。


次の記述をHTMLの</head>のすぐ上に貼ります。

<script language="JavaScript"><!--
var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像1のURL";
wall[1] = "画像2のURL";
wall[2] = "画像3のURL";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>


これはサイト全体の背景画像をランダムに変える場合です。(standard,lightframe共に同じです。)

タイトル背景を変えたい場合は body の部分を

standardをお使いの方は
#header

lightframeをお使いの方は
#header_body

と変更してください。

画像はいくつでも増やせます。豊富な画像を用意しておくと訪問者に楽しんでもらえそうですね。


【2009/04/29 追記】

記事の背景を変えたい場合は body の部分を

standardをお使いの方は
.article

lightframeをお使いの方は
.ently_body

と変更してください。

関連記事
[ 634 ]
完璧です!
理想通りのタイトルをつくる事が出来ました。

お忙しい中本当にありがとうございます。
[ 2006/10/09 16:12 ] [ 編集 ]
[ 636 ]
(´・Θ・`)ショボーン
出来ないですぅ~
3枚アップしたけど、1枚しか表示されなくて、とほほ。
[ 2006/10/09 22:05 ] [ 編集 ]
[ 637 ] > あいざわさん
こんばんは、あいざわさん。
それにしてもどれも素晴らしい写真ですね。用意したという4種類全てを見たいがために更新を連打したのは私だけではないはず。アクセスも増えそうですね^^
[ 2006/10/09 23:05 ] [ 編集 ]
[ 639 ] > ねこキックさん
こんばんは、ねこキックさん。
申し訳ありません。記事に不手際がありました。先程記事を書き直したのですがJavaScriptは</head>の真上に挿入してください。これで上手くいくと思います。
[ 2006/10/09 23:40 ] [ 編集 ]
[ 641 ] 出来ました♪
いたおさん、ありがとうございます。
出来ましたV(^_^v)(v^_^)v
[ 2006/10/10 15:04 ] [ 編集 ]
[ 642 ]
こんにちは。
いつも楽しく拝見させていただいております。
興味深い記事で大変参考になりました。これからも更新、楽しみにしております。突然のコメント、失礼しました。
[ 2006/10/10 16:17 ] [ 編集 ]
[ 645 ] > ねこキックさん
こんばんは、ねこキックさん。
私の記事に不手際があったために余計な手間をかけさせてしましました。申し訳ありません。
今度はちゃんと画像がランダムに表示されますね。トラックバックも有難う御座いました。トラバをもらったのは久しぶりです^^
[ 2006/10/11 02:01 ] [ 編集 ]
[ 646 ] > ホームページマジックさん
こんばんは、ホームページマジックさん。
サイト製作のプロが私のブログを見てくれるなんて恐縮です。

ホームページマジックさんのサイトも大変興味深く拝見させてもらいました。サイト制作費無料で集客効果の分だけ料金を頂くなんて、Win-Winの関係を築ける素晴らしいビジネスですね。

私の記事はまだとてもホームページマジックさんを満足させられるものではありませんが、少しでも参考になれるように頑張ります。
[ 2006/10/11 02:43 ] [ 編集 ]
[ 659 ]
背景画像、1種類だったのを3種類にカスタマイズさせて頂きました!
もうこれ以上何も出来ませんと言う位やらせて頂いた様な気が(^-^)
とは言いつつ、カレンダーをもう少しいじろうかとは思っていたりしますw
後、PASSを入れた時にトリップが付く様にするのもやってみたいです。

…とは言ったもののPASSをトリップにする為にどうするのか分からず_| ̄|○
#<%comment_trip>
↑これが何かだとは思うのですが…
偏頭痛がしてきました(泣)
[ 2006/10/17 18:56 ] [ 編集 ]
[ 661 ] > ちゃんさん
こんばんは、ちゃんさん。
画像がランダムで変わると、ついつい全ての画像をみたくて更新を連打してしまうんですよね。アクセスがあがってたらそれは私です。

トリップを付ける方法は記事に掲載したのでこちらをご覧ください。
http://10plate.blog44.fc2.com/blog-entry-86.html
[ 2006/10/17 22:22 ] [ 編集 ]
[ 941 ] 参考になりました^^
最近FC2ブログを始めたので、ここの記事に何度もお世話になりました。
 おかげさまで理想通りのタイトルにすることができました。
ありがとうございますm(_ _)m
[ 2007/01/06 16:35 ] [ 編集 ]
[ 951 ] > ワームモンさん
こんばんは、ワームモンさん。
ようこそFC2ブログへいらっしゃいました。私は他のブログサービスをあまり知らないのですが、FC2ブログはカスタマイズに優れていることは確かです。どんどんカスタマイズを楽しんでくださいね。
[ 2007/01/07 00:13 ] [ 編集 ]
[ 1013 ]
いたおさんのテンプレート使わせてもらってます。いつもお世話になってます。
ところで僕は、fullmoon_howlingを使っているのですが、右上にある画像をランダムに変えることはできないでしょうか。
[ 2007/01/20 12:16 ] [ 編集 ]
[ 1025 ] > 毛丸家さん
こんばんは、毛丸家さん。

右上の画像をランダムに変えるにはこちらの記事が参考になると思います。

タイトル画像をランダムに変える
http://10plate.blog44.fc2.com/blog-entry-88.html

毛丸家さんの場合は右上の画像の記述があるところを、この記事が紹介する記述に書き換えてください。
もしこの記事の説明が解からなければまた教えてくださいね。
[ 2007/01/21 23:26 ] [ 編集 ]
[ 1029 ]
たびたびすいません。
早速実行してみたのですが、画像がタイトルの下になってしまいます。これまで通りタイトルの右におくことはできないでしょうか?
[ 2007/01/22 00:15 ] [ 編集 ]
[ 1035 ] > 毛丸家さん
それでは「画像をランダムに変える」記事を近日中に掲載しますのでもう少々お待ちくださいね。
[ 2007/01/22 01:36 ] [ 編集 ]
[ 1066 ]
初めて投稿いたします。

背景をランダムに出来るのですが、タイトル背景は
どうしても、出来ません。
タイトル背景をランダムにするには、bodyの部分を
どうしたらいいのでしょうか?
 よろしくお願いします。
[ 2007/01/25 06:31 ] [ 編集 ]
[ 1068 ] > puapuaさん
はじめまして、puapuaさん。
現状を確認したいのでURLを教えて頂けないでしょうか。
宜しくお願い致します。
[ 2007/01/25 22:43 ] [ 編集 ]
[ 1069 ] タイトル背景の件です。
サイトを載せるのを忘れました。
申し訳ありません。

今は画像がアップ出来ないので
普通の共有テンプレを借用してます。

よろしくお願いします。
[ 2007/01/25 23:04 ] [ 編集 ]
[ 1071 ] > puapuaさん
こんばんは、puapuaさん。
それではstandardとlightframeどちらを使う予定か教えて頂けないでしょうか。それによりスクリプトが少しだけ変わってくるのです。
[ 2007/01/25 23:18 ] [ 編集 ]
[ 1077 ] 今晩は。
早速のお返事ありがとうございます。

私は、standardを使いたいと思います。
よろしくお願いします。
[ 2007/01/26 21:42 ] [ 編集 ]
[ 1078 ] ごめんなさい。
何度も投稿してすみません。

先ほど、カスタマイズ出来ました。
ありがとうございます。

初心者が、色々とご迷惑かけました。
[ 2007/01/26 22:59 ] [ 編集 ]
[ 1082 ] > puapuaさん
こんばんは、puapuaさん。
解決されたようですね^^
お気づきになられた通り、テンプレートの種類によって、スクリプトを一部変更しなければならないのです。この記事では少し解かりにくかったでしょうか。
これからより解かり易い記事を心がけていきますのでまた参考にしてくださいね。
[ 2007/01/27 01:41 ] [ 編集 ]
[ 1377 ] タイトル背景画像の高さの調整
こんにちは、はじめまして。
いつもお世話になってます!

タイトル背景の高さの調整方法がわからず上部のほんの少ししか表示されません。
色々と調べてみたのですが知識不足で手詰まりです。
とりあえず画像は今表示されている1枚だけですがランダム背景な設定にしています。
今表示されている画像の本当のサイズは993×420です。

出来るのならランダムに表示される画像によってタイトル背景の高さが変わるようにしたいのですが、無理なんでしょうか?

ご教授よろしくお願いします。
[ 2007/03/10 15:37 ] [ 編集 ]
[ 1381 ] > ゆっけさん
こんばんは、ゆっけさん。
こちらの記事に従ってスタイルシートに高さ(height)を指定してください。

ヘッダー背景に画像を表示する
http://10plate.blog44.fc2.com/blog-entry-105.html

背景の高さをランダムに変えることは出来ませんが、タイトル画像をランダムにした場合は自動的にその高さに変わりますよ。

タイトル画像をランダムに変える
http://10plate.blog44.fc2.com/blog-entry-88.html
[ 2007/03/11 03:11 ] [ 編集 ]
[ 1385 ] ありがとうございました!・・・が、
素早いお返事ありがとうございました!

どうにか表示させる事が出来ました。
しかし、表示させたい複数の画像の高さが違う(420px~600px)ので例えばヘッダーの部分をheight: 420px;に設定すると大きい画像が表示された時にやはり切れてしまい、height: 600px;に設定すると小さい画像が表示された時に上下に無駄な隙間が出来て不恰好になってしまいます。

このheight:を可変にする設定というのはないのでしょうか?

無理をいってすみません。
[ 2007/03/11 15:08 ] [ 編集 ]
[ 1388 ] > ゆっけさん
こんばんは、ゆっけさん。
よくよく調べると方法があるのかも知れませんが、高さをアクセス毎に変える方法を私は知りません。力不足で申し訳ありません。
どうしても画像の高さに合わせたければ『タイトル画像をランダムに変える』方法だと問題はありません。
[ 2007/03/12 01:39 ] [ 編集 ]
[ 1390 ] ありがとうございました。
なるほど~。
お手数をおかけしました。

精進しますので、また困った事があったらよろしくおねがいします<(_ _)>
[ 2007/03/12 12:15 ] [ 編集 ]
[ 1392 ] > ゆっけさん
力及ばず申し訳ありません。
もしなにかヒントになることがあればまた教えてください。
[ 2007/03/13 02:44 ] [ 編集 ]
[ 1525 ] TOPページ画像のランダム表示について。
突然の書き込み大変失礼いたします。私は現在、友人とともにWEBを製作をしております。

先日、fc2様よりサーバーをお借りしました。TOPページの背景画像をランダム表示させたいと考えておりますが、こちらのタグは、ブログ以外にも有効なのでしょうか?
何分初心者なのでよく分からず…。
一応、コピーさせていただいたのですが。

お忙しいところ大変申し訳ありませんが、ご教授いただけると幸いです。
[ 2007/03/27 00:30 ] [ 編集 ]
[ 1529 ] > ホシノさん
このスクリプトはブログでなくても有効ですよ。
どうぞご利用ください^^
[ 2007/03/27 00:54 ] [ 編集 ]
[ 1530 ] ありがとうございます。
素早い対応に大変感謝いたします。

ありがとうございました。
[ 2007/03/27 01:11 ] [ 編集 ]
[ 1553 ] > ホシノさん
WEB制作は楽しいですよ^^
頑張ってくださいね。
[ 2007/03/28 01:06 ] [ 編集 ]
[ 1719 ] はじめまして
はじめまして。
私はブログで小説を書いているのですが、以前より従来のテンプレートに満足できませんでした。
ですが、先日こちらのテンプレをお借りして以来みるみるうちに思い通りのページが出来上がっていきました。

全くの初心者の私でも理解できるように親切な説明がされていて、この記事の「画像をランダムに~」も参考にして試してみたところすぐに問題なく表示されました。
感激したので、こうやってお礼の書き込みさせて頂いています。
ありがとうございました♪
次回の記事も楽しみにお待ちしています。
[ 2007/04/19 13:14 ] [ 編集 ]
[ 1744 ] > しおんさん
感激してくれましたか^^
有り難うございます。作者冥利に尽きます。
更新が滞ってますが記事を楽しみにしてくれているとは頑張らねばなりませんね^^;
[ 2007/04/22 00:14 ] [ 編集 ]
[ 1772 ]
いつもお世話になっています。
お気に入りの写真素材を色々使えてウレシイです!
希望通り! いいえ それ以上です! アリガトウございました。
[ 2007/04/27 13:25 ] [ 編集 ]
[ 1800 ] > アオイケイトさん
綺麗な花を入れましたね。
喜んでもらえると私も嬉しいです^^
[ 2007/04/30 00:19 ] [ 編集 ]
[ 2279 ] 教えてください。
全くの初心者です。教えてください。
画像をランダムにするために上に記載されているアドレスを
コピペしました。
が、画像のURLとはどうしたらわかりますか?
ランダムアップ用の画像をフォルダに分けて入れているのですが
それをどうやってURLとして表示するか分かりません。
初歩的なことで申し訳ありませんが宜しくお願いします。
[ 2007/06/21 20:53 ] [ 編集 ]
[ 2280 ] >>しーさん
http://10plate.blog44.fc2.com/blog-entry-88.html
ここの上から6番目のコメントを御覧下さいね♪
[ 2007/06/21 21:50 ] [ 編集 ]
[ 2282 ] >>ちゃん さん
失礼しましたっ!ちゃんと読めよって感じですね...。
教えてください、ありがとうございます。

アップできましたっ☆が、とても大きい写真になってしまって。
枠内に収めるにはどうやったらよいのでしょうか?
[ 2007/06/21 22:18 ] [ 編集 ]
[ 2291 ] >>ちゃん さん
画像のサイズの件、変更したらきちんと整いました。
お騒がせいたしました。

[ 2007/06/21 23:40 ] [ 編集 ]
[ 2293 ] > しーさん、ちゃんさん
ありがとうございます。ちゃんさん^^
しーさん、カスタマイズできてよかったですね。
[ 2007/06/22 01:38 ] [ 編集 ]
[ 2507 ] あれ?
</head>のすぐ上に記述を貼ったんですけど、
画像どころか何も表示されません。
bodyの部分をlightframe_whiteを使っているので、#header_bodyに変更もしました。
解決方法を教えて下さい。
[ 2007/07/09 19:54 ] [ 編集 ]
[ 2509 ] 画像の位置
ブログ名の横まで画像を広げたい場合の方法を教えてください。
今のままだとタイトル(?)と画像が開きすぎて
不恰好な気がするのです。
[ 2007/07/10 13:49 ] [ 編集 ]
[ 2515 ] >>しーさん
http://10plate.blog44.fc2.com/blog-entry-28.html
こちらに方法が掲載されています。
[ 2007/07/11 02:10 ] [ 編集 ]
[ 2516 ] >>Gangster CJさん
今現在は記述を貼っていませんよね?
正しい位置に記述を入れ、画像urlを指定すればちゃんと表示されるはずです。

もしかしたら記事をコピペする際にどこか切れて(消して)しまったのかもしれません。

再度チャレンジしたらうまく行くかもしれませんよ♪
もしどうしても駄目だったら、同じテンプレートをDLするのも手です。

Gangster CJさんのテンプレートはまだどこもカスタマイズされていないようなので、小さな不具合を見つけて修正するよりそのほうが早いです
[ 2007/07/11 02:24 ] [ 編集 ]
[ 2517 ] 一応
新着記事に新着表示を付けるカスタマイズを施しています。
それ以外は全くカスタマイズしていません。
ダメもとでちゃんさんの言うとおりにやってみます^^
ご返信ありがとうございました!
[ 2007/07/11 19:07 ] [ 編集 ]
[ 2518 ] もうダメポ
やっぱり出来ません。
</head>のすぐ上には、
新着記事用newマークの記述が貼ってあるんですが、
そこで良いんですよね?
それでダメだったら、
また同じテンプレートを落としてみます。
[ 2007/07/11 19:31 ] [ 編集 ]
[ 2519 ] すいません
同じテンプレートをまた落としてやって見たんですけど、
とりあえず成功したんですよ。
画像の真ん中辺りしか表示されませんでしたが。
でも、画像に重ねてブログタイトルや、
紹介文を表示するんじゃなくて、
画像の上にブログタイトル、
下に紹介文を表示したいって事なんですよ。
このやり方をブログで紹介されているでしょうか?
ご返信して下さったちゃんさん、
本当にすみませんでしたm(_ _)m
[ 2007/07/11 19:49 ] [ 編集 ]
[ 2520 ] >ちゃん さま
方法のURL教えてくださりありがとございます。。。。
でも出来ないのです...というか良く理解できなくて。
画像のサイズを変える方法もわからず、
widthの%を変えてみても何も変更になりません。

カンタンにタイトル部分が素敵になる方法
アドバイス頂ければ幸いです。
ちゃんさんのブログのように、タイトル部分をスッキリさせたいのですが。
[ 2007/07/11 22:04 ] [ 編集 ]
[ 2521 ] >ちゃんさまー2
なんだかいぢっていたら画像のサイズ変更できました。
改良はまだまだ必要ですが、またご教示よろしくおねがいします。
[ 2007/07/12 00:13 ] [ 編集 ]
[ 2574 ]
お初ですm(__)m
一つ質問なんですが、この背景をランダムに変えるタグって結局は全体的な背景専用なんですよね?つまり、右上だけの部分的な背景とかの場合はダメということですかね?
右上固定の背景をランダムに出来る方法があれば教えていただけませんか?
[ 2007/07/30 21:20 ] [ 編集 ]
[ 2577 ] >>bebebeさん
ランダムに表示させる背景が、全て右上固定表示用の背景であれば使用可能です。

背景固定の指定文はHTML内・スタイルシート内どちらに書かれていても大丈夫です。
[ 2007/07/31 13:56 ] [ 編集 ]
[ 2588 ] またまた質問ですが。。。
あの、こんな感じでいいのかな・・・と自分でやってみたのですが、、、どうやらおかしいようです(ーー;)
手間をかけて非常に申し訳ないと思うのですが、アドレスを
載せておくのでソースをみておかしなところがあれば教えていただけませんか?
よろしくお願いしますm(__)m
[ 2007/08/01 21:42 ] [ 編集 ]
[ 2591 ] >>bebebeさん
ブログではなくホームページだったのですね(^^)


入れる位置と記述そのものが違うようです。
「右上固定の背景画像をランダムに表示する」
ということになりますのでこうなります。

※文字数オーバーしてしまいますので2つに分けます。
[ 2007/08/02 15:03 ] [ 編集 ]
[ 2592 ] >>bebebeさん
<script language="JavaScript"><!--
var wall = new Array();

wall[0] = "http://takoweb.com/~bebebe/sc071_f60.jpg";



wall[5] = "http://takoweb.com/~bebebe/1112huukei1-w1.jpg";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>

<style type="text/css">
<!--
body{
background-attachment:fixed;
background-repeat:no-repeat;
background-position:right top;
}
-->
</style>


</head>



※必ず</head>の上に入れて下さいね
[ 2007/08/02 15:05 ] [ 編集 ]
[ 2594 ] うわ~感動です(T_T)/~~~
できました!!
なんか感動です。
なんかいろいろとありがとうございましたぁm(__)m
[ 2007/08/02 19:25 ] [ 編集 ]
[ 2714 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2007/09/03 18:07 ] [ 編集 ]
[ 2746 ] 参考にさせていただきました。
CSSで検索していたらこちらにたどり着きました。
すでに使用しているテンプレートに、なんとかランダム画像を組み込めないかうなっていたところ、こちらが大変参考になりました。

bodyの部分を変えたい部分に指定することで適用できました。
まだまだテンプレート改造は初心者ですが、今後とも精進していきたいと思います。また伺います。
[ 2007/09/13 02:08 ] [ 編集 ]
[ 2751 ] タイトルの背景
</head>のすぐ上にタグを挿入しても画像が表示されません
どこか消したりしなければいけないのでしょうか
[ 2007/09/14 10:22 ] [ 編集 ]
[ 2754 ] 解決
自己解決しました
[ 2007/09/14 22:49 ] [ 編集 ]
[ 3006 ] 教えてください。
あの、自分で撮った写真を背景にしたい場合はURLではないので、どうしたらいいかわかりません。
教えてください。
[ 2007/12/28 09:56 ] [ 編集 ]
[ 3009 ] >>美夜さん
まず自分で取った写真をPC内に取り込み、それをサーバー上にアップしますとURLがつきます。

FC2ブログでしたら、
管理ページ→ファイルアップロード

ここにアップしたものであれば、「表示」をクリックするとURLが出ますので、それをタグに入れます。
[ 2007/12/30 05:44 ] [ 編集 ]
[ 3028 ] すみません
<script language="JavaScript"><!--
var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像1のURL";http://blog-imgs-16.fc2.com/s/p/k/spkosuke/121.jpg
wall[1] = "画像2のURL";
wall[2] = "画像3のURL";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>


</head>

こうやっても背景が変わらないのですが、どこを直せばよろしいですか?教えてください!
[ 2008/01/12 02:01 ] [ 編集 ]
[ 3029 ] >>ヨッシーさん
画像URLを1つしか入れていないので背景は変わりません。
最低2つ以上入れます。

2つの場合は

wall[2] = "画像3のURL";

この部分は削除して大丈夫です。
[ 2008/01/12 03:39 ] [ 編集 ]
[ 3031 ] ありがとうございます!
アドバイスありがとうございます!
言われたとおりにしたのですが、背景が変わりません!
このどこを直せばいいですか?教えてください!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="<%author_name>">
<meta name="description" content="<%introduction>">
<title><%blog_name><!--not_index_area--> <%sub_title><!--/not_index_area--></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" title="デフォルト">
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS">
<link rel="top" href="<%url>" title="トップ">
<link rel="start" href="<%url>" title="最初の記事">
<!--prevpage--><link rel="prev" href="<%prevpage_url>" title="前のページ"><!--/prevpage-->
<!--nextpage--><link rel="next" href="<%nextpage_url>" title="次のページ"><!--/nextpage-->
<!--preventry--><link rel="next" href="<%preventry_url>" title="<%preventry_title>"><!--/preventry-->
<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>"><!--/nextentry-->
<script language="JavaScript"><!--
var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像1のURL";http://blog-imgs-16.fc2.com/s/p/k/spkosuke/121.jpg
wall[1] = "画像2のURL"; http://sinseihp.web.fc2.com/haruhi2.jpg


var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>



</head>
[ 2008/01/12 15:26 ] [ 編集 ]
[ 3036 ]
かどりんさん・ヨッシーさんすみませんでした(汗)
「文字を消してURL2つ以上」ですよね

URLしか目に入ってませんでした_| ̄|○
[ 2008/01/13 04:01 ] [ 編集 ]
[ 3077 ] 背景画像ランダムについて
 初めまして^^
こちらのテンプレ、lightframe_whiteをお借りして
背景画像をランダムにしようと試してみたところ、
一応はランダムにはなったのですが、左カラムの部分が
真っ白の状態になるのは、何か設定がいるのでしょうか?
真ん中、右端のみにしか背景画像が反映されないのですが・・・
[ 2008/01/28 22:32 ] [ 編集 ]
[ 3641 ] はじめまして!
タイトル写真をランダムで替えたくて方法を検索していたところ、
こちらのサイトに伺わせて貰いました。

実は上記HTMLを書き換えた事で、
トップにランダム写真を表示する事は出来たのですが
既存のブログ写真の上に出てしまいます。

私が以前にブログのテンプレートを
スタイルシートから編集した事が原因かと思います 汗

仮に、スタイルシートを修正して
タイトル写真をランダムにする事は可能でしょうか?

何卒、よろしくお願いします。


[ 2008/12/29 01:02 ] [ 編集 ]
[ 3852 ] よそ者ですが…
はじめまして。

よそ者ですが参考にさせていただきました。

自分なりに色んな方法を試しましたがうまくいかず、、、ですがココのをコピペしたところ、スッポリとはまってくれました。

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

また参考にさせていただきます。
[ 2009/04/07 12:09 ] [ 編集 ]
[ 3856 ] > shinohara design officeさん
FC2でないブログでも役に立てて嬉しいです^^
どうぞお好きなだけ参考にしてください。
[ 2009/04/07 22:21 ] [ 編集 ]
[ 4090 ] 固定背景画像を設置したいのですが・・
lightframeをお借りしています。
固定背景画像を設置しようとした所、テンプレートの枠の背面に画像が表示されてしまいます。。
その為、画像は殆ど見えないので、何とかテンプレート全体のそれぞれの枠(記事欄やサイドのフリーエリア欄など欄全て)を透視化させたいのですが、html素人にでも可能でしょうか?
ちなみに固定背景用のタグは以下を用いました。

<STYLE type="text/css">
<!--
BODY {
background-image : url("素材URL");
background-attachment: fixed;
background-position: 0% 100%;
background-repeat: no-repeat;
background-color:#FFFFFF;
}
-->
</STYLE>

お手数ですが御回答いただけると幸いです<(_ _)>
[ 2009/05/06 16:08 ] [ 編集 ]
[ 4098 ] > 猫まろさん
記事を掲載したのでこちらを参考にしてください。

背景に固定した画像を内側にも表示する
http://10plate.blog44.fc2.com/blog-entry-196.html
[ 2009/05/07 00:46 ] [ 編集 ]
[ 4115 ]
お世話になってます。
ランダムで固定背景画像(全て左下)を表示させようと試みたのですが、
エラーになってしまい表示されません;;
上記のbebebeさん宛のちゃんさんのコードを参照にしても
出来ませんでした。。

ちなみにコードは以下の通りです。

<script language="JavaScript"><!--
var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "http://blog-imgs-29.fc2.com/m/s/m/msmaro/cosmosBG.jpg";
wall[1] = "http://blog-imgs-29.fc2.com/m/s/m/msmaro/cosmosBG2.jpg";
wall[2] = "http://blog-imgs-29.fc2.com/m/s/m/msmaro/ajisaiBG2.jpg";
wall[3] = "http://blog-imgs-29.fc2.com/m/s/m/msmaro/roseBG.jpg";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }

</style>');
// --></script>

<style type="text/css">
<!--
body{
background-attachment:fixed;
background-repeat:no-repeat;
background-position:left bottom;
}
-->
</style>

これをlightframe_white のHTML編集欄で</head>の手前に入力したのですが、だめです。
重複防止の為に、スタイルシート末尾に入力した1つの固定背景を設定するタグ(以下の通り)

body {
background-image: url("http://blog-imgs-29.fc2.com/m/s/m/msmaro/cosmosBG.jpg"); /*
背景画像 */
background-attachment:fixed; /* 固定表示 */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: left bottom; /* 表示位置 */
}


を取り除いて上記のタグをhtml編集欄にいれたのですが間違っているのでしょうか?
何度も申し訳ないです<(_ _)>
[ 2009/05/08 01:19 ] [ 編集 ]
[ 4117 ] > 猫まろさん
document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }

</style>');

とう部分を、改行せずに

document.write('<style type="text/css">body { background-image:url(' , wall[rnd] , '); }</style>');

としてください。
[ 2009/05/08 02:11 ] [ 編集 ]
[ 4123 ] 出来ました!
無事固定背景をランダムに表示することが出来ました。
どんどん自分好みに変えられて嬉しいです。
本当に有難うございました(o_ _)o))
[ 2009/05/08 16:08 ] [ 編集 ]
[ 4177 ] 初めてで質問をすみません
他の作者様のスタイルシートで申し訳ありません。
その方の方法では全く出来ずさらにご質問を停止されておりますので藁をも掴む気持ちで質問させてください。
このページのTOPにあるJavaScriptを貼り付けましたらランダムになりますが左右の青色部分に適用されてしまいました。「BODY」部分が肝だと思うのですがその先が堂々巡りでさっぱりわかりません。何かヒントをいただけると幸いです。
よろしくお願いします。
[ 2009/05/12 08:35 ] [ 編集 ]
[ 4191 ] > みーけさん
どうやら自己解決されたようですね。
今見たらランダム画像が出来ていました。
[ 2009/05/12 23:47 ] [ 編集 ]
[ 4195 ] ありがとうございます
何度やっても出来ないのでデモページのソースをそのまま貼ってみたらうまく動くようになりました。
うまく行く行かないの違いはさっぱり分かりませんが大変勉強になりました。
またこちらで勉強させていただくつもりです。
よろしくお願いします。
[ 2009/05/13 01:12 ] [ 編集 ]
[ 4349 ] ヘッダーをランダムに変える
はじめまして。テンプレートは「cocktail」を使っています。
背景画像の変わりにヘッダー画像をランダム変更にしたいと思いましてこちらにたどり着きました。
下記ソースで変わる予定なのですが、変わらないのは
他に何か原因がありますか。
body部分を変えてもよくわからず、申し訳御座いません

<script language="JavaScript"><!--
var wall = new Array();

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

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">#header { background-image:url(' , wall[rnd] , '); }</style>');
// --></script>
[ 2009/05/20 15:29 ] [ 編集 ]
[ 4358 ] > ちゃさん
この記事は当サイトが提供するテンプレートを前提に書かれています。

他のテンプレートであれば#headerに相当するところを見つけなければなりません。URLを教えてもらえますか?
[ 2009/05/21 00:41 ] [ 編集 ]
[ 4366 ]
御返答ありがとうございます。
CSSでヘッダー部に記述してあるところを見て
HTML弄ってたら無事表示されました。
他のテンプレートなのに答えて頂き、ありがとうございます
[ 2009/05/21 15:27 ] [ 編集 ]
[ 5177 ] 内側の背景が・・・
外側の背景はランダムに変わるのですが、内側の背景だけ固定されてしまいます。
できれば外側と内側の背景をそろえて、ランダム表示にしたいのですが、できないでしょうか?
[ 2009/07/29 21:42 ] [ 編集 ]
[ 5187 ] > Geckoさん
今見たところ、内側も外側も背景がランダムに変化するようですが、解決されたのでしょうか。
[ 2009/07/29 22:53 ] [ 編集 ]
[ 5190 ]
いや、解決してませんね~・・・
内側の背景がモノクロで固定されてます。
[ 2009/07/29 23:23 ] [ 編集 ]
[ 5192 ] > Geckoさん
固定されるとまでいかないですが、何度も更新しているとタイトル背景が真っ黒になることがありますね。この現象のことでしょうか。

Geckoさんがお使いのOSとブラウザは何ですか?

【追記】
他にもタイトル背景画像をランダムに変える方法があるので、こちらを試してみてください。

HTMLの <!--▲▲ ヘッダー ▲▲--> の下に、以下を加えてください。


<script type="text/javascript"><!--

var img = new Array();
img[0]=new Image();img[0].src="画像0のURL";
img[1]=new Image();img[1].src="画像1のURL";
img[2]=new Image();img[2].src="画像2のURL";
img[3]=new Image();img[3].src="画像3のURL";
img[4]=new Image();img[4].src="画像4のURL";

var rnd = Math.floor((Math.random() * 100)) % img.length;
document.getElementById('header_body').style.backgroundImage='url('+img[rnd].src+')';

// --></script>
[ 2009/07/30 00:28 ] [ 編集 ]
[ 5197 ]
主にFirefoxです。
[ 2009/07/30 08:39 ] [ 編集 ]
[ 5198 ]
え~と・・・
確かにタイトルの方も気になっていましたが、それではなくて
http://blog-imgs-30.fc2.com/b/r/i/britador/jjjj_convert_20090730085018.jpgこんな感じに内側の背景だけがモノクロで固定されてしまうことを言っているのですが。
[ 2009/07/30 08:57 ] [ 編集 ]
[ 5204 ] > Geckoさん
申しわけありません、タイトル背景画像と勘違いしていました。

スタイルシートの次の行をコメントアウトするか削除してください。それで解決すると思います。

#outline {
background-color:#ffffff; /* サイト背景色 */
background-image: url(http://blog-imgs-30.fc2.com/b/r/i/britador/bg_20090611052151.gif);
}
[ 2009/07/30 21:27 ] [ 編集 ]
[ 5207 ]
ありがとうございます!!
ちゃんと表示されるようになりました。
場所違いかもしれませんが、タイトル画像が真っ黒になるのをなんとかする方法も教えていただければありがたいです。
[ 2009/07/30 22:09 ] [ 編集 ]
[ 5208 ] > Geckoさん
javascriptの外部ファイルを覗いたところ

wall[0] = "~";
wall[1] = "~";
wall[3] = "~";
wall[4] = "~";

と、wall[2]がとばされていました。
とばすことなく連番で指定すれば解決すると思います。
[ 2009/07/30 22:52 ] [ 編集 ]
[ 5209 ]
おお!!
そんなミスをしてましたか・・・
まったく、気付きませんでした。ありがとうございます!!
[ 2009/07/30 23:03 ] [ 編集 ]
[ 5214 ] > Geckoさん
修正したようですね。
これでもう問題ないと思います^^
[ 2009/07/31 21:44 ] [ 編集 ]
[ 5816 ]
/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像1のURL ”http://blog-imgs-29.fc2.com/u/i/r/uiry47pcnet/main_background.png;
wall[1] = "画像2のURL"http://blog-imgs-29.fc2.com/u/i/r/uiry47pcnet/main_background.png;
wall[2] = "画像3のURL"http://blog-imgs-29.fc2.com/u/i/r/uiry47pcnet/main_background.png;
var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">#header
{ background-image:url(' , wall[rnd] , '); }</style>');
// --></script>

</head>

このようにしたのですが反映してませんどうすればいいのですか?
[ 2009/09/04 06:52 ] [ 編集 ]
[ 5825 ] > REDさん
HTMLを覗いてもその記述が見受けられませんでした。
違うテンプレートにカスタマイズしていないでしょうか。
[ 2009/09/04 20:33 ] [ 編集 ]
[ 6432 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/10/11 12:02 ] [ 編集 ]
[ 6440 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/10/11 23:38 ] [ 編集 ]
[ 6443 ] 解決しました☆
親切なご回答、ありがとうございましたm(__)m
自分の好みのテンプレートになっていくのが楽しいです!
これからもお世話になるかと思いますが、よろしくお願いいたします。

本当にありがとうございました♪
[ 2009/10/12 02:07 ] [ 編集 ]
[ 6455 ] > Rippyさん
お役に立てて良かったです^^
[ 2009/10/12 23:42 ] [ 編集 ]
[ 6585 ] ご利用させていただきました
こんにちわ。以前、新着NEWマーク表示の際も記事を参考にさせていただきました。

今回こちらの記事を参考にタイトル画像のランダム表示がうまくいきました。ありがとうございます。IE6でもうまくいってよかったです。トラバさせていただきましたのでよろしくお願いします。
[ 2009/10/21 15:19 ] [ 編集 ]
[ 6592 ] > やっすぃぃぃーさん
参考になって良かったです。
トラバありがとうございます^^
[ 2009/10/21 21:49 ] [ 編集 ]
[ 6609 ]
タイトルを3つ用意したんですが
小さく表示されてしまいます!

元の大きさは 1000×200 です。

どうすれば元の大きさで表示されますか?

http://raigamex.blog11.fc2.com/
[ 2009/10/22 12:04 ] [ 編集 ]
[ 6615 ] > らいさん
使用する背景画像のURLとして、以下の4つを設定していますね。

http://blog-imgs-34.fc2.com/r/a/i/raigamex/netops.png
http://blog-imgs-34.fc2.com/r/a/i/raigamex/topnets.png

http://blog-imgs-34.fc2.com/r/a/i/raigamex/topnets2.png
http://blog-imgs-34.fc2.com/r/a/i/raigamex/gzltop.png

青いURLの画像は元々が小さい画像で、赤いURLは画像自体がありません。正しいURLを設定してください。
[ 2009/10/22 23:32 ] [ 編集 ]
[ 6620 ]
ありがとうございます。
設定しなおします。
[ 2009/10/23 11:05 ] [ 編集 ]
[ 6628 ] > らいさん
うまくカスタマイズできましたね^^
[ 2009/10/23 23:34 ] [ 編集 ]
[ 7367 ] ブログタイトルの位置。
こんばんは!いつもテンプレート使わせていただいてありがとうございます!
ずっと使っていたブログが全部消えてしまって、また一からスタートです...

そこで今回もこちらのテンプレートを使わせていただいているのですが、
ブログタイトルの位置を下げたらタイトル画像も一緒に下がってしまいます。

どうしたら画像の位置はそのままで、
タイトルの位置をうまく変えられますか?

前のブログでは同じ方法でうまく行ったんですが、今回は何故かおかしくて.....

アドバイスお願いします。
[ 2009/12/11 00:55 ] [ 編集 ]
[ 7371 ] > ナチコさん
現状を確認するためにURLを教えてもらえますか?
[ 2009/12/11 23:05 ] [ 編集 ]
[ 7376 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/12/12 01:24 ] [ 編集 ]
[ 7388 ] > ナチコさん
スタイルシートの末尾にこれを加えてみてください。
数値は調整してください。

h1 {
margin-top:100px;
}
[ 2009/12/13 01:00 ] [ 編集 ]
[ 8731 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2010/08/24 19:23 ] [ 編集 ]
[ 8767 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/11/24 20:10 ] [ 編集 ]
[ 8788 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2011/01/16 17:18 ] [ 編集 ]
[ 8846 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/07/25 16:57 ] [ 編集 ]
[ 8852 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/07/31 13:28 ] [ 編集 ]
コメントの投稿









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

タイトル背景
3枚の写真がランダムに表示されるようにしました。子猫のイチゴちゃんお昼寝ラムちゃん&イチゴちゃんデブ友達のまーこ先生&みみちゃんいたおさんに教えてもらいました\(^▽^)/
[2006/10/10 15:10] ねこにゃん
背景スカスカ
背景がスケスケになりました。何でかっていうとこういうことさ。FC2ブログのテンプレート工房様のテンプレを使っているのですがcssを強引に変更しました。body { text-align:center;line-height:1.3;
[2007/03/27 15:10] テレレモブ
気分転換2
今日はあっつかったので夜ドライプしてきました(・∀・)ノ ついでにいつも通り写真撮りしてきました。 撮った写真を背景にしてみたんですが...
[2008/08/16 02:45] 坤の雑記
タイトル画像をランダム表示
ブログレイアウトを変更してみました。 といっても、根本的には変わってません(苦笑)。ブログタイトルの画像をランダムに変更するように手...
-
管理人の承認後に表示されます
[2013/04/24 23:04]
-
管理人の承認後に表示されます
[2013/04/25 00:48]
ブログ内検索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
ユーザータグ


△ ページトップへ戻る