新テンプレート「Summer breeze」： Style book

<<新テンプレート「Olive」| Main | 新テンプレート「Floating」>>

2005-07-16

新テンプレート「Summer breeze」

シンプルで爽やかな印象のSeesaaブログ用テンプレートです。
右サイドバー用と左サイドバー用があります。
サンプルはこちら。

設定方法は
http://temp-css.seesaa.net/article/3663981.html
をご覧ください。

以下のテキストフィールドからコピペでご利用ください。

Summer breeze　(右サイドバー専用)
Summer breeze　(左サイドバー専用)
サイドバーの背景に画像を入れる

■Summer breeze　(右サイドバー専用)

@charset "Shift_JIS";

/*
サイドバーに背景画像を指定した時、文字が見えにくい場合は
以下の「／*-----」から「------*／」のコメントアウト部分を調整し、
コメント指定を削除してください
*/

/*-----
#links,#links-left,#calendar table {
color:black
}
#links a,#links-left a,#calendar table a{
color:#4682B4;
}
------*/

body {
font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; 
margin:0px;
padding:0px;
text-align:center;
background-color:white;
color:gray;
scrollbar-3dlight-color:silver;
scrollbar-darkshadow-color:silver;
scrollbar-arrow-color:darkred;
scrollbar-base-color:white;
scrollbar-face-color:white;
scrollbar-highlight-color:white;
scrollbar-shadow-color:white;
scrollbar-track-color:white;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px auto 0px auto;
padding:0px;
width:749px;
background-image:url(image/bb_l.jpg);
background-repeat:repeat-y;
background-position:top right;
}
a{
text-decoration:none;
color:#8FBC8B;
}
a:hover,a:active{
color:#78A;
}
#banner{
margin:0px;
padding:0px 0px 0px 30px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding:50px 5px 5px 5px;
font-size:200%;
font-weight:bold;
}
h2{
font-size:100%;
margin:0px;
margin-bottom:10px;
text-align:right;
padding-top:10px;
padding-right:10px;
}
h3 {
font-size:90%;
margin:0px;
background-image:url(image/bb_r_head.gif);
background-repeat:no-repeat;
background-position:bottom left;
height:50px;
padding-left:20px;
line-height:200%;
}
h3 a{
}
.description {
margin:0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:500px;
text-align:center;
margin:20px 0px 0px 0px;
}
.blog {
margin:0px;
text-align:left;
}
.blogbody {
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 25px 0px 25px;
letter-spacing:0.02em;
background-image:url(image/bb_r_body.gif);
background-repeat:repeat-y;
}
.posted{ 
font-size: 65%;
text-align:right;
padding:5px 20px 0px 0px;
height:30px;
background-image:url(image/bb_r_bottom.gif);
background-repeat:no-repeat;
background-position:top left;
}
#links,#links-left {
font-weight:normal;
width:244px;
margin:20px 0px 0px 0px;
padding:0px;
}
#links-left{
float:left;
padding-right:5px;
}
#links{
float:right;
}
#calendar {
margin:0px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:244px;height:140px;
text-align:center;
}
#calendar th{
font-size:70%;
font-weight:bold;
color:white;
background:#ABC;
}
#calendar td{
text-align:center;
font-size:70%;
border-bottom:silver 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 0px 8px 10px;
margin:0px;
text-align:left;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin-bottom:0px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side a{
border:transparent 1px none;
padding:1px;
margin:1px;
}
.side a:hover,.calendarday a:hover{
border:#F80 1px dotted;
padding:0px;
}
.input-submit, .side input, input,textarea{
border:silver 1px solid;
}
.input-submit{
margin:0px 2px;
background-color:#ABC;
background-image:url(image/bb_l.jpg);
background-repeat:no-repeat;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
}
#comments {
margin-top:25px;
margin-left:15px;
text-align:left;
}
#comments form{
padding-left:10px;
margin-top:5px;
}
#comments input{
max-width:250px;
}
textarea{
max-width:400px;
}
.comments-head{ 
margin:0px;
padding:0px 0px 10px 12px;
font-size:95%;
font-weight:bold;
}
.comments-body {
padding:5px 5px 0px 0px;
font-size:85%;
}
.comments-post{ 
font-size: 70%; 
padding:10px 10px 5px 0px;
text-align:right;
}
#trackback {
width:440px;
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px solid silver;
}
#trackback hr{
height:0px;
border:1px dotted silver;
}
#footer{
clear:both;
padding:20px 0px 5px 0px;
text-align:center;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
#diet-container{
    padding:5px;
}
.diet-title{
    padding:2px 10px 2px 5px;
    font-size:85%;
    color:#D77D62;
    width:90px;
    margin-top:5px;
}
.diet-content{
    padding-left:10px;font-size:85%;
}
#diet-foods{
    padding-left:10px;
    font-size:85%;
}
.food-title{
    width:20%;
    clear:left;
    float:left;
}
.food-content{
    width:75%;
    padding-top:10px;
}

