Style book

<<2005年09月| Main |2005年11月>>

2005-10-14

新テンプレート「Ringostar★」

下のCSS Generatorβに入ってる「dot」を秋っぽくアレンジしてみました。
サイドバー固定で記事部分のみがビヨーンと伸び、上にリンゴの写真が一列入るデザインです。
サンプルはこちら。

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

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

■Ringostar★　(両サイドバー専用)

body {
font-family:"Trebuchet MS",Tahoma,Verdana,Arial,sans-serif; 
margin:0px;
padding:0px;
text-align:center;
background-color:#D8CBAC;
color:#000;
scrollbar-3dlight-color:BURLYWOOD;
scrollbar-darkshadow-color:BURLYWOOD;
scrollbar-arrow-color:brown;
scrollbar-base-color:#D8CBAC;
scrollbar-face-color:#D8CBAC;
scrollbar-highlight-color:#D8CBAC;
scrollbar-shadow-color:#D8CBAC;
scrollbar-track-color:#D8CBAC;
}
img{
border:0px;
}
#container{
text-align:center;
margin:0px;
border-top:brown 10px dashed;
}
a{
text-decoration:none;
color:brown;
}
a:hover,a:active{
color:red;
}
#banner{
margin:0px;
padding:40px 0px 40px 10px;
text-align:left;
line-height:125%;
background-image:url(ringo.jpg);
background-repeat:repeat-x;
}
h1 {
margin:0px;
padding:80px 5px 5px 5px;
font-size:200%;
font-weight:bold;
}
h2{
font-size:100%;
margin:0px;
padding:0px 20px;
color:INDIANRED;
}
h3 {
width:100%;
text-align:center;
font-size:120%;
background-color:BURLYWOOD;
padding:5px 0px;
margin:0px;
}
h3 a{
}
.description {
margin:0px;
font-size:65%;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:auto;
text-align:center;
margin:0px;
background-color:#D8CBAC;
position:absolute;
left:198px;right:198px;
}
.blog {
margin:0px;
text-align:left;
}
.blogbody {
margin:5px 0px;
line-height:120%;
}
.date{
}
.title{
}
.title a{
}
.text{
font-size:75%;
margin-top:0px;
padding:0px 15px 0px 25px;
letter-spacing:0.02em;
}
.posted{ 
font-size: 65%;
text-align:right;
padding:5px 20px 20px 0px;
}
#links,#links-left {
font-weight:normal;
width:180px;
text-align:left;
background-color:wheat;
border:BURLYWOOD 4px solid;
position:absolute;
}
#links-left{
float:left;
margin:0px 5px 0px 10px;
left:0px;
}
#links{
margin:0px 10px 0px 5px;
float:right;
right:0px;
}
#calendar {
margin:0px;
font-weight:normal;
padding:5px 0px 5px 0px;
}
#calendar table {
width:180px;
border-collapse:collapse;
margin:0px;
height:120px;
}
#calendar th{
font-size:70%;
font-weight:bold;
color:white;
background-color:BURLYWOOD;
}
#calendar td{
text-align:center;
font-size:70%;
border-bottom:BURLYWOOD 1px dashed;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
width:180px;
text-align:center;
font-size:75%;
font-weight:bolder;
padding:5px 0px;
margin:0px;
color:INDIANRED;
background:BURLYWOOD;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin:0px;
padding:15px 5px;
}
.side a:hover{
}
.input-submit, .side input, input,textarea{
border:BURLYWOOD 2px solid;
}
.input-submit{
background-color:BURLYWOOD;
}
.side input,.input-submit{
margin:0px -1px;
}
#comments .input-submit{
margin:4px 8px 4px 0px;width:100px;
border:BURLYWOOD 1px solid;
}
.powered {
padding:0px;
text-align:center;
}
.syndicate {
position:relative;left:8px;
font-size:70%;
}
#comments {
margin:25px 15px 0px 15px;
text-align:left;
}
#comments form{
padding-left:10px;
margin-top:5px;
}
#comments input{
max-width:250px;
}
#comments .text{
padding:8px;
border:BURLYWOOD 1px solid;
}
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:5px 10px 5px 0px;
text-align:right;
}
#trackback {
font-size:85%;
padding:10px;
margin:0px 15px 10px 15px;
text-align:left;
border:BURLYWOOD 2px solid;
}
#trackback hr{
height:0px;
border:BURLYWOOD 1px solid;
}
#footer{
float:right;
height:60px;
text-align:center;
position:absolute;
top:20px;right:0px;
}
.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;
}

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

閉じる

posted by ８ at 02:21 | Comment(29) | TrackBack(6) | テンプレート

<<2005年09月| Main |2005年11月>>

2005-10-08

CSS Generatorβ(両サイドバー

両サイドバー用のCSS Generatorβを作ってみました。

CSS Generatorβ(両サイドバー用)
https://temp-css.up.seesaa.net/image/b_index.htm

使えるテンプレートは今のところ3種類のみですが、うち2つは新作です。
両サイドバー固定、記事部分のみサイズがビヨーンと変えられます。
良かったら使ってみてください。

posted by ８ at 02:35 | Comment(8) | TrackBack(0) | ブログ用ツール

<<2005年09月| Main |2005年11月>>

Style book

新テンプレート「Ringostar★」

CSS Generatorβ(両サイドバー

広告