トップ背景画像ランダム表示ヒヨコ君増殖中

≪ PREV | PAGE-SELECT | NEXT ≫

JavaScriptはMACOサッカースタジオさんのを使用させていただこうと思います。ただライブドアブログ用に公開されているものなので勝手にFC2で使用していい物か微妙なのですが、作者から何らかのアクションがあった場合、速やかにその指示に従ってください。

まず、下記サイトに飛んでJavaScriptをそのまま導入ください。
Blog改造 Vol.2「トップ画像ランダム表示」＠MACOサッカースタジオ

次に書き替えを行ないます。上から11行目の#banner,#subbannerを#headerに変更ください。そして画像URL1～4をアップした画像URLに書き替えます。最後に当テンプレートCSSにあるトップ画像用設定(#header)のbackground-imageの1行を削除すれば完了です。

当テンプレート全てに対応可能だと思います。一応、動作確認して動いたのでがんばってみてください。

■ 余談

ちょくちょくコメント欄にこの手の質問を頂いていたので、少しがんばってみました。

COMMENT

★ 風優雅さん　はじめまして
ブログ拝見させていただきました。
えと、うちで紹介しているランダムスクリプトは背景画像をランダムに表示するものなので、タイトル画像仕様にしてしまうとランダム化されません。なのでタイトル画像仕様をやめるか表のTOP画像を透明GIFなんかにすると良いかもです。

| ひよこ＠管理人 | 2008/08/05 22:46 | URL | ≫ EDIT

はじめまして
三日程悪戦奮闘した結果できなかったので質問させていただきます

他の皆様の様に画像が空白になるのではなくて
1枚目の画像しか表示されません

</title>と</head>の間に入れて
#banner,#subbannerを#headerに変更しました
そして#headerのbackground-imageの1行を削除しました

僕のやり方に原因があると思いますが
ご指摘の程お願いします

| 風優雅 | 2008/08/04 04:59 | URL | ≫ EDIT

★ クトさん
えと、HTMLです
</head>を探してその直上に挿入してみてください。

| ひよこ＠管理人 | 2008/01/02 14:47 | URL | ≫ EDIT

おぉ！
ひこよさん　早速のお返事！
ありがとうございますー
でも、見当たらないんですよー('A
それってHTMLですかー
　　　　ｽﾀｲﾙｼｰﾄですか？

| クト | 2008/01/01 20:50 | URL | ≫ EDIT

★ クトさん　はじめまして
もちろんFC2ブログなので<$BlogTitle ESCAPE$>のような変数は存在しません。
似たような場所を探して挿入ください。
大体の場所はと言えばHTMLの上の方です。
がんばってください。

| ひよこ＠管理人 | 2008/01/01 20:40 | URL | ≫ EDIT

ひよこさん　始めまして

いきなりなんですけど、

MACOサッカースタジオ様のﾌﾞﾛｸﾞに書いてある
「<title><$BlogTitle ESCAPE$></title>
</head>」
が見当たらないんです；；
どこに有るのかおしえていただけませんでしょうか
おねがいします。

| クト | 2008/01/01 19:37 | URL |

★ nanami★さん
はい。またどうぞ。

| ひよこ＠管理人 | 2007/12/09 21:27 | URL | ≫ EDIT

そうです。その記事でした
背景のところだったんでした～

どの部分を削除したのかわからなくなって。。
背景ってのが思い出せず
なぜか「浮き出る」という単語しか出てこなくて
検索BOXで懸命に「浮き出る」「浮き出す」とか検索してました。
もちろん出てきませんでした(^▽^;)

すっきりしました。ありがとうございました♪
これからも楽しみに見させてもらいます

| nanami★ | 2007/12/08 11:27 | URL | ≫ EDIT

★ nanami★さん
冗談ですからそんな気を使わないでくださいｗ
でも少し嬉しかったりします←単純

背景の設定と言えばこれの事かな？
http://hiyokokun.blog2.fc2.com/blog-entry-344.html#comment2067

| ひよこ＠管理人 | 2007/12/06 23:14 | URL | ≫ EDIT

ひよこさん＆ひよこさんのテンプレのFANです！
･･とってつけたようですか?(^^;;ﾎﾝﾄです。

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

>FireFoxなどの表示が大変な事に...
テンプレの履歴確認してみたら、
だいぶ前からこの状態だった事が判明しました
自分のパソコンで見られるからと何とも思っていませんでした。
知らないってこわいですねーぞぞ。
教えてもらって本当に良かったです。ありがとうございました。

ついでにもう１つ質問を。
ブログの右と左にある縦の線ありますね。グレーの。
テンプレ最初では、『浮き出るように』なっている部分。
少し前に、細い線にしました。
（せっかくのデザインを、、すいません）
確かこちらのブログのどこかの記事に書いてあったと思うんですけど
探せなくなってしまいました。

一体どこの部分をいじって変えたのかがわからなくなってしまったんです。
こちらのどの記事に書いてあったか教えもらえますか？
お願いします。。

| nanami★ | 2007/12/05 23:51 | URL | ≫ EDIT

★ nanami★さん　こんにちわ！
ひよこじゃなくテンプレのファンですか･･･ちょっと残念です。
と言うのは冗談ですが長い期間のご利用ありがとうございますｗ

ランダム化のソース正規の場所に収まってますよ。ただそれとは別にCSSに若干問題があるようです。nanami★さんのスタイルシートのbody下に不要な } が存在します。それによりFireFoxなどの表示が大変な事になってますｗ。

body {
font-family:フォントファミリー略;
color: #333;
font-size: 100%;
margin: 0px;
padding: 0px;
text-align: center;
background-color:;
　　　　 background-image: url(画像アドレス略);
}

}←こいつは不要です。削除してください。

