livedoor Blog用テンプレート配布第6弾「4seasons」です！
今回はJavaScriptを使ってページを読み込む時にトップ画像をランダムに変更させるデザインです。
トップ画像メインなので記事表示部はモノクロで地味な感じになっています。
どのように表示されるかは上の画像をクリックしてみてください。
ライブドアの共有デザインテンプレート機能にも対応いたしました。いちいちダウンロードせずに簡単に設定できますし、ページナビゲーションやタグ機能などにも対応しておりますのでよろしければどうぞ。
共有デザイン詳細 / 4seasons
画像を切り替えるにはCSSファイルだけでなく、各種HTMLテンプレートを編集しないといけません。
HTMLテンプレートの編集。
CSSファイル適用後、HTMLテンプレートの編集画面を開きます。
それぞれテンプレートの上のほうにある
<title><$BlogTitle ESCAPE$></title>
</head><title><$BlogTitle ESCAPE$></title>
<script type="text/javascript">
<!--
photo = new Array();
//画像の指定。ランダムに表示したい数だけ増やす。photo[photo.length] = '画像URI';
photo[photo.length] = 'http://rosea.jpn.org/css/4seasons/spring.jpg'; //春
photo[photo.length] = 'http://rosea.jpn.org/css/4seasons/summer.jpg'; //夏
photo[photo.length] = 'http://rosea.jpn.org/css/4seasons/autumn.jpg'; //秋
photo[photo.length] = 'http://rosea.jpn.org/css/4seasons/winter.jpg'; //冬
r = Math.floor(Math.random()*photo.length);
document.write('<style type="text/css">');
document.write('#banner,#subbanner{background: url("'+photo[r]+'") no-repeat;}');
document.write('<\/style>');
//-->
</script>
</head>このように赤字部分をコピーし貼り付けて追加し、それぞれ保存します。(青字部分はあっても無くてもOK)
※個別記事ページに貼り付ける時は注意してください。
最後に全てのページで再構築を行なって確認してみてください。
(リロードして画像が切り替われば成功！)
このテンプレートの使用上の注意。
ブラウザの設定でJavaScriptを切っている方は画像が切り替わりません。
そのため一応CSSファイルの方にも画像(夏)を指定してあります。#banner,#subbannerを参照。
トップ画像のサイズは横800px、縦350pxです。
トップ画像以外はご自由にしてくださって構いませんが、このテンプレートに限りトップ画像のみ2次加工厳禁です！
オススメカスタマイズ。
新たに画像(横800x縦350)を用意して、切り替える画像URLを変えるもしくは追加してみてください。
上記とは違うサイズの画像を使用するときはCSSファイルの#banner,#subbannerや.blogtitleを適宜調節してください。
※使用する画像サイズはそろえたほうがいいです。
たくさん写真を撮っている方にオススメかも。
というか私の写真適当なのえらんでるので出来るだけ差し替えた方がいいです。(汗)
基本的にはCSSファイルを適用するだけでデザインが反映されるようにしてありますが、別途カスタムHTMLテンプレートも用意してありますので、ダウンロードしてそれぞれのHTMLテンプレートを更新してご利用ください。
使用方法などは「テンプレートのご利用に関して」の4番の項目に記述していますのでご使用になる方はご覧下さい。
できるかぎりの動作確認はしていますが、不具合などがありましたら遠慮なくご指摘くださいませ。
また、このテンプレートに関する質問などもこちらで受け付けております。
DOWNLOAD
ご利用のになる方は必ず「テンプレートのご利用に関して」をお読みになってください。
- CSSファイル
- CSSファイル(Shift-JIS版)
- カスタムHTMLテンプレート/HTML4.01 Transitional
- カスタムHTMLテンプレート/HTML4.01 Transitional(Shift-JIS版)
※文字化けしたり、表示がおかしい方はShift-JIS版を使ってみてください。
※ブラウザで表示されてしまう時は、右クリックして「対象をファイルに保存(A)...」で保存してください。
ご使用になった際にはコメントやトラックバックなどでご報告して頂けるととても喜びます。 またリンクしていただけるとさらに喜びますです。
![cie.buena.suerte[at]gmail.com](http://rosea.jpn.org/gmail.png "cie.buena.suerte[at]gmail.com"){kind=small}
ちび Says...
#1 at February 07, 2005 21:30