Style book

<<2005年06月| Main |2005年08月>>

2005-07-29

新テンプレート「Floating」

サイドバーのみサイズ固定で、記事部分がどこまでもびよーんと伸びるテンプレートです。
右サイドバー専用、画像がいらないのでcssのみ書き換えでいけます。
CSS Generatorβにも追加してあります。
サンプルはこちら。

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

また、今回は色数が多いので、サンプルの表示に試験的にJAVAscriptによる切り替え方法を使っています。
右上にあるドロップダウンメニューを動かして、cssを切り替えてください。
動作確認はWindowsXPにてIE6、Netscape7.1、Firefox1.0で行っています。
手元のOperaではなんでか動かない…。

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

Floating -Black-　(右サイドバー専用)
Floating -Blue-　(右サイドバー専用)
Floating -Casino-　(右サイドバー専用)
Floating -Green-　(右サイドバー専用)
Floating -Maroon-　(右サイドバー専用)
Floating -Sky-　(右サイドバー専用)
Floating -Sumire-　(右サイドバー専用)

■Floating -Black-　(右サイドバー専用)

Floating -Black-　サンプル
※右上にあるドロップダウンメニューで「Black」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:black;
color:white;
scrollbar-3dlight-color:#445;
scrollbar-darkshadow-color:#445;
scrollbar-arrow-color:#AAA;
scrollbar-base-color:black;
scrollbar-face-color:black;
scrollbar-highlight-color:black;
scrollbar-shadow-color:black;
scrollbar-track-color:black;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:#AAA;
}
a:hover,a:active{
background:#AAA;
color:black;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:#445;
letter-spacing:0.3em;
color:black;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:#445 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:#445;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:#445 5px solid;
border-bottom:#445 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:#445;
color:#AAA;
}
#calendar td{
text-align:center;
font-size:70%;
border:#445 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:#445 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:black;
border:#445 2px solid;
}
.input-submit, .side input, input,textarea{
background:black;
color:white;
border:#445 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted #445;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Blue-　(右サイドバー専用)

Floating -Blue-　サンプル
※右上にあるドロップダウンメニューで「Blue」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:#191970;
color:white;
scrollbar-3dlight-color:#191970;
scrollbar-darkshadow-color:#191970;
scrollbar-arrow-color:ORANGE;
scrollbar-base-color:#191970;
scrollbar-face-color:#191970;
scrollbar-highlight-color:#191970;
scrollbar-shadow-color:#191970;
scrollbar-track-color:#191970;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:ORANGE;
}
a:hover,a:active{
background:ORANGE;
color:#191970;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:#4682B4;
letter-spacing:0.3em;
color:#191970;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:#191970 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:#191970;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:#191970 5px solid;
border-bottom:#191970 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:#191970;
color:ORANGE;
}
#calendar td{
text-align:center;
font-size:70%;
border:#191970 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:#191970 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:#191970;
border:#191970 2px solid;
}
.input-submit, .side input, input,textarea{
background:#FFF;
border:#191970 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted #191970;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Casino-　(右サイドバー専用)

Floating -Casino-　サンプル
※右上にあるドロップダウンメニューで「Casino」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:darkred;
color:white;
scrollbar-3dlight-color:black;
scrollbar-darkshadow-color:black;
scrollbar-arrow-color:gold;
scrollbar-base-color:darkred;
scrollbar-face-color:darkred;
scrollbar-highlight-color:darkred;
scrollbar-shadow-color:darkred;
scrollbar-track-color:darkred;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:gold;
}
a:hover,a:active{
background:gold;
color:darkred;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:#000;
letter-spacing:0.3em;
color:darkred;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:black 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:black;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:black 5px solid;
border-bottom:black 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:darkred;
color:yellow;
}
#calendar td{
text-align:center;
font-size:70%;
border:darkred 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:black 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:darkred;
border:black 2px solid;
}
.input-submit, .side input, input,textarea{
background:darkred;
color:white;
border:black 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted black;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Green-　(右サイドバー専用)

Floating -Green-　サンプル
※右上にあるドロップダウンメニューで「Green」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:#F5FFE6;
color:#80737F;
scrollbar-3dlight-color:#80737F;
scrollbar-darkshadow-color:#80737F;
scrollbar-arrow-color:#7A8073;
scrollbar-base-color:#F5FFE6;
scrollbar-face-color:#F5FFE6;
scrollbar-highlight-color:#F5FFE6;
scrollbar-shadow-color:#F5FFE6;
scrollbar-track-color:#F5FFE6;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:#7A8073;
}
a:hover,a:active{
background:#7A8073;
color:#F5FFE6;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:#80737F;
letter-spacing:0.3em;
color:#F5FFE6;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:#80737F 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:#D0D9C3;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:#80737F 5px solid;
border-bottom:#80737F 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:#80737F;
color:#F5FFE6;
}
#calendar td{
text-align:center;
font-size:70%;
border:#80737F 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:#80737F 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:#F5FFE6;
border:#80737F 2px solid;
}
.input-submit, .side input, input,textarea{
background:#F5FFE6;
color:#80737F;
border:#80737F 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted #80737F;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Maroon-　(右サイドバー専用)

Floating -Maroon-　サンプル
※右上にあるドロップダウンメニューで「Maroon」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:white;
color:black;
scrollbar-3dlight-color:maroon;
scrollbar-darkshadow-color:maroon;
scrollbar-arrow-color:maroon;
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;
}
a{
text-decoration:none;
color:maroon;
}
a:hover,a:active{
background:maroon;
color:white;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:maroon;
letter-spacing:0.3em;
color:white;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:maroon 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:wheat;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:maroon 5px solid;
border-bottom:maroon 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:wheat;
color:white;
}
#calendar td{
text-align:center;
font-size:70%;
border:wheat 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:maroon 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:white;
border:maroon 2px solid;
}
.input-submit, .side input, input,textarea{
background:white;
color:black;
border:maroon 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted maroon;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Sky-　(右サイドバー専用)

Floating -Sky-　サンプル
※右上にあるドロップダウンメニューで「Sky」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:#FFFFFA;
color:#708090;
scrollbar-3dlight-color:#B0E0E6;
scrollbar-darkshadow-color:#B0E0E6;
scrollbar-arrow-color:#5F9EA0;
scrollbar-base-color:#FFFFFA;
scrollbar-face-color:#FFFFFA;
scrollbar-highlight-color:#FFFFFA;
scrollbar-shadow-color:#FFFFFA;
scrollbar-track-color:#FFFFFA;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:#5F9EA0;
}
a:hover,a:active{
background:#5F9EA0;
color:#FFFFFA;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:#B0E0E6;
letter-spacing:0.3em;
color:#FFFFFA;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:#B0E0E6 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:#B0E0E6;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:#B0E0E6 5px solid;
border-bottom:#B0E0E6 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:#B0E0E6;
color:red;
}
#calendar td{
text-align:center;
font-size:70%;
border:#B0E0E6 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:#B0E0E6 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:#FFFFFA;
border:#B0E0E6 2px solid;
}
.input-submit, .side input, input,textarea{
background:#FFFFFA;
color:#708090;
border:#B0E0E6 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted #B0E0E6;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

■Floating -Sumire-　(右サイドバー専用)

Floating -Sumire-　サンプル
※右上にあるドロップダウンメニューで「Sumire」を選択してください

body {
font-family:Verdana,Osaka,sans-selif;
margin:0px;
padding:0px;
text-align:center;
background:ivory;
color:GRAY;
scrollbar-3dlight-color:plum;
scrollbar-darkshadow-color:plum;
scrollbar-arrow-color:plum;
scrollbar-base-color:ivory;
scrollbar-face-color:ivory;
scrollbar-highlight-color:ivory;
scrollbar-shadow-color:ivory;
scrollbar-track-color:ivory;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
}
a{
text-decoration:none;
color:plum;
}
a:hover,a:active{
background:plum;
color:ivory;
}
#banner{
height:100px;
margin-top:40px;
padding:0px 0px 0px 20px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:200%;
font-weight:bold;
}
h1 a{
text-decoration: none;
}
h2{
font-size:80%;
margin:0px;
margin-bottom:10px;
padding:5px 5px 5px 15px;
width:100%;
text-align:left;
background:plum;
letter-spacing:0.3em;
color:ivory;
}
h3 {
font-size:90%;
margin:0px;padding:0px;
margin-bottom:10px;
width:100%;
border-bottom:plum 1px dotted;
font-weight:bold;
text-align:left;
}
h3 a{
}
.description {
margin:0px 10px 10px 0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
margin:0px;
position:absolute;
left:0px;right:220px;
}
.blog {
margin:0px;
margin-left:10px;
text-align:left;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
margin-top:10px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 10px 0px 10px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px;
padding:5px;
}
#links {
width:220px;
padding-top:20px;
background:PAPAYAWHIP;
position:absolute;
right:0px;top:0px;
margin:0px 0px 0px 18px;
border-left:plum 5px solid;
border-bottom:plum 5px solid;
}
#calendar {
margin:0px 0px 0px 5px;
font-weight:normal;
text-align:center;
padding-bottom:15px;
}
#calendar table {
margin:0px;padding:0px;
width:200px;height:140px;
text-align:center;
border-collapse:collapse;
}
#calendar th{
font-size:70%;
font-weight:bold;
background:pink;
color:ivory;
}
#calendar td{
text-align:center;
font-size:70%;
border:pink 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
font-size:75%;
font-weight:bolder;
padding:9px 10px 8px 10px;
margin:0px;
text-align:right;
padding-bottom:5px;
border-bottom:plum 1px dotted;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:5px;
padding:10px 15px 10px 15px;
text-align:left;
}
.side,#calendar table{
background:ivory;
border:plum 2px solid;
}
.input-submit, .side input, input,textarea{
background:ivory;
color:GRAY;
border:plum 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
font-size:70%;
padding:5px 30px 0px 0px;
padding-bottom:10px;
}
#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:85%;
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 {
font-size:85%;
padding:10px 10px 10px 10px;
margin-bottom:10px;
margin-left:15px;
text-align:left;
border:1px dotted plum;
}
#footer{
text-align:center;
position:absolute;
top:10px;left:10px;
}
.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;
}

