ブログのトップページの画像をページを表示されるたびに変えたい
ライブドアブログのTOPページ画像をページを表示させるたびに変えたいのですが、どうもうまくいきません。一度は設定したのですが、画像が消えてしまいました。どうすればよいでしょうか?お願いいたします。ちなみに・・・
<SCRIPT LANGUAGE="JavaScript">
<!--
simg=new Array(5);
simg[0]="画像";
simg[1]="画像";
simg[2]="画像";
simg[3]="画像";
simg[4]="画像";
Myimg=Math.floor(5*Math.random());
document.write("<center><img src='"+simg[Myimg]+"'></center>");
//-->
</SCRIPT>
と設定していました。
回答(2)
2.

設置したあとの補足調整をアドバイスできない
状態ではあるけど、こちらのスクリプトに
差し替えていただけますか?↓
管理画面に入って、カスタマイズ/管理 > デザインの設定 > カスタマイズ > を順にクリックしていくと CSS と 4つ の HTML のページが出てきます。
その中の、4つのHTML の <head> ~ </head> の間に以下のスクリプトを書き込みます。
<script language="JavaScript">
<!--
img = new Array();
img[0] = "画像アドレス";
img[1] = "画像アドレス";
img[2] = "画像アドレス";
img[3] = "画像アドレス";
img[4] = "画像アドレス";
img[5] = "画像アドレス";
img[6] = "画像アドレス";
function setBanner(){
amount = img.length;
No = Math.floor(Math.random()*amount);
document.write("<img src='" + img[No] + "' border='0'>");
}
//-->
</script>
次に4つの HTML のそれぞれの <div id="banner"> のすぐ下に、以下を記述します。
<script language="JavaScript">
<!--
setBanner();
// -->
</script>
<noscript>
<img src="基本となるヘッダー画像のアドレス" border="0">
</noscript>
これで保存。全てを再構築して下さい。
CSS の中にヘッダー画像を表示させるような表記がしてあるのなら、そちらは削除しておいてください。
通常は、#banner,#subbanner{ } の中に、background:url(http://・・・} って部分があると思います。
これ以降のフォローは、キャサリン さんのブログを直接見ながらでしかできません。これで解決しなければ、アドレスを教えていただけますようお願い致します。
すごく丁寧に教えていただきありがとうございます!!
説明どおりに設定したら、ちゃんとできました!!
・・・しかし、ブログタイトル画像の下に表示されるようになってしまいました。今までは画像の中に表示されてたので、そうしたいのですが・・・どうしたらよいでしょうか?
何度もすみませんがよろしくお願いいたします!
ブログのアドレスです。
http://blog.livedoor.jp/torepan555/
1.

