-----------------------------------------
【1】 まず、ヘッダー用の画像を 2 枚以上用意しましょう。
いや、別に 1 枚だけでも良いんだけどさ、
1 枚をランダム表示させてもその 1 枚の画像が回ってるだけだから
実際に変わってるかなんて視覚で分からないでしょ?
だから 2 枚以上用意してくださいって事っすよ。
でも、20 枚とか 50 枚とかは作るの面倒だし、ブログ全体が重くなるハズなので (多分...)、
3~10 枚程度が良いくらいかと思います。( 12 枚まではアリかな...とは思います)
ってか、それくらいで抑えてください。
あと、画像 1 枚のファイル容量は 100KB 以下(大きくても 150KB 以下) にしてください。
容量が重ければ重いほど、読み込むのに時間がかかってしまいますので。。。。
-----------------------------------------
【2】 それをてぃーだにアップロード!
・・・さすがにこれのやり方は分かりますよね?
「わたしぃ、そんなのわかんなぁい~」 とかキモ・・・・ かわいらしいこと言う人は、
てぃーだブログのヘルプ 「記事に複数の画像を入れるには?」 を読んでください。
は? ヘルプどこにあるか分からんって?
片っ端から投げ飛ばすぞ!!
基本が出来てから応用はやりなさい!!
えっと...ヘルプの場所は、管理画面の右上にありますよ。
一応、画像も載せまスね。
-----------------------------------------
【3】 ランダム表示の記述をテキストに貼る!
下記の javascript を メモ帳、秀丸エディタなどのテキストにコピーして貼り付けてください。
これを少し手直ししてからブログテンプレートに貼り付けていきます。
慣れてる人は、直接テンプレートに貼り付けても良いんですが、こっちが多分楽です。
<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="ヘッダー画像の URL (一枚目)";
rdmimg[1]="ヘッダー画像の URL (二枚目)";
rdmimg[2]="ヘッダー画像の URL (三枚目)";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>
※こちらは三枚の画像をランダム表示させる場合の記述です。
画像数を増やしたい場合は、
rdmimg[3]="ヘッダー画像の URL (四枚目)";
rdmimg[4]="ヘッダー画像の URL (五枚目)";
という感じで rdmimg[x]=" ・・・・・・"; の数を増やしてください。
※画像が重い・多いと読み込むのに (多分) 時間がかかりますので、入れ過ぎないように...
【訂正】
システムチームの人に聞いたら、「この記述だったら、登録している画像すべてを読み込み
する動きはしないよ」 って言われたので、何枚でも何百枚でも登録大丈夫みたいです。
【私が思っていた上記のランダム表示記述の動き方】
1.「一度、記述している画像を全部読み込む」 → 2.「ランダムで選ばれた画像を表示させる」
【システムの人が言った上記の記述の動き方】
1.「記述でランダムに表示する画像が選ばれる」 → 2.「その画像だけを読み込みんで表示」
-----------------------------------------
【4】 javascript にヘッダー画像の URL を入れる!
まず画像一覧ページを開いて、さっきアップロードしたヘッダー画像の URL を確認します。
画像一覧にアップされた画像が表示されているので、それをクリックしてくだされ。
すると、別ページが開いてその画像が原寸大で表示されます。
そのページの 「アドレス」 に記載されている URL がその画像の URL です。
この URL をコピーして、javascript 内の ヘッダー画像の URL (一枚目) と入れ替えてください。
このとき、ヘッダー画像の URL (一枚目) を挟んでいる "" を消さないようにしてください。
二枚目、三枚目も同じようにやってくださいまし。
全部入れ替えたら、ランダム表示の javascript は出来上がりです。
ちなみに、私の場合は下記となりました。
<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="http://img04.ti-da.net/usr/yamigeme/shinjyuku_001.jpg";
rdmimg[1]="http://img04.ti-da.net/usr/yamigeme/kusunoki.jpg";
rdmimg[2]="http://img04.ti-da.net/usr/yamigeme/kinjyou_001.jpg";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>
※赤くなっている部分が貼り付けたヘッダー画像の URL です。
変更箇所が分かり易いように赤くしただけなので、実際は色つきません。
-----------------------------------------
【5】 作成した javascript をテンプレートに貼り付ける。
これでやったら終わりでスので、
テンプレートのカスタマイズページの 「トップページ 」「個別記事」「アーカイブ」 の枠から
下記の部分を探してください。結構上の方にあります。
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<!-- HEADER -->
見つかったかね?
では次に </head> の上を改行してください。
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<!-- HEADER -->
で、改行して空いた箇所に javascript を貼ってください。
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="http://img04.ti-da.net/usr/yamigeme/shinjyuku_001.jpg";
rdmimg[1]="http://img04.ti-da.net/usr/yamigeme/kusunoki.jpg";
rdmimg[2]="http://img04.ti-da.net/usr/yamigeme/kinjyou_001.jpg";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>
</head>
<body>
<!-- HEADER -->
貼り付けたら、下の登録を押してテンプレート編集を保存してください。
※赤くなっている部分がテンプレートに追記した javascript の記述です。
変更箇所が分かり易いように赤くしただけなので、実際は色つきません。
-----------------------------------------
はい、これでランダム表示の設定は終了です。
きっと思ってたよりは簡単だったんじゃないっすかね?
大体のテンプレートはこれでヘッダー画像のランダム表示が出来ますが、
このやり方では上手くいかないテンプレートもあると思います。
その場合は、一度これが対応しているテンプレートに変えてからやって頂くか、
css や javascript の勉強してやってください。
最後に...
「この設定したから変なになった!責任取れ!」
「私の日常返して欲しいわ!」
などの苦情は 一切受け付けません。
テンプレート編集に関しては 全てご本人さまの自己責任となります。
てぃーだには 「テンプレートを複数保存」 という素敵な機能が御座います。
もし、テンプレートのカスタマイズに自信の無い人は、現在使用しているテンプレートをコピーして、
カスタマイズ前のものを残した状態にして頂ければと思います。
「ちゃんとバックアップして、カスタマイズを間違っても元に戻せるようにする」 と言う事です。
元に戻せるように準備を怠っていなければ、苦情なんてありえない...と言うワケです。
また、「やり方が難しくて分からない!」 などの問い合わせは華麗にスルーとなります。
ご了承下しさいまし。
時間があったら、何か役に立ちそうな事、また書きまスね。
ここまでお読み頂き、ありがとう御座いました。
これの前に書いた 「CSS、簡単にいじれますよ。」 も良かったら見て下しまし。
http://yamigeme.ti-da.net/e1176959.html
では。。。