buena suerte!@FC2BLOG

トップ画像がメインになるテンプレートですので記事部は地味に作りました。
javascriptを使ってページを読み込むごとにトップ画像を切り替える事ができます。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

プレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートの使用上の注意

ブラウザの設定でJavaScriptを切っている場合は画像が切り替わりません。
そのため一応CSSにも画像(夏)を指定してあります。#bannerを参照。

トップ画像のサイズは横800px、縦350pxです。
※このテンプレートに限りトップ画像のみ2次加工厳禁です！
トップ画像以外はご自由にしてくださって構いません。

Safariでテンプレートを編集すると表示が変になってしまうようなので注意してください。
HTMLテンプレートの画像切り替えスクリプト部の

 document.write('<\/style>');

この\(macだとバックスラッシュ)マークが影響して起こる問題らしいです。

オススメカスタマイズ

新たに画像(横800x縦350)を用意して、切り替える画像URLを差し替えるもしくは追加してみてください。
というか適当に選んだ画像なので差し替え推奨です。(汗)

差し替え方法はHTMLテンプレートの</head>タグの上に

<script language="JavaScript">
<!--
 photo = new Array();

 //画像の指定。ランダムに表示したい数だけ増やす。photo[連番] = '画像URL';
 photo[0] = '画像のURL';
 photo[1] = '画像のURL';
 photo[2] = '画像のURL';
 photo[3] = '画像のURL';

 r = Math.floor(Math.random()*photo.length);
 document.write('<style type="text/css">');
 document.write('#banner{background: url("'+photo[r]+'") no-repeat;}');
 document.write('<\/style>');
// -->
</script>
</head>

という記述がございますので
赤文字部分に差し替える画像のURLを入力してください。
※画像を差し替える場合はCSSの#bannerに指定している背景画像も変更してください。

また切り替える画像を増減させることが出来ます。
増やす場合は上の引用に青字で書かれているように

 photo[3] = '画像のURL';
 photo[4] = '画像のURL';
 photo[5] = '画像のURL';

という風に追記すればできますし、逆に数字の大きいほうから削除すれば少なくすることも出来ます。

800x350だと比較的大きな縦幅なのでもう少し縦幅が小さい(800x200とか)画像を使用してもいいとおもいます。
※その際にはCSSの#bannerや.blogtitleを適宜調節してください。
※切り替えに使用する画像サイズは必ず揃えてください。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

スポンサーサイト