テンプレート： Style book

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-07-29

新テンプレート「Floating」

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

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

2005-07-16

新テンプレート「Summer breeze」

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

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

2005-07-12

新テンプレート「Olive」

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

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

2005-06-25

新テンプレート「Wakakusa」

みずみずしい印象の多肉植物の写真が入ったテンプレートです。
前回作った「Ajisai」のバリエーション。
サンプルはこちら。

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

2005-06-21

新テンプレート「Ajisai」

季節ものということで、アジサイをテーマにしたテンプレートです。
サンプルはこちら。

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

2005-06-18

新テンプレート「I'm drivin'」

夜のドライブをイメージして作った、Seesaaブログ用テンプレートです。
右サイドバー用と左サイドバー用があります。
サンプルはこちら。

posted by ８ at 00:56 | Comment(7) | TrackBack(1) | テンプレート

2005-06-11

新テンプレート「Rose of Roses」

バラと葉っぱをあしらったクラシカルなデザインです。
サンプルはこちら。

posted by ８ at 02:14 | Comment(19) | TrackBack(0) | テンプレート

2005-06-07

新テンプレート公開

新しくテンプレートを作ってみました。
非常にコンパクトなデザインで、800x600環境でも画面内に収まるように作ってあります。
記事やサイドコンテンツをスクロールする仕様なので、トップに記事を一つしか出さないとか、コンテンツを思いきりシンプルに切りつめた使い方がかっこいいような気がします。
CSS Generatorβのテンプレートにも追加してあります。
でもこっちは丸フチ画像付き。

posted by ８ at 01:44 | Comment(2) | TrackBack(0) | テンプレート

2005-05-21

新テンプレート「ChinaColors」

下の記事で書いたcssテンプレートをなんとか整理整頓したので、公開します。
チャイナカラーっぽいシンプルなデザインです。
右・左サイドバータイプに対応しています。

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

2005-05-16

漢？テンプレート

小ネタで全サイドバータイプ対応のテンプレート作ってみました。
全てのメニューが一直線に並び、日付やタイトルもごつっとした印象の、なんとなく漢を感じさせるデザインです。
カレンダーなど邪道！と言わんばかりに取っ払って、ズドンと記事のみにしても粋かもしれません。
これもcss書き換えのみでいけます。

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

2005-05-13

DAKARA?

某飲料のような色のコンパクトなテンプレート。

posted by ８ at 01:50 | Comment(0) | TrackBack(0) | テンプレート

2005-05-12

小ネタテンプレート

ユーザーの環境によって色が変わるテンプレート。
ウィンドウやデスクトップ背景色をそのまま反映します。

色とフォントだけなので、ウィンドウスタイルなどまでは反映されません。
Mac全く未確認。Windowsでしか使えないかもしれません。
小ネタなのであんまり動作確認してません。
設定方法は
http://temp-css.seesaa.net/article/3663981.html
をご覧ください。

■右サイドバー専用

body {
font-family:messagebox;
padding:0px;
text-align:center;
background:Background;
color:WindowText;
}
#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
width:762px;
background:Window;
border:ButtonHighlight 4px ridge;
}
a{
text-decoration:none;
color:Highlight;
}
a:hover{
background:Highlight;
color:WindowText;
}
#banner{
font-family:caption;
height:24px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;vertical-align:middle;
background:ActiveCaption;
border-bottom:ButtonHighlight 4px inset;
}
h1 {
float:left;
margin:0px;
padding:2px;
font-size:100%;
font-weight:bolder;
color:CaptionText;
padding:0px 10px;
}
h1 a{
color:CaptionText;
text-decoration: none;
}
h2 {
font-family:caption;
font-weight:bold;
margin:0px;
background:ActiveCaption;
text-align:left;
font-size:100%;
font-weight:bolder;
color:CaptionText;
padding:2px 10px;
border-bottom:ButtonHighlight 4px inset;
}
h3 {
font-size:85%;
font-weight:bolder;
margin:10px 10px 10px 0px;
}
h3 a{
}
.description {
font:bold 80%;
color:CaptionText;
}
.navi {
font-size:85%;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
float:left;
width:500px;
text-align:center;
margin-top:10px;
}
.blog {
margin:0px;
margin-left:10px;
margin-bottom:10px;
text-align:left;
border:ButtonHighlight 4px ridge;
}
.blogbody {
padding:0px 15px 0px 15px;
margin-bottom:10px;
line-height:120%;
}
.date{
font-size:85%; 
}
.title{
font-weight:bolder;
text-align:left;
}
.title a{
}
.text{
font-size:85%;
margin-top:0px;
padding:0px 10px 0px 10px;
}
.posted{ 
font-size: 65%;
text-align:right;
margin:5px -15px 5px -15px;
padding:5px;
}
#links-left {
}
#links {
font-weight:normal;
width:220px;
float:left;
margin-top:10px;
margin-left:18px;
}
#calendar {
margin:0px;
font-weight:normal;
text-align:center;
}
#calendar table {
margin:0px;padding:0px;
width:220px;height:160px;
text-align:center;
border-left:ButtonHighlight 4px ridge;
border-right:ButtonHighlight 4px ridge;
border-bottom:ButtonHighlight 4px ridge;
margin-bottom:10px;
}
#calendar th{
font-size:70%;
font-weight:bold;
background-color:InactiveCaption;
color:InactiveCaptionText;
}
#calendar td{
text-align:center;
font-size:70%;
border-right:InactiveCaption 1px solid;
border-bottom:InactiveCaption 1px solid;
}
.calendarday a{
text-decoration:underline;
}
.calendarhead , .sidetitle {
background:InactiveCaption;
font-size:75%;
font-weight:bold;
padding:9px 0px 8px 10px;
margin:0px;
text-align:left;
font-family:caption;
color:InactiveCaptionText;
padding:2 10px;
border:ButtonHighlight 4px ridge;
}
.side {
font-size:75%;
font-weight:normal;
line-height:1.5em;
margin-bottom:10px;
padding:10px 15px 10px 15px;
text-align:left;
border-left:ButtonHighlight 4px ridge;
border-right:ButtonHighlight 4px ridge;
border-bottom:ButtonHighlight 4px ridge;
}
.input-submit, .side input, input{
background:Window;
color:WindowText;
border:1px solid ActiveCaption;
}
.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;
border:1px solid ActiveCaption;
}
#comments textarea{
max-width:400px;
border:1px solid ActiveCaption;
}
.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 ActiveCaption;
}
#footer{
clear:left;
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;
}

閉じる

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

広告