ないとは思いますが、このコード、CSSのところには書いていないですよね?
どうしてもわからない場合、ブログのアドレスを書いてもらえば、誰かが回答してくれると思います。
回答ありがとうございます。HTMLに書き込んでましたが、どうやら原因がわからないのですが写りませんでした。
コメント(9)
>> キャサリンさん
あれから検証をつづけていましたが、スクリプトで表示されている背景画像 ( ヘッダー画像 ) の上に、ブログタイトルと要約説明 ( .description ) をレイヤー ( 重ねる ) させる事は無理でした。^^;
そこで提案なんですが、リロード ( 再読み込み ) させる度に入れ替わるヘッダー画像に、直接ブログタイトルを入れてデザインし、そのヘッダー画像全体にキャサリンさんのブログのアドレスをリンクさせるようにするのはどうでしょうか?
私から見た感じの印象ですが、ディスクリプション ( 要約説明 = ブログの説明 ) はそのままにしておく方が良さそうです。ブログタイトルを外せば綺麗にセンターに表示されています。あとはそれの上下の隙間を CSS で調整すれば OK と思います。
まずその前に CSS の中身を整理しましょう。
#container{ } が2つ存在しています。下にある #container{ } を削除しましょう。そして上の #container{ } の width を 795px に変更して下さい。あなたのヘッダー画像の幅は、795px です。
次に、#banner,#subbanner{ } の中に、height が2つ存在します。上の、height:148px; を削除して下さい。あなたが設定している画像の高さは 250px です。またその中に記述されている background:url()no-repeat scroll 50% 0; の記述は綺麗に削除して下さい。これで保存、CSS の再構築をおこなって下さい。
次に4つのそれぞれの HTML の記述の一部を削除、また上の回答で説明したことを少し変更して新たに記述を追加します。
まず、それぞれの HTML の中の
<h1 class="blogtitle"><a href="http://blog.livedoor.jp/torepan555/">楽園ハワイ</a></h1>
を削除します。
次に上の回答で説明した <div id="banner"> の下に記述したスクリプトの呼び出しタグに、その削除したタグを合わせます。こういう感じになります。
<h1><a href="http://blog.livedoor.jp/torepan555/" title="楽園ハワイ">
<script language="JavaScript">
<!--
setBanner();
// -->
</script>
<noscript>
<img src="http://image.blog.livedoor.jp/torepan555/imgs/b/3/...; border="0"></noscript></a></h1>
これでページを読み込むたびにコロコロ入れ替わるヘッダー画像全体にあなたのブログの URL が常にリンクされる事になります。
そして気になっていたのですが、画像アドレスの末尾に記述されている ?blog_id=1290478 は、あなたのブログをライブドアが管理する為の識別 ID です。いらないので、すべての画像の末尾からこれを削除しておいて下さい。
これで保存。トップページだけ再構築をおこない、状態を確認して下さい。OK なら全て再構築をかけます。
ヘッダー画像にブログのタイトルを初めから加工して入れておくことができるのなら、これが一番綺麗にブログが表示される方法なのですが、どうでしょうか?
追記です。
ヘッダー画像にカーソルをあてると、Windows の IE の場合は、イメージツールバーという画像がヘッダー画像上に出てきます。非常に見苦しいのでそれを出さないようにします。
やり方は非常に簡単です。4つの HTML ( トップページ・個別記事・月別・カテゴリー別 ) に以下のソースタグを追記するだけで、すべてのページの画像から、この 『 イメージツールバー 』 が出なくなります。ソースタグを追加する場所は、すべてに共通しております。同じ場所に記述して下さい。
<meta http-equiv="imagetoolbar" content="no">
これは 『 メタ 』 と呼ばれているタグです。イメージツールバーを NO ・・・ つまり、出さないで! ってお願いしているわけです。このメタタグを、HTML の中の <head> ~ </head> の間に、普通は <title> の下 ( euc-jpなどの文字指定をしているタグ ) の下ぐらいに記述するのが良いかなって思います。
それと要約説明 ( .description )、あなたのブログですと、『 ~ハワイって素晴らしい!!***ヾ(≧∇≦)ノ”***永住目指して日々頑張ってます!~編 』 のことですが、これの上下を調整するのは、CSS の中の .description{ } に新たに margin:○○px 0px △△px 0px; を追加します。
○○は上の隙間を、△△は下の隙間を調整します。2番目と4番目は 0 ( ゼロ ) で良いです。
AQさん、こんなに親切に回答いただいて、ほんとありがとうございます!!!画像自体をリンクさせる方向でAQさんの回答を参考に修正します。時間がないので明日修正させていただきます!取り急ぎ、お礼まで・・・
AQさん、修正しました!
サブタイトルも画像につけてしまいました。
ありがとうございました!
どこでお礼を言えばいいのかわからなかったので、ここにコメントしちゃいました(^-^)
>> キャサリンさん
無事にできたみたいですね。(^^)
そして、すごく綺麗なブログに仕上がりましたね。
記事も面白いし、人気ブログ間違いなしと思います。
また何かあれば、いつでもナレッジへご質問ください。




