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

<<新テンプレート「Summer breeze」| Main | CSS Generatorβ(両サイドバー>>

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

<<新テンプレート「Summer breeze」| Main | CSS Generatorβ(両サイドバー>>

この記事へのコメント

これの応用で、記事部分のサイズが変えられる両サイドバータイプのテンプレートもいくつか公開予定です。
かなり後日になるかもしれませんが、お楽しみにー。

Posted by ８ at 2005-07-29 02:52

はじめまして。
いつも新しいテンプレ楽しみに見ていました。

ちょうど僕好みのテンプレだったので使わせていただきました。
CSS Generatorもとても使いやすかったです。
ありがとうございました。

これからもがんばってください！

Posted by 潤 at 2005-07-31 06:07

テンプレート使わせていただきました。
サイドバーの幅が固定というのが、
ありそでないので、とても助かりました！

両サイドバータイプも楽しみにしてますね～。
（乗り換えさせていただくかもです。）

Posted by Angie at 2005-08-01 22:21

はじめまして。

テンプレート使わせていただきました。
ありがとうございました。

Posted by ayubo at 2005-08-02 22:14

潤さん、Angieさん、ayuboさん、初めまして。
ご報告ありがとうございます。
大変格好よく使っていただけて嬉しいです。
これからもいろいろ作っていきますので、ぜひまた遊びに来てくださいね。

Posted by ８ at 2005-08-06 03:20

可愛いテンプレートがいっぱいですね。

Posted by さんじ at 2005-08-18 21:59

さんじさん、初めまして。
ありがとうございます。

Posted by ８ at 2005-08-25 03:33

とてもユニークなレイアウトで気に入りました。

遠慮なく使わせていただきます。
うまく使いこなせる自信はないのですが、いろいろ試してみます。

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

Posted by lonnie at 2005-12-10 07:44

lonnieさんこんばんは、初めまして。
ご報告ありがとうございます。
ぜひいろいろ遊んでみてくださいね。

Posted by ８ at 2005-12-17 02:19

初めまして、利用させていただいてます。
ところでこのテンプレート、フッタが画面下部に表示されないのは仕様なんでしょうか？

Posted by YK at 2007-12-07 09:49

コメントを書く

この記事へのTrackBack URL

bodyの色を変えよう！
Excerpt: bodyの色を変えるには？　
Weblog: 横幅760ドットCSSテンプレートをつくる
Tracked: 2005-08-18 22:09

<<新テンプレート「Summer breeze」| Main | CSS Generatorβ(両サイドバー>>