解決済
ブログタイトル画像をアクセスの度に変更する方法は？
CSSにjavascriptを記入すればできるということでを参考にスタイルシートに記述してみたのですが、
全く反応がありません。何故でしょうか？？
ブログは花の写真03をカスタマイズしてます。
スタイルシートのタイトル画像を指定してる後に
追加してみました。
#banner,#subbanner{
width:850px;
height:250px;
background:url(ﾀｲﾄﾙ画像1.jpg) no-repeat 50% 0;
text-align:left;
margin:0 auto;
}
<!-- ここから追加 //-->
<div id="banner">
<script type="text/javascript"><!--
new function(){
var img_list = new Array(
"ﾀｲﾄﾙ画像1.jpg",
"ﾀｲﾄﾙ画像2.jpg",
"ﾀｲﾄﾙ画像3.jpg"
);
var img = img_list[Math.floor(Math.random()*(img_list.length))];
document.getElementById("banner").style.backgroundImage='url(img/'+img+')';
};
//-->
</script>
</div>
<!-- ここまで追加 //-->
宜しくお願いします。
回答(1)
1.
ＣＳＳは、スタイルを記述するところで、JavaScript を書いても解釈されません。デザインのカスタマイズで、「トップページ」などテンプレート（ＨＴＭＬ）部分に記述します。
<div id="banner">が既に（多分）ある場合は、この部分は追加する必要はないです。
img/は、画像が img フォルダにある場合という意味ですので、
そういう風になってない場合は、 ～からのアドレスをファイル名としてかいて、img/ の部分は削除します。
>>#14
コメント＃１を転載しました。
BLUEPIXYさん、詳しく教えて頂き本当にありがとうございました！！
勉強になりました(*_ _)ﾍﾟｺﾘ
コメント(14)
ＣＳＳは、スタイルを記述するところで、
JavaScript を書いても解釈されません。
デザインのカスタマイズで、「トップページ」などテンプレート（ＨＴＭＬ）部分に記述します。
<div id="banner">が既に（多分）ある場合は、この部分は追加する必要はないです。
img/は、画像が img フォルダにある場合という意味ですので、
そういう風になってない場合は、http:///～からのアドレスをファイル名としてかいて、img/ の部分は削除します。
＞＞#1. BLUEPIXYさん
こんばんわ。先回に引き続き回答して頂き本当にありがとうございます。
img/ の削除、トップページ、個別記事ページ、カテゴリアーカイブ、月別アーカイブに
記載することで無事にランダム表示ができました！
本当にありがとうございました！！
そこでもう一つ質問しても宜しいでしょうか？ごめんなさい。
前回と同じ画像が何度も表示されてしまうんです。
そこで前回の表示画像を覚えさせておく為のスクリプトを
教えて頂けないでしょうか？
宜しくお願いします。
>>#2
前回表示の画像というのは、ユーザー側によって異なるので、
ユーザー側の前回の情報を保存しておく必要があります。
そういう場合は、クッキーを使ったり、DOM STORE を使う必要があります。
ちょっと面倒なので、パスさせて下さい。
クッキーの使い方については、多分どこかにサンプルがあるはずです。
手順としては、
選ばれた画像の番号を保存しておいて、同じ番号になってしまうようなら、もう一回番号を選び直すなんてことが必要かと思います。
＞＞#3. BLUEPIXYさん
クッキーの保存の仕方は面倒な記述になるんですね。
初心者すぎて私は理解できないかも＾＾；
検索して調べてみて、分からないようなら諦めます。
ありがとうございました！！
>>#4
いちから書いたら面倒ですけど、
おそらく、ライブドアのクッキー処理用のコードが使えると思います。
あとクッキー使用のコードを書いても、
最近では、ガードソフトによってクッキーの書き込みが拒否される場合があるかもしれません。
>>#5. BLUEPIXY さん
クッキーの処理、やっぱり分からなかったんです。
面倒くさそうと思って諦めました。
それで簡単なjavascriptの記述だけで出来る方法はないか検索して試したのですが、
画像は切り替わってもブログタイトルの文字が変な場所に移動してたり、
画像が変な場所に移動したり、おかしくなったんです。
ライブドアブログではBLUEPIXYさんの記述したものしかうまく行かないようでした。
ブログタイトルを画像化すれば、うまくいく気もしますが、
タイトル文字を消すと検索に引っ掛かりにくくなりますよね？？
>>#6
>面倒くさそうと思って諦めました。
まあ、手間を掛けたわりに（利益というか）効果は薄いと思います。
タイトル文字を消すと検索に引っ掛かりにくくなりますよね？「タイトル文字」自体は消さずに、スタイルシートで、非表示にすれば、
検索は、ロボが自動で読みますから多分影響ないと思います。
お返事遅くなってすみません。
スタイルシートで非表示設定にすれば影響ないんですね！
ちょっとチャレンジしてみたいと思います。
ちなみにjavascriptを切ってる方が見た場合は
表示されませんよね？？
<noscript>
<img src="ブログ画像1" border="0">
</noscript>
↑これを入れておいた方が良いでしょうか？？
>>#8
質問に書いてあるようにしてある場合は、
スクリプトが動かない場合も、スタイルシートにデフォルトとして設定されている画像が表示されます。
逆に、<img> を使って表示すると、デザインというか配置がずれてしまうような気がします。
あと、特にランダムとかアクセスの度に変わるというのでなくて、
日によって変わる（日によって変われば同じにならない的な・）というのであれば、
var img = img_list[Math.floor(Math.random()*(img_list.length))];の部分を
var img = img_list[(new Date()).getDate() % img_list.length];とか(画像の数は月の数以下）
あるいは、
var img = img_list[(new Date()).getTime() % img_list.length];とかするといいかも(後の方は、結構ランダムになるかも・、こちらは同じになる場合もある・）
>>#9.10. BLUEPIXY さん
スタイルシートで設定してあれば表示されるのですね！！
<img> を入れるとスタイルが崩れることもあるんですか。。
勉強になります＾＾
日によって変える場合、(画像の数は月の数以下）というのは
30～31枚分の画像が必要ってことですよね？
日ごとに変わるのも楽しそうです＾＾ 参考にします！
ちなみにブログタイトルの件ですが、やはり文字を画像化せずに
残すことにしました。タイトル画像が遅れて表示される為、
タイトル部分に空白時間が少し出来てしまうのが気になるんです。
javascriptの読み込みに時間がかかってるということですよね？
で、タイトルを文字にしておくと画像が来なくてもタイトルだけは
表示されるのでこっちの方がいいかなと思いました＾＾
いろいろ教えて頂きありがとうございました。
>>#9.10. BLUEPIXY さん
実は別件でまた上手くいかないことが出てきてしまいまして…。
もうここでは長くなってしまうので、新しく質問をしようかと
思ってるのですが、またBLUEPIXYさんにお答えいただければ嬉しいです。
内容は、FC2のﾚﾝﾀﾙﾌｫｰﾑを借りてきたのですが、表示がおかしくなってしまいました。
ちょっと困ってしまってるのでブログも見て頂きたいです。
その際はよろしくお願いします(*_ _)ﾍﾟｺﾘ
#13. BLUEPIXYさん、
ベスト回答やナレを差し上げたいのですが、
回答にコメント頂けたら幸いです。
