ヘッダー画像のランダム表示、改良版
当ブログで使用しているヘッダー画像のランダム表示(これとこれ)は、ずいぶん前に作ったものだったので、少々改良したものを公開。今回のものは、移転した先のFC2ブログ用に作ったのを、てぃーだブログ用に書き直しただけなんだけど。
以前のものにあった問題点は・・・
何故かHTML内への埋め込みでJavaScriptを書き込んでいたので、JavaScriptがオフの場合にレイアウトが崩れたりしてしまう。
ここはhead内に記述する方式に改めることで、JavaScriptがオフの場合にはランダム表示にならないだけで、レイアウトが崩れると言うことは回避できた。
またJavaScriptでファイル名の連番を生成したいたので、ファイル名をわざわざ連番にしないといけなかったし、アップロードする時期によってサーバーが変わったりすると対応できなかった。
少々手間はかかるけど、バナーの画像のURLをひとつずつ書き込んでみた。これで、ファイル名は任意のものに対応できるし、バラバラのサーバーにあったとしても問題はない。
そう言う問題をいろいろ改良したのが今度の方式。記述位置を改めて、ファイル名をひとつずつ記述した改良版、名付けて「記述位置を改めファイル名をひとつずつ記述した改良版」・・・では長いから、「ランダム表示ver2.1」でいいや。
それはともかく、最低限のHTMLの知識は必要だけど、出来た時はけっこう感動的じゃないかと思う。
ある程度JavaScriptの内容を理解できて、少し応用できるようになると、時間帯によって別の画像を表示するとか、日付によって違う画像を表示するとかもできる。てぃーだブログ版とFC2ブログ版は作ったけど、必要なところを改造すれば他のブログでも設置できるところがあるはず。
必要ない人以外には全く意味をなさないので、ガッツリ折り畳んでおく。
<SCRIPT LANGUAGE="JavaScript">
<!--
e = Math.floor(Math.random() * 6)
{
document.write('<style>')
if (e == 0) {
document.write('#banner{background-image:url(●●●●);}')
}
else if (e == 1) {
document.write('#banner{background-image:url(●●●●);}')
}
else if (e == 2) {
document.write('#banner{background-image:url(●●●●);}')
}
else if (e == 3) {
document.write('#banner{background-image:url(●●●●);}')
}
else if (e == 4) {
document.write('#banner{background-image:url(●●●●);}')
}
else {
document.write('#banner{background-image:url(●●●●);}')
}
document.write('</style>')
}
-->
</SCRIPT>
以上の必要な部分を書き換え、テンプレートのHTMLの<head>~</head>内に貼付ける。
書き加える部分は<head>~</head>の中なら何処でも良いかと思ったら、<head>のすぐ下に書き込んだら長いヘッダのどこかで邪魔をして動作しないこともあったので、</head>のすぐ上を推奨。
では、各部を説明しながら、訂正が必要な部分を解説。
<SCRIPT LANGUAGE="JavaScript">
この行はこれからJavaScriptが始まりますよって意味。
まだ書き始めで元気なので、念のためここも解説。
<!--
<!--から-->までは、HTML内にコメントなどを書き込むためのもので、HTMLのタグとしては無効になり表示されないけど、JavaScriptやCSSは有効。古いブラウザなどでJavaScriptやCSSがブラウザに表示されないように、念のため入れているもの。
省略しても大丈夫だけど、入れといて損はない。ただし、最後の-->を書き忘れたりすると、ここから後ろのHTML、記事部分が全部がコメント扱いになってしまい、ブログがほとんど表示されなくなってしまうので注意。
e = Math.floor(Math.random() * 6)
赤い数字はランダム表示に使用する画像の枚数。10枚だったら「10」と記入。桁数が変わっても頭に0とか付けないで、そのままの数字。
Math.random()で0より大きくて1より小さい乱数を発生させて、赤字部分の数字と掛け合わせ、Math.floorで小数点以下を切り捨て、eは0を含めた画像の枚数分の整数になると言う仕組み。出てくる数字は、例えば5枚だったら0~4のいずれか、10枚だったら0~9のいずれかになる。
この意味が解らなかったら、「赤の部分に自分の使う画像の枚数を入れれば良いのだな」と言うことだけ理解しておけば大丈夫。
document.write('<style>')
document.write('■')と記述すると、■の部分をHTML内に出力すると言う仕組みで、ここからhead内にスタイルシートを書き始めますよってことになる。
if (e == 0) {document.write('#banner{background-image:url(●●●●);}')
}
この部分でヘッダーの背景画像をスタイルシートとして書き出す。
詳しく書き始めるとまた長くなるので若干省略するけど、てぃーだブログのスタイルシートは外部の別ファイルを読み込むようになっている。その「外部ファイル」と、この「ヘッダー内」に重複する内容のものがあると、こっちの方が優先される。
なので、同じbannerの背景画像を指定しているスタイルシートだが、こちらが優先されて表示される。
ここで、もしeが0だったら、実行結果としてdocument.write('●')の●の部分をそのままHTML内に出力するので、ヘッダーの背景画像はここに書いたものになりますよって意味。
青い●●●●の部分にはアップロードしたヘッダー用の画像のURL。
管理画面の左上にある画像一覧からヘッダーの画像をアップロード。この時に「リサイズ」ではなくて、「オリジナルサイズ」の方にチェックを入れておく。アップした画像のサムネイルをクリックして画像を単独で表示し、そのURLをコピーして●●●●の部分に貼付け。前の方は省略することもできるけど、省略しないでhttp://から全部書いた方が安全。
eが0でなかった場合には、ここでは何も処理されずに次に移る。
else if (e == X) {document.write('#header{background-image:url(●●●●);}')
}
次からは、前にelseが増えて、Xの部分の数字を順に増やしながら「画像の枚数-2」まで違う画像のURLを記入していく。
0の時はif (e == 0)で「もしeが0だったら、この行を記述する」と言う意味になり、else if (e == X) からは「もしくは、もしeがXだったら、この行を記述」と言う意味になる。
これで、上で生成された乱数eに応じた背景画像がスタイルシートとしてheadの中に記述される。
else {
document.write('#header{background-image:url(●●●●);}')
}
最後のひとつはif (e == X) の部分を取ってこのように記入。
例えば10枚の画像で、10番目の画像を表示しようとしたら「もし0だったらこの画像を表示」「もしくは、もし1だったらこの画像を表示」「もしくは、もし2だったらこの画像を表示」とやってきて、最後に「もしくは、この画像を表示」とする。
最後の1枚にも番号を振っても良いのだけど、画像が10枚なのに(Math.random() * 12)とか枚数を間違えたりしたら、11番目と12番目の画像を表示しようとした場合は画像がなくて表示されないことになる。最後に番号を振らなければ、9番目までの画像でなければ、10番目の画像と言うことになるので、11番目と12番目がなくても、とりあえず10番目の画像を表示することになるので、こうしておいた方がより安全かと。
画像の枚数よりもelse if (e == X)の数字が少なくて終わっているのは、例えば画像が5枚だと、0~3までの4枚は連番で画像を振り、5枚目はそうでなかった場合は5枚目を表示と言うことになるから。
とにかく、用意した画像のURLがすべて●●●●の部分に1回ずつ書いてあれば良い訳だ。
document.write('</style>')
};
-->
</SCRIPT>
残るこの部分は、「スタイルシートはここまでで終了」「コメント部分の終了」「JavaScriptの終了」で、ちゃんとすべての処理を終了してあげる。
カッコの形が何種類もでてきたり、画像のURLを何度もコピーしたりしないといけないけど、このままやればできる。
それから、設置の仕方は合っていても、閲覧者側の設定などで、このランダム表示が動かなかった場合のことを考えて、テンプレートのカスタマイズから、スタイルシートのheadの背景画像を変えておくと良いかも。ランダム表示にはならないけど、1枚だけオリジナルのヘッダー画像は見てもらえる。
#banner,#subbanner{
background:#D20900 url(●●●●);
padding:0px 10px 10px 10px;
height: 180px;}
この部分で、●●●●にアップロードした画像のアドレスのうちの1枚を記述。
また、ここでは背景画像の高さとbanner部分の高さを合わせるために、height:180px;と言う記述を入れてある。
それからもうひとつ、ブログのタイトルとその下にある説明文はその周囲のスタイルシートをいじって、場所と色を変えてあげると見やすくなるかも。
とまあ、そんなところで。
また、よろしく。
また何か更新するかもしれません、その時はよろしくです。