#container {
以下略

コメントなんてのはお気軽にしていただければ幸いです。
うちなんて黒歴史的なものがいっぱいあるし大変ですよｗ

| ひよこ＠管理人 | 2007/12/05 22:26 | URL | ≫ EDIT

こんにちわ！

実はずーっとヒヨコさんのテンプレのファンです～
ブログ初めてもうすぐ2年になるんですけど
ほとんどの期間使わせていただいています♪

自分のお家が恥ずかしくて、今までコメントできなかったんですが、、、
趣味が偏ってて、色々欲張って貼りすぎてるものでσ(^_^;)
思い切って来てみました！

TOP画像のランダム表示をやってみたんです。

＜/title>と＜/head>の間に入れる。
とありますが
その間ならどこでもおっけ～ですか？

最初、＜/title>の直後に挿入すると、TOP画像のところが真っ白けになってしまいました。
私が何か間違っていたのかな？？

ためしに最後のところの＜/head>の直前に入れたら、ちゃんと表示されたみたいなので
まぁこれでいいか～ってことにしたんですけど。。

では。。

| nanami★ | 2007/12/05 12:53 | URL | ≫ EDIT

★ 桜餅さん　こんばんは
大丈夫そうですね。綺麗にできてます。

記事タイトルのワンポイント画像は当テンプレートのならどれでも使いまわしてよいので気に入らなかったら変えてくださいね。

| ひよこ＠管理人 | 2007/11/26 22:53 | URL | ≫ EDIT

今、非コメで送りましたが解決しました！
大変申し訳ありませんでした。
トップ画像のランダム表示できました♪

| 桜餅 | 2007/11/26 20:37 | URL | ≫ EDIT

★ バニラぁさん
はい。大丈夫そうですね。

>返事が一日でくるとは！
え、ええ。暇なもので・・・ｗ

| ひよこ＠管理人 | 2007/11/18 13:51 | URL | ≫ EDIT

ご指導ありがとうございます！
間違いにきずきませんでした・・・
返事が一日でくるとは！さすがです
問題解決しましたぁミ★
今後ともよろしくお願いいたします。

| バニラぁ | 2007/11/18 11:43 | URL | ≫ EDIT

