2006年03月15日

4seasons

4seasons thumbs

JavaScriptを使ってページを読み込む度にトップ画像をランダムに変更させるデザインです。
記事表示部は地味な感じになっています。
livedoor Blogですでに配布しているものをSeesaa用に移植してみました。


どのように表示されるかは上のプレビュー画像をクリックしていただくか
画面右上にあるセレクトボックスから「4seasons」を選択して確認してみてください。
また代替スタイルシートに対応したブラウザの「表示」メニューからも選択できます。
※ブラウジング環境によっては切り替えることが出来ません。


HTMLテンプレートの編集。

このテンプレートで画像を切り替えるにはCSSファイルだけでなく、HTMLテンプレートを編集しないといけません。


CSSファイル適用後、HTMLテンプレートの編集画面を開きます。
テンプレートの上のほうにある

<% /if -%>
</head>

ここの<% /if -%>と</head>の間に(HEADタグ内だったらどこでもよさそうだけど・・・)


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


//画像の指定。ランダムに表示したい数だけ増やす。photo[連番] = '画像URL';
photo[0] = 'http://buena-suerte.up.seesaa.net/tmp/4seasons_spring.jpg'; //春
photo[1] = 'http://buena-suerte.up.seesaa.net/tmp/4seasons_summer.jpg'; //夏
photo[2] = 'http://buena-suerte.up.seesaa.net/tmp/4seasons_autumn.jpg'; //秋
photo[3] = 'http://buena-suerte.up.seesaa.net/tmp/4seasons_winter.jpg'; //冬


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>

このように赤字部分をコピーし貼り付けて追加し、それぞれ保存します。(青字部分はあっても無くてもOK)
最後にすべてで再構築を行なって確認してみてください。
(リロードして画像が切り替われば成功!)


ご利用に当たっての注意。

ブラウザの設定でJavaScriptを切っている方は画像が切り替わりません。
このテンプレートに限りトップ画像のみ2次加工厳禁です!
トップ画像以外はご自由にしてくださって構いません。


デフォルトのHTMLテンプレートに合わせて作成していますので、デザインからテンプレートを追加し、CSSの編集からダウンロードしたCSSファイルを適用させてください。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログ、過度なアフィリエイトを行なうブログでのご使用はお控えくださいますようお願いいたします。


※必ずサイドメニューのコンテンツは左右どちら側でも構いませんので一方に寄せて使用してください。


このテンプレートに関しまして何か質問や不具合、問題などがあればこちらにコメントしてください。
出来る限り迅速に対応させて頂くつもりにしていますが、何分複数掛け持ちしておりますので対応が遅れてしまうかもしれません。
また、Seesaaブログの知識(特に独自タグ関連)は今のところ殆ど持ち合わせていませんので、対応が難しいかもしれません。
予めご了承の上でのご利用をよろしくお願い致します。


カスタマイズや加工について。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ですが加工したものを含む画像の再配布は一切禁止とさせていただきます。


オススメカスタマイズ。

新たに画像(横800x縦350)を用意して、切り替える画像URLを変えるもしくは追加してみてください。
上記とは違うサイズの画像を使用するときはCSSの#bannerや.blogtitleを適宜調節してください。
※使用する画像サイズは出来る限りそろえたほうがキレイに見えます。


制作環境。

OS:WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ:InternetExplorer6、Firefox1.5.0.1、Opera8.53、Netscape8.1
IE使用時の文字サイズ:中


Download

CSSファイル
※ブラウザで表示されてしまう時は、右クリックして「対象をファイルに保存(A)...」で保存してください。


ご使用になった際にはコメントやトラックバックなどでご報告して頂けると嬉しいです。