このテンプレートは、専用の画像が3点あります。
下のリンク先の画像をローカルに保存してから、seesaaブログ管理画面の
ツール　->　ファイルマネージャ
でご自分のブログに全てアップロードしてください。
このテンプレートに使用されている画像を、Seesaaブログの背景画像として利用する以外の目的で転用・転載しないでください。
加工・再配布も禁じます。

●日付部分の背景画像

●記事背景

●記事フッタ背景

■Summer breeze　(左サイドバー専用)

@charset "Shift_JIS";

/*-----
#links,#links-left,#calendar table {
color:black
}
#links a,#links-left a,#calendar table a{
color:#4682B4;
}
------*/

body {
font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; 
margin:0px;
padding:0px;
text-align:center;
background-color:white;
color:gray;
scrollbar-3dlight-color:silver;
scrollbar-darkshadow-color:silver;
scrollbar-arrow-color:darkred;
scrollbar-base-color:white;
scrollbar-face-color:white;
scrollbar-highlight-color:white;
scrollbar-shadow-color:white;
scrollbar-track-color:white;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px auto 0px auto;
padding:0px;
width:749px;
background-image:url(image/bb_l.jpg);
background-repeat:repeat-y;
background-position:top left;
}
a{
text-decoration:none;
color:#8FBC8B;
}
a:hover,a:active{
color:#78A;
}
#banner{
margin:0px;
padding:0px 30px 0px 0px;
text-align:right;
line-height:125%;
}
h1 {
margin:0px;
padding:50px 5px 5px 5px;
font-size:200%;
font-weight:bold;
}
h2{
font-size:100%;
margin:0px;
margin-bottom:10px;
text-align:right;
padding-top:10px;
padding-right:10px;
}
h3 {
font-size:90%;
margin:0px;
background-image:url(image/bb_r_head.gif);
background-repeat:no-repeat;
background-position:bottom left;
height:50px;
padding-left:20px;
line-height:200%;
}
h3 a{
}
.description {
margin:0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:500px;
text-align:center;
margin:20px 0px 0px 0px;
}
.blog {
margin:0px;
text-align:left;
}
.blogbody {
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 25px 0px 25px;
letter-spacing:0.02em;
background-image:url(image/bb_r_body.gif);
background-repeat:repeat-y;
}
.posted{ 
font-size: 65%;
text-align:right;
padding:5px 20px 0px 0px;
height:30px;
background-image:url(image/bb_r_bottom.gif);
background-repeat:no-repeat;
background-position:top left;
}
#links,#links-left {
font-weight:normal;
width:244px;
margin:20px 0px 0px 0px;
padding:0px;
}
#links-left{
float:left;
padding-right:5px;
}
#links{
float:right;
}
#calendar {
margin:0px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:244px;height:140px;
text-align:center;
}
#calendar th{
font-size:70%;
font-weight:bold;
color:white;
background:#ABC;
}
#calendar td{
text-align:center;
font-size:70%;
border-bottom:silver 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 0px 8px 10px;
margin:0px;
text-align:left;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin-bottom:0px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side a{
border:transparent 1px none;
padding:1px;
margin:1px;
}
.side a:hover,.calendarday a:hover{
border:#F80 1px dotted;
padding:0px;
}
.input-submit, .side input, input,textarea{
border:silver 1px solid;
}
.input-submit{
margin:0px 2px;
background-color:#ABC;
background-image:url(image/bb_l.jpg);
background-repeat:no-repeat;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
}
#comments {
margin-top:25px;
margin-left:15px;
text-align:left;
}
#comments form{
padding-left:10px;
margin-top:5px;
}
#comments input{
max-width:250px;
}
textarea{
max-width:400px;
}
.comments-head{ 
margin:0px;
padding:0px 0px 10px 12px;
font-size:95%;
font-weight:bold;
}
.comments-body {
padding:5px 5px 0px 0px;
font-size:85%;
}
.comments-post{ 
font-size: 70%; 
padding:10px 10px 5px 0px;
text-align:right;
}
#trackback {
width:440px;
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px solid silver;
}
#trackback hr{
height:0px;
border:1px dotted silver;
}
#footer{
clear:both;
padding:20px 0px 5px 0px;
text-align:center;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
#diet-container{
    padding:5px;
}
.diet-title{
    padding:2px 10px 2px 5px;
    font-size:85%;
    color:#D77D62;
    width:90px;
    margin-top:5px;
}
.diet-content{
    padding-left:10px;font-size:85%;
}
#diet-foods{
    padding-left:10px;
    font-size:85%;
}
.food-title{
    width:20%;
    clear:left;
    float:left;
}
.food-content{
    width:75%;
    padding-top:10px;
}

●記事背景

●記事フッタ背景

■サイドバーの背景に画像を入れる

このテンプレートは、サイドバーの背景に画像を指定することができます。
画像が違うだけでもずいぶん印象が変わるので、着せ替えのようにして楽しむのもいいかもしれません。
実際の使用例を確認したい場合は、こちらのサンプルで、サイドバーの一番上にある「夕張メロン」とか書かれたプルダウンメニューから、いろいろと選んでみてください。
JAVAScriptが使える環境なら、サイドバーの背景がリアルタイムで変わります。

■サイドバー背景画像の指定方法

OSがWindowsの場合、お好みの画像を右クリックし、出てきたメニューから「画像を保存」を選択します。
保存ダイアログが出たら、ファイル名を「bb_l.jpg」にリネームして保存します。
または、保存後にファイル名を「bb_l.jpg」にリネームします。
その後、seesaaブログ管理画面の
ツール　->　ファイルマネージャ
でご自分のブログにアップロードしてください。

■サイドバー用背景画像

●夕張メロン

●ラズベリーブルー

●練乳いちご

●ハワイアンブルー

●レインボー

●ピーチタルト

●ストライプ(グレー

●ストライプ(グリーン

●ストライプ(ピンク

●ストライプ(ブルー

●rhombus(グリーン

●rhombus(ブルー

●rhombus(オレンジ

●rhombus(イエロー

posted by ８ at 03:02 | Comment(18) | TrackBack(1) | テンプレート

<<新テンプレート「Olive」| Main | 新テンプレート「Floating」>>

この記事へのコメント

初めまして。美都（みと）と申します。

こちらのテンプレートに一目惚れし、早速使わせていただきました。
現在はまだ調整中ですので、無事にリニューアルが整い次第、改めての報告と紹介記事を書かせていただきます。

しかし、どうしても記事の背景画像が表示されないのですよね・・・
（午前中のseesaaが軽い時間帯にまたいじってみようと思います）

それでは。

Posted by 美都 at 2005-07-18 21:50

連続投稿申し訳ありません。
私の手違いで、コメントを重複投稿してしまいました。

恐れ入りますが、どちらか一つを削除していただけますでしょうか。
よろしくお願いします。

Posted by 美都 at 2005-07-18 21:52

美都さんこんばんは、初めまして。
テンプレートをご活用いただけて嬉しいです。
記事の背景画像ですが、今拝見した限りでは画像自体が削除されているようなので、なにが原因なのかちょっと判断が付かないです…。

Posted by ８ at 2005-07-20 02:49

こんばんは。

まだ完全ではないのですが、リニューアルが終了いたしましたので再度の報告に参りました。

素敵なテンプレートをありがとうございました。
大切に使わせていただきます。

併せて、TBさせていただきました。

Posted by 美都 at 2005-07-20 19:48

美都さんこんばんは、温かいお言葉とご紹介、ありがとうございました。
ブログを拝見して気付いたのですが、問題の記事の背景画像、本体ではなくサムネイルのほうを使われていませんか？
サンプルのような配置にするには、「●日付部分の背景画像」などと書かれている直下の画像そのものではなく、その画像をクリックして出てくる新しいウィンドウ内の、大きめの画像をご利用いただければ大丈夫だと思います。
ガイドが分かりづらくてすみません。

でも、こんなレイアウトも素敵ですね。
携帯の写真と短文のみ公開するブログとかなら良さそうだなー、と、逆に勉強になりました。

Posted by ８ at 2005-07-23 02:40

はじめまして
CSSカスタムで検索して辿り着きました。
サイドバー用の画像を頂きました。
万が一不都合でしたらコメントいただければ直しますので宜敷くおねがいします。

これからも参考にさせて頂きますのでちょくちょく覗きに来ます。

Posted by けい at 2005-09-27 11:07

けいさんこんばんは、初めまして。
ご報告ありがとうございます。
気に入っていただけて嬉しいです。
画像に関しては、Seesaaブログの背景画像として利用する場合は、加工なしならOKです。

Posted by ８ at 2005-10-01 01:24

初めまして、ゆかりんと申します。「Ｒｉｎｇｏｓｔａｒ★」と「Ｓｕｍｍｅｒｂｒｅｅｚｅ」のテンプレに一目惚れしていただきました( ^∇^)　どちらも可愛いのでどれにするか迷いましたが、今回は「Ｓｕｍｍｅｒｂｒｅｅｚｅ」の左サイドバー専用・レインボーの配色で使ってみる事にしました♪　今度は、ひし形水色にも着せ替えて楽しんでみようと思ってます( ^∇^)
こちらのテンプレートはとても可愛くてお洒落なので、ついついいつも「新しいのが出てるかな～」と訪れています(^_^;
また訪れて、いただいていくと思いますので、その際はどうぞよろしくお願い致します(* ^ーﾟ)ﾉ
これからも、どんどん可愛いくてお洒落なテンプレが登場するのを楽しみにしています♪　

Posted by ゆかりん at 2005-10-23 16:34

ゆかりんさんこんばんは、初めまして。
ご報告ありがとうございます。
楽しみにしていただけているようで、大変嬉しいです。
こちらこそ、これからもよろしくお願いします。

Posted by ８ at 2005-10-30 02:01

初めまして。
素敵なテンプレートをお借りしました。
ありがとうございましたm(__)m

Posted by きりこ at 2005-11-05 20:05

きりこさんこんばんは、初めまして。
ご報告ありがとうございます。
お気に召していただけたようで嬉しいです。

Posted by ８ at 2005-11-09 03:08

はじめまして。
テンプレート、素敵だったので
お借りしました。
サイドバーの背景を適宜変えて
楽しみたいと思います。

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

Posted by YUI at 2005-11-16 22:20

YUIさんこんばんは、初めまして。
ご報告ありがとうございます。
ぜひいろいろ着せ替えて楽しんでくださいね！

Posted by ８ at 2005-12-06 02:20

はじめまして♪

テンプレートお借りしました。

久々で変え方とか分からなかったのですが、丁寧な説明も載ってて無事変更できました。

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

Posted by Rico at 2006-02-21 14:15

初めまして。

テンプレートをお借りしました。
Ajisaiも気に入って悩みましたが、もう少し季節が後かなと思い、こちらのデザインをお借りしました。

また、お借りしにきたいと思います。ありがとうございました。

Posted by hym at 2006-05-04 17:14

こんにちは！
こちらのテンプレートをお借りしました。
サイドバーの背景も変えて、楽しみたいと思います。

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

Posted by りょう at 2006-05-23 11:21

はじめまして。
こちらのテンプレートを使わせていただきました。
とてもかわいくて素敵です。
ありがとうございました。

Posted by さゆふう at 2006-08-02 23:51

はじめまして。
こちらの非常に素敵なテンプレートをお借りしました。

ありがとうございます。

Posted by も at 2009-09-29 01:52

コメントを書く

この記事へのTrackBack URL

リニューアル終了
Excerpt: 季節は真夏に近付きつつあります。私の住む地域でも連日猛暑が続き・・・・暑いです。まぁ、それとこれとはあまり関係ないのですが、当ブログのデザインも見た目涼しく大幅リニューアルしました。新テン..
Weblog: あんだんて
Tracked: 2005-07-20 19:37

<<新テンプレート「Olive」| Main | 新テンプレート「Floating」>>