★ バニラぁさん　はじめまして
テンプレートご使用ありがとう。
HTML拝見させていただきましたところどうやら画像アドレスの挿入位置がおかしいようです。
画像アドレスは赤字部分のところに挿入します。

photo[0] = '画像URL１'; //１つ目の画像

例えばこんな感じです。
photo[0] = 'http://hiyokokun.blog2.fc2.com/hiyoko.png'; //１つ目の画像

他には多分ですが問題はないようなのでその部分だけ修正してみてください。
それにしても一週間もですか・・・よく心が折れませんでしたねｗ

| ひよこ＠管理人 | 2007/11/18 00:37 | URL | ≫ EDIT

はじめましてバニラぁと申します
hiyoko-dog750のテンプレートをお借りしています。
とても素敵です！
１週間以上できなかったのでぜひご指導をお願いします。
みなさんのコメントも全部拝見して試したんですが全部きちんとやっているのに画像がランダムにでてこなく、ページの上の画像が白いままで画像がでてきませんでした。
ぜひ教えてください。

| バニラぁ | 2007/11/17 18:59 | URL | ≫ EDIT

★ みかちゅーさん
はい。よろしくです。
お疲れさま。

| ひよこ＠管理人 | 2007/09/14 20:23 | URL | ≫ EDIT

ひよこ＠管理人さま
ありがとうございます。
画像の高さを変えてみたら何とかなりましたぁ。
とても素敵なテンプレありがとうございます
今後ともよろしくお願いいたします

| みかちゅー | 2007/09/14 00:03 | URL | ≫ EDIT

★ みかちゅーさん　ども。
ほー。画像ランダムはできたのですね。
で本題ですが。

1.画像は背景画像として貼り付けているので高さは全てあわせる必要があります。
2.ブログを拝見させていただきましたが普通に表示されてますよ？もっと細かい部分の事でしょうか?

| ひよこ＠管理人 | 2007/09/13 23:43 | URL | ≫ EDIT

ひよこ＠管理人さまへ
800px版でトップの黒字が白字に変えられなくてあきらめてしまった、
みかことみかちゅーです
lab87さんの画像ランダム表示に憧れて頑張っているところですが、うまくいきません。
使用する画像の高さは全てあわせるひつようがありますか？
現在の問題は

①リロードで画像は変わりますが、画像下が切れる
②テンプレ自体が表示されなくて、まっちろなかみに画像や記事が貼り付けたようになってしまう

です。
よろしくご指導くださいませ

| みかちゅー | 2007/09/13 22:01 | URL | ≫ EDIT

★ lab87さん
よくある事なので無問題です。
また何かあればお気軽にどうぞ。

| ひよこ＠管理人 | 2007/05/30 07:14 | URL | ≫ EDIT

早々のご回答ありがとうございました。
ひよこさまの指示通りで回避できました。
完璧です♪
感激です♪
なぜ改行が入ったかは不明ですが・・・。

申しわけありませんでした。
今後とも、よろしくお願いします。

| lab87 | 2007/05/28 23:17 | URL | ≫ EDIT

★ lab87さん
多分わかりました。
挿入した画像アドレス直後に改行が入ってます。
4つの画像アドレス直後の改行をやめてください。

photo[0] = 'http://blog72.fc2.com/y/yellowlab87/file/IMG_0086.jpg
'; //１つ目の画像
↑こうではなく↓こうです。
photo[0] = 'http://blog72.fc2.com/y/yellowlab87/file/IMG_0086.jpg'; //１つ目の画像

これで表示されるようになると思います。

| ひよこ＠管理人 | 2007/05/28 22:45 | URL | ≫ EDIT

