CALENDAR
S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< December 2017 >>
ARCHIVES
CATEGORIES
RECOMMEND
FROM ME TO YOU
FROM ME TO YOU (JUGEMレビュー »)
YUI,yukamatsumoto,Hideyuki“Daichi”Suzuki,Ikoman,northa+,COZZi
RECOMMEND
<< 年賀状の季節 | main | いつの間に? >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
Template seis '4seasons'
4seasonslivedoor Blog用テンプレート配布第6弾「4seasons」です!



今回はJavaScriptを使ってページを読み込む時にトップ画像をランダムに変更させるデザインです。

トップ画像メイン(というかスクリプトがメイン?)なので記事表示部はモノクロで地味な感じになっています。

※あまり圧縮していない写真なので重めです。




どのように表示されるかは上の画像をクリックしていただくか

ページ右上にあるセレクトメニューから「4seasons」を選択して確認してみてください。

また代替スタイルシートに対応したブラウザの「表示」メニューからも選択できます。

※ブラウジング環境によっては切り替えることが出来ません。

※HTMLを変更していないためここでは「夏」の画像しか表示されません。


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



HTMLテンプレートの編集。

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

それぞれテンプレートの上のほうにある

<title><$BlogTitle ESCAPE$></title>

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

<title><$BlogTitle ESCAPE$></title>

<script language="JavaScript">

<!--

photo = new Array();



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

photo[0] = 'http://rosea.jpn.org/css/4seasons/spring.jpg'; //春

photo[1] = 'http://rosea.jpn.org/css/4seasons/summer.jpg'; //夏

photo[2] = 'http://rosea.jpn.org/css/4seasons/autumn.jpg'; //秋

photo[3] = '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を適宜調節してください。

※使用する画像サイズはそろえたほうがいいです。

たくさん写真を撮っている方にオススメかも。



というか私の写真適当なのえらんでるので出来るだけ差し替えた方がいいです。(汗)




私のブログと同じように表示させるには別途カスタムHTMLテンプレートをダウンロードし、それぞれのHTMLテンプレートを更新していただかなくてはなりません。

使用方法などは「テンプレートのご利用に関して」の4番の項目に記述していますのでご使用になる方はご覧下さい。




できるかぎりの動作確認はしていますが、不具合などがありましたら遠慮なくご指摘くださいませ。

また、このテンプレートに関する質問などもこちらで受け付けております。





DOWNLOAD

ご利用のになる方は必ず「テンプレートのご利用に関して」をお読みになってください。



CSSファイル

CSSファイル(Shift-JIS版)



カスタムHTMLテンプレート/HTML4.01 Transitional

カスタムHTMLテンプレート/HTML4.01 Transitional(Shift-JIS版)



※文字化けしたり、表示がおかしい方はShift-JIS版を使ってみてください。

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



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

またリンクしていただけるとさらにさらに嬉しいです。



livedoor Blog Templaters


| Template | 22:45 | comments(39) | trackbacks(0) |
スポンサーサイト
| - | 22:45 | - | - |
コメント
ありがとうございました。

うまくいきました( ̄ε ̄@)ぶっちゅ〜
| もえっぴ | 2006/02/20 10:15 AM |
もえっぴさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

> サイドバーがずれてしまうのはどうしてでしょうか?
プラグインの位置をBではなくすべてAにしてみてください。
| cie | 2006/02/18 11:54 PM |
サイドバーがずれてしまうのはどうしてでしょうか?
| もえっぴ | 2006/02/18 11:26 PM |
cieさん、お返事ありがとうございます^^
さっそく試してみたら、できましたー♪
50%だと今度は文字より下になっちゃったので
35%にしてみたらちょうどよかったです。
助かりました。どうもありがとうございました!
| sayumi | 2006/02/09 3:53 PM |
sayumiさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

.title{ }の中にある
padding-top:3px;
を削除するか3pxを0pxにすると少しましにはなるかと思います。

それでもまだ真横に来ない場合は
おなじ .title{ }のなかにある
background:省略;
の所を
background:省略 0 50%;
というように追記すると良いかもしれません。
| cie | 2006/02/09 12:45 AM |
初めまして^^
けっこう前に一目ぼれして借りたのですが挨拶が遅れてすみません。
とっても気に入っています♪♪
ちょっと質問なんですが、記事タイトルやプライグインのアイコンを
自分で変えてはみたものの、文字の真横に来ないんです。
どこかをいじればいいんでしょうが、それがどーにもわからなくて;
お手数ですが教えていただけますか?
すみません。
| sayumi | 2006/02/08 6:32 PM |
NOAHさんはじめまして。
テンプレートをご利用くださりありがとう御座います。[ぽっ]

反応が遅くてすみません。
| cie | 2006/02/02 9:23 PM |
はじめまして。素晴らしいブログテンプレート、使わせていただきました。
ちょっぴり自分でも手を加えましたが、そのままの方が良かったかも(笑)