posted by cie at 23:11  | Comment(11)  | TrackBack(0)  | Template
この記事へのコメント
頑張って画像変更できるブログに出来るように…
大事にお借りしていきます!
人´∀`).☆.。.:*ありがとぅござぃます♪
とってもとてもステキです
Posted by なつ at 2007年01月08日 15:32
なつさんはじめまして。
テンプレートのご利用報告ありがとうございます。[にこっ]
Posted by cie at 2007年01月10日 11:36
cieさんのお返事がっ![きゃー]
ありがとうござぃます、何か見てもらったんだな、って思うと嬉しくなりますね…w
…実はやっとこ何とか変更できたんですが、レイアウトが崩れてしまって泣きそう[泣]になっております…
ページの一番下にSeesaaと表示される部分、多分フッターって呼ぶんでしょうか…そこが何故か右のコンテンツの下に飛んでいってしまいました
何のタイミングでそぅなってしまったのか…
全然頭がおいつきません
ここを見直してみたら?ってところがありましたら、是非お力添えお願いできないでしょうか。
きっととってもお忙しいと思いますので、お暇があったら…お願いしますです。
それと、も1つ…
コメント部分の文字をもちょっと小さくしたぃな、ってのと、フォントを変えたいな、とかって欲張って考えているのですが、どこを変更したらいいのか…
良かったらお返事お願いしますっ![ぽっ]
Posted by なつ at 2007年01月10日 17:50
大体はコメント全部読んでますよ。[にこっ] ただ時間に余裕がないときは返信が遅れてしまうことが良くあります。

> レイアウトが崩れしまって
これはサイドバーの"感想ありがd"の下の<div class="side">下のdivタグ(<div style="overflow:auto;height:200px;">)が閉じられていないからだと思います。
コメントの一覧の終わりに</div>を追加してあげると良いですね。
※上に書いた<>は全て半角です。

> コメント部分の文字をもちょっと小さくしたぃってのと、フォントを変えたい
管理画面のデザイン→スタイルシートというようにアクセスしてスタイルシートを編集します。

.comments-body .text{ }の中に
font-size:0.75em;
という記述がありますので、ここの数値を小さく(0.6emとか)するとコメント本文の文字が小さくなります。

コメント本文のフォントを変えるにはおなじ .comments-body .text{ }の中に
font-family: 'フォント名';
を追加してあげると良いと思います。
フォント名の所は適宜選んでくださいね。
※閲覧されている側に指定したフォントがインストールされていないとうまく表示されないので注意してください。[ちゅうい]

ちょっと難しいかもしれないですけど頑張ってください。[さむあっぷ]
わからないことがあればまた質問どうぞです。
Posted by cie at 2007年01月11日 13:15
ありがとうござぃますっ!
早速修正してみます[きゃー]

そして不思議なことがまた追加されてしまぃました…
[泣]教えてやってくださぃ

絵文字って言うのかな?
アイコンって言うのか…わかんなぃんですが
それを使うと枠?みたぃなのがきっちり残ってしまぃます。
これを消す方法とかあるんでしょうか?
またお時間あるときにお返事よろしくお願いいたします。

さぁ[ちゅう]がんばるぞー!
Posted by なつ at 2007年01月12日 19:46
なつさんこんばんは。

絵文字の枠については、スタイルシートの
.blogbody .text img{
margin-right:5px;
margin-bottom:5px;
border:1px solid #888;
}
この部分を全部削除してもらえれば枠は消えます。
ただ、本文中の画像に枠がつくようにしてあるところなので、普通に画像を入れたときの枠も消えてしまいます。

#レイアウト大丈夫そうですね。[にこっ]
Posted by cie at 2007年01月13日 00:47
cieさん、毎日ありがとうございます[きゃー]
無事レイアウトも落ち着かせることが出来ました。
自分のブログへ飛ぶのが楽しく嬉しいです。
本当にありがとうございます[きらきら]
そして絵文字の枠の件ですが、ちょとご相談を…
枠の色を「白」にすることは可能なのでしょうか?
何故にそんなことを言い出すかといいますと…
cieさんの作ったのを消し去るのが何だかイヤだったり[ぽっ]
枠の色だけ白になんか出来ませんっ!
と言われたら消そうかなぁ〜と思っています[えんぴつ]
またまたお手数ですが、どうぞよろしくお願いします[笑]
Posted by なつ at 2007年01月13日 18:35
なつさんこんにちは。[にこっ]

絵文字の枠の色を変更するには、上に書いた .blogbody .text img{ }の中の
border:1px solid #888;
の所を
border:1px solid #fff;
と変えてあげればOKです。
Posted by cie at 2007年01月16日 08:47
はじめまして。

友人からブログカスタマイズを依頼され
困っていたところにコチラのテンプレートと出会いました。

シンプルで、画像がランダム表示されるところが
友人も大変気に入ったようです。

本当にありがとうございました。





Posted by nkn at 2007年06月19日 20:46
はじめまして。今まで気に入ったテンプレートがなくて、さんざん試行錯誤で自分で作ってみたりもしましたが・・・

こちらの4seasonに出会って、見違えるほど美しく仕上げることができて大変感謝してます。ありがとうございました。
Posted by クロ at 2010年01月14日 18:24
こちらのテンプレートを使わせていただきました
すごい、うつくしくまとめることができて、感謝しています
ありがとうございました
Posted by はいえもん at 2010年08月17日 12:46
コメントを書く








この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。