お世話になっています。
ご指摘のように削除せず挿入いたしました。
画像のURLを４つ挿入しましたが、CSSにあるトップ画像用設定(#header)のbackground-imageの1行を削除すると、やはり空白になってしまいます。

Win xp ver5.1でinternetExplorer ver.6です。
編集中のアドレスは http://yellowlab87.blog72.fc2.com/ です。
よろしくお願いします。

| lab87 | 2007/05/28 22:27 | URL | ≫ EDIT

★ lab87さん
テンプレートご使用ありがとう。
質問の解答ですが削除しなくて挿入してください。
こんな感じ↓

<title><%blog_name><%sub_title></title>
←ここに挿入です。
<link 略 type="text/css" />

これでも駄目なら、どこかに記述ミスがあると思われます。編集中のテンプレートのアドレスを頂ければ、記述ミスを指摘する事が可能です。ついでにOSとブラウザを教えていただけると助かります。

| ひよこ＠管理人 | 2007/05/27 17:42 | URL | ≫ EDIT

hiyoko-dog750を使わせていただきました。
とても気に入っています。

トップ画像のランダム表示に悪戦苦闘しています。

@MACOサッカースタジオさんのサイトより～
</title>と</head>の間に入れる。・・・ですが、

<title><%blog_name><%sub_title></title> と </head>　の間に・・・

<link rel="stylesheet" media="screen,print" href="<%css_link>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
・・・が、あります。

これは、削除せず挿入ですか。

削除して挿入、削除せずに前に挿入、後ろに挿入の３パターン試みましたが、出来ませんでした。

ひよこさまの仰るとおり、
#banner,#subbannerを#headerに変更しました。
アップした画像URLに書き替えました。
当テンプレートCSSにあるトップ画像用設定(#header)のbackground-imageの1行を削除しました。

画像の部分が空白になってしまいます。
ワタシのやり方に原因があると思いますが、なにかが間違っているのでしょうか？

| lab87 | 2007/05/27 17:16 | URL | ≫ EDIT

★ 出人さん
そうそう。こうゆう考え方が新しい物を生み出す発想の妨げになってしまうんです。斬新な発想はもっと自由な考えで取り組まないと生まれないんだよね・・・

それが僕のテンプレートがなかなか進化しない理由でもあります（笑）

| ひよこ | 2007/02/10 13:47 | URL | ≫ EDIT

わたしも基本は同じです。サイトを統一したいというか、サイトのイメージをあんまり変えたくないというか。

でも、犬なら犬で、歩いてるときとか、寝てるときとかいろんな絵を出せるし、ま、タイマー仕込んで同じ海岸風景の朝昼夕夜とか、いろいろ凝ったことのできる可能性もあるのでしょう。インフラの整備によって、高速切り替えでアニメができる可能性もあるかも。そのあたりは工夫というか、アイデアだけではなんともならないのでしょうけど。

可能性が広がるのはすばらしいことだと思います。

| 出人 | 2007/02/10 09:38 | URL | ≫ EDIT

★ 出人さん
俺の場合、サイトは統一したい派なので
コロコロ画像が変わってしまうのはアレですがね。
TOP画像をたくさん作って見せたい分にはいいかもです。

| ひよこ | 2007/02/10 02:56 | URL | ≫ EDIT

ぴよこがimageを削除するんだよ♪

| BlogPetのぴよこ | 2007/02/09 17:15 | URL |

トップ絵をランダムで変えてみたいなぁって思うことありますよね。あったら使いたい機能かも。

| 出人 | 2007/02/09 07:54 | URL | ≫ EDIT

現在yournet.ne.jpを書き込み規制しております。ご用の方は面倒ですがメールでお願いします。

TRACKBACK URL

言及リンクの無いトラックバックは受け付けておりません。

http://hiyokokun.blog2.fc2.com/tb.php/484-69faf126

TRACKBACK

≪ PREV | PAGE-SELECT | NEXT ≫

Information

MY CSS DESIGN

Author : ひよこくん
性別 : ♂

HTML・CSS知識は中途半端ですがFC2ブログテンプレートを垂れ流しています。

Twitter

follow ouiei at http://twitter.com

Search

Mail Form

当テンプレートへの質問は可能な限りコメント欄にお願いします。どうしてもと言う時はメールでどうぞ。質問に関してはURI必須なので本文中にブログアドレスをお忘れなく。

現在の閲覧者数

Others

[PR] オンラインゲーム

FC2ブログのテンプレート配布・作成日誌。