こうしたサイトのお陰で楽しくブログを続けられます。本当にありがとうございました。
| NOAH | 2006/01/28 8:17 PM |
リプライありがとうございます!
自分でよくよく考えれば解決できるような質問でしたね…
すみません。
そんな質問にも丁寧に答えて下さってありがとうございます。
お陰で無事調節できました!
テンプレート、使ってみてもすごくいいです。
| Maki | 2005/11/23 10:10 PM |
Makiさんはじめましてこんにちは。[くるっ]
テンプレートのご利用ありがとうございます。

> 文字フォント設定ってどうにかすれば変えられるんですかね?
文字サイズを変えるなら
CSS中にあるサイズを変えたい部分(大体説明書きしてます)に(記事本文部なら.main{ })
font-size:**;
という記述がございますのでそこのサイズを変えてCSSを再構築して下さい。(x-small→smallなど)

字体を変更するには body{ }の中にある
font-family:Verdana, Osaka, sans-serif;
というところにお好きなフォント名を入れてCSSを再構築してもらえれば変わります。

どのような大きさ、フォント名が良いのかわかりませんので、あとは「CSS フォント」などの検索語で検索してすると詳しいサイトが出てきますのでそちらを参照してください。
| cie | 2005/11/20 11:23 AM |
こんにちは。
こちらのテンプレート、使わせて頂きました!
シンプルで、でも写真のパートでオリジナリティが出せて素晴らしいです。
ありがとうございます。

説明を読みながら写真は変えたのですが、これ、文字フォント設定ってどうにかすれば変えられるんですかね?
サイズとか字体を少し変えたいのですが、できるのでしょうか?
すごく初歩的な質問だったらごめんなさい…

| Maki | 2005/11/18 4:12 AM |
こんにちは。
初めてblog作成に挑戦したのですが、気に入ったデザインがなく、しょぼんとしていたのですが、このテンプレートを知って、「作ろう!」という気になりました!!
そして完成しました!
是非見にきてください。まだひとつもコメント・トラックバックないので[泣]
工夫したところは上の画像の右に白い1ピクセルの線が入ってしまうようなので、それを逆手にとって、上と左に白い1ピクセルの線をいれた写真を貼りました。
| sowhat | 2005/11/06 2:51 PM |
なおさんこんにちは。
またまたご利用くださりありがとうございます。
カスタマイズガンバッテクダサイネ。[たもさん]
| cie | 2005/11/01 10:14 AM |
こんにちは。
またテンプレートお借りしております。
cieさんのテンプレート、
色やデザインが好みのものが多くて、
いろいろ使ってみたくてとっかえひっかえしてます。

写真をたくさん表示したいなと、
カスタマイズしてみたいなあと思ってます。
ありがとうございました!
| なお | 2005/10/31 4:49 PM |
どうも。
はじめまして。


こちらのテンプレご使用させていただきました。
今までは結構装飾の凝った?テンプレを使用していましたがこちらのシンプルさに奥深さを感じて拝借いたしました。

| 麦茶 | 2005/08/06 10:08 PM |
cieさま、レスありがとうございました!
初歩的な質問で本当にすみません…
早速設定変更いたしました。

これからも末永く使っていきたいと思います。[ぽっ]
素敵なテンプレート、また作ってくださいね!
| caz | 2005/08/01 7:53 PM |
cazさんはじめまして。
テンプレートをご利用くださりありがとうございます。[にこっ]

> 投稿すると記事が1件ずつしか(トップページに)表示されないことがあり
これは管理画面のBlogの設定の「トップページへの表示形式」を最新「@@日」ではなく「@@件」にすると
ブログに投稿する間隔が開いても記事が表示されたままになりますよ。[はれ]
| cie | 2005/08/01 12:40 AM |
はじめまして。
こちらのテンプレートに一目ぼれして使わせていただいています。
私のカスタマイズか設定が悪いのか?投稿すると記事が1件ずつしか(トップページに)表示されないことがあり、カスタマイズはまだまだ勉強しなければ・・・と思う今日このごろですが、素敵なテンプレートを台無しにしないように頑張りたいと思います。

またお邪魔させていただきます!
| caz | 2005/07/31 7:05 PM |
graveurさん、はじめましてこんばんは。[くるっ]
テンプレートをご利用くださりありがとうございます。[にこっ]
| cie | 2005/07/24 9:57 PM |
こんにちは、初めまして。
テンプレート、使わせていただきます。

かっこいいテンプレート、ありがとうございます!
| graveur | 2005/07/24 3:17 PM |
わー、お返事ありがとうございます^-^
そして、テンプレートのサイトも教えてくださってありがとうございました。
早速行ってみました。
みなさんたくさんのテンプレートを作っていらして、びっくり。
今まで自分で加工して作っていた自分が馬鹿らしくなってきました・・・。


でも、中でも、管理人さんのこのテンプレートがやっぱりお気に入りです[らぶ]
| たね | 2005/07/10 1:26 PM |
たねさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

テンプレート作者同盟のlivedoor Blog Templatersにはもっとたくさんの作品が揃っていますので覗いてみてくださいね。[きゃー]
http://ldbt.info-box.net/
| cie | 2005/07/10 12:58 PM |
はじめまして!
テンプレートお借りしました。
ここにはたくさんのテンプレートが揃っていてびっくり。

ありがとうございました。
| たね | 2005/07/10 12:02 PM |
まだ名無しさんこんにちは。
テンプレートのご利用ありがとうございます。[にこっ]

差し替えていただいてまったく構いませんのでどうぞどうぞー。[おんぷ]
| cie | 2005/05/29 2:27 PM |
テンプレートお借りしました。
ありがとうございました。
・・・と言っても、まだエントリー上げてないし、
タイトルやHNも決めかねている段階ですが^^;

写真も素敵ですね♪
しかしながら、後々はお気に入りの画像を差し替えさせていただくつもりです。
よろしくお願いします。

今後も素敵なテンプレ、楽しみにしております。
では。
| まだ名無し | 2005/05/29 11:48 AM |
aiさんこんにちは。またまたご利用ありがとうございます。[にこっ]
アンパンマンはいつになっても子供のアイドル(?)なんですねー。[ひよこ]
| cie | 2005/05/26 5:21 PM |
こんにちは。

前にも違うテンプレートをお借りしましたが、今度はこちらを使わせていただいています。

シンプルで、いい感じにできました。
ありがとうございます!

PS;もう一つ持っているブログで、“dressy”もお借りしています[きらきら]
| ai | 2005/05/26 12:28 PM |
わらわさんはじめまして。テンプレートのご利用ありがとうございます。[にこっ]
ゆきちゃんラブリーですねー。特に後姿(おしり)が[ぽっ]
私のほうこそたまにお邪魔させてもらうかもしれません。[きゃー]
| cie | 2005/05/24 1:20 AM |
初めまして!わらわと申します。
この度テンプレートをお借りしました!!
ありがとうございます[にこっ]
すごくお気に入りです♪
今まで気付かなかったのがすごく悔しいです。
他のテンプレートも素敵なので、是非使わせて下さい!
これからもお邪魔させてください[笑]
| わらわ | 2005/05/23 9:08 PM |
kenkobさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

カスタマイズは気にせずドンドンして下さい。返信遅れてゴメンなさいでした。[汗2]
| cie | 2005/05/08 11:41 PM |
始めまして。
テンプレートをお借りしました。
ただ写真を始め、結構かえてしまいましたが...
本当にありがとうございます!
| kenkob | 2005/05/03 9:12 PM |
ジャネコさんはじめまして。
テンプレートのご利用ありがとうございます。

今月に入って画像ファイルを置いている場所が変更されたようで、
PCやブラウザの環境によってCSSファイルで指定している画像が表示されないことがございます。
http://blog.livedoor.jp/cie/archives/15414229.html
こちらの記事を参考に画像URLの変更をお勧めいたします。

お手数をおかけしますがよろしくお願いいたします。
| cie | 2005/03/03 8:22 PM |
はじめまして。テンプレをお借りしました。
自分のblogを開くのが楽しくなりそうです。
画像もとてもキレイです!ありがとうございました。
新作にも期待しております[にこっ]
| ジャネ子 | 2005/03/03 3:36 PM |
clariceさんはじめまして。
テンプレートのご利用ありがとうございます。

ワンちゃんかわいいですね。大切にしてあげてくださいね。
| cie | 2005/03/03 1:28 AM |
ハジメマシテ!
テンプレート拝借致しました。
これから写真を変えたり、いろいろ楽しみながら手を加えていこうと思います。
どうもありがとうございました![きらきら]
| clarice | 2005/03/02 11:32 PM |
quriさんこんばんは。

ブリーフケースから画像を持ってきて、ブログの管理画面から「ファイルのアップロード」でその画像をアップロード。
それからそれぞれの画像のURLをファイルタイトルのリンク先からコピーして
テンプレートの中のブリーフケースのURLと変えてみるのはどうでしょう?
これなら問題なく表示されると思いますよ。[にこっ]
| cie | 2005/02/26 1:57 AM |
先日テンプレートお借りしましたquriと申します[にこっ]
’←これが二重になってたのは直してみたのですが、ランダムに表示はやっぱりブリーフケースからでは無理なのかな・・・。とゆう感じです[汗2]

CSS?のほうのヘッダーの画像のアドレスを変えたら、ひとつだけならブリーフケースからの直リンクでもいけたのですが、やはりランダムはできなくって・・・

んー残念[しゅん]

もしよかったら、またアドバイスいただけるとありがたいです[きゃー]何もわからなくてすみません[汗]


| quri | 2005/02/25 7:06 PM |
ちびさんはじめまして。
テンプレートのご利用ありがとうございます。[にこっ]

ご連絡いただけるだけで嬉しいので遅くなっても全然大丈夫ですよー。
ぉ、3カラムにされていますね。いい感じです。[おんぷ]
| cie | 2005/02/07 10:13 PM |
こちらのテンプレートをお借りしました。
報告が遅くなってすいません(>_<)
とてもきれいでお気に入りです♪ありがとうございましたm(_ _)m
| ちび | 2005/02/07 9:30 PM |
コメントする









この記事のトラックバックURL
http://buena-suerte.jugem.jp/trackback/611
トラックバック