閉じる

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

<<2005年06月| Main |2005年08月>>

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) | テンプレート

<<2005年06月| Main |2005年08月>>

2005-07-12

新テンプレート「Olive」

ずいぶん時間があいちゃいましたが、「Ajisai」「Wakakusa」三姉妹の最後のバリエーション。
オリーブの実の写真が入ったテンプレートです。
サンプルはこちら。

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

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

■Olive　(右サイドバー専用)

body {
font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; 
margin:0px;
padding:0px;
text-align:center;
background-color:#ECF2DC;
color:#636;
scrollbar-3dlight-color:olive;
scrollbar-darkshadow-color:olive;
scrollbar-arrow-color:purple;
scrollbar-base-color:#ECF2DC;
scrollbar-face-color:#ECF2DC;
scrollbar-highlight-color:#ECF2DC;
scrollbar-shadow-color:#ECF2DC;
scrollbar-track-color:#ECF2DC;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px auto 0px auto;
padding:0px;
width:749px;
background-color:#ECF2DC;
background-image:url(image/ol_head.jpg);
background-repeat:no-repeat;
background-position:top center;
}
a{
text-decoration:none;
color:olive;
}
a:hover,a:active{
color:#6B8E23;
}
#banner{
height:99px;
margin:0px;
padding:0px;
text-align:left;
line-height:125%;
}
h1 {
margin:0px;
padding:20px 5px 5px 5px;
font-size:200%;
font-weight:bold;
}
h1 a{color:purple;}
h1 a:hover,h1 a:active{color:red;}
h2{
font-size:100%;
margin:0px;
margin-bottom:10px;
text-align:center;
padding-top:10px;
padding-right:10px;
}
h3 {
font-size:90%;
margin:0px;
height:40px;
padding-left:35px;
line-height:280%;
background-image:url(image/ol_b_head.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
h3 a{
}
.description {
margin:0px;
font-size:70%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:512px;
text-align:center;
margin-top:200px;
padding-top:10px;
background-color:#D3E1AC;
}
.blog {
margin:0px;
text-align:left;
}
.blogbody {
margin-bottom:10px;
margin-top:10px;
line-height:120%;
width:470px;
position:relative;left:20px;
}
.date{
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 15px 0px 25px;
letter-spacing:0.02em;
border-left:#ECF2DC 1px solid;
border-right:#ECF2DC 1px solid;
}
.posted{ 
font-size: 65%;
text-align:right;
padding:5px 20px 0px 0px;
border-left:#ECF2DC 1px solid;
border-right:#ECF2DC 1px solid;
border-bottom:#ECF2DC 1px solid;
}
#links,#links-left {
font-weight:normal;
width:237px;
margin:0px;
text-align:left;
}
#links-left{
float:left;
padding-right:5px;
}
#links{
float:right;
}
#calendar {
width:220px;
margin:0px;
font-weight:normal;
text-align:center;
padding:5px 0px 5px 0px;
}
#calendar table {
margin:0px;
height:140px;
text-align:center;
}
#calendar th{
font-size:70%;
font-weight:bold;
color:white;
background-color:#D3E1AC;
}
#calendar td{
text-align:center;
font-size:70%;
border-bottom:#D3E1AC 1px dotted;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
height:24px;
font-size:75%;
font-weight:bolder;
padding:5px 0px 0px 30px;
margin:0px;
text-align:left;
background-image:url(image/ol_s_head.gif);
background-repeat:no-repeat;
background-position:bottom left;
position:relative;left:8px;
}
.calendarhead{padding:6px 0px 0px 30px;}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:0px 0px 5px 0px;
text-align:center;
padding:5px 0px 5px 0px;
}
.side ,#calendar table{
background-color:#ECF2DC;
border-collapse:collapse;
position:relative;left:8px;
width:220px;
border-left:#D3E1AC 1px solid;
border-right:#D3E1AC 1px solid;
border-bottom:#D3E1AC 1px solid;
}
.side a:hover{
font-size:120%;
margin:-2px 0px 0px -2px;
}
.input-submit, .side input, input,textarea{
border:olive 1px solid;
}
.input-submit{
background-color:#D3E1AC;
padding:2px;
}
#comments .input-submit{
width:100px;
margin:4px 8px 4px 0px;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
position:relative;left:8px;
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:95%;
}
.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:#ECF2DC 1px dotted;
}
#trackback hr{
height:0px;
border:#ECF2DC 1px dotted;
}
#footer{
clear:both;
height:60px;
text-align:center;
background-image:url(image/ol_foot.jpg);
background-repeat:no-repeat;
background-position:top 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;
}

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

●日付部分の背景画像

●サイドバー背景

●ヘッダ背景

●フッタ背景

閉じる

posted by ８ at 04:49 | Comment(9) | TrackBack(0) | テンプレート

<<2005年06月| Main |2005年08月>>

Style book

新テンプレート「Floating」

新テンプレート「Summer breeze」

新テンプレート「Olive」

広告