tagebuch-zweit: SeesaaブログCSSテンプレ「OldPaper

<< Seesaaブログの記事検索・以前のデータ | TOP | 「OldPaper_sepia」の元ネタとか >>

Fri,December 07,2007

SeesaaブログCSSテンプレ「OldPaper_sepia」

お久しぶりのSeesaaCSSテンプレです。
とにかく夏場にデータをふっとばして以降、ちょっと色々な事に対するパワーががくんと落ちたというか単に他のところでやりすぎたというか、そうじゃなくてSeesaaのオフィシャルで色々出るしとかまあ色々あったものの、正直言うと単に気分が向かなかっただけのテンプレ作成ですが、先日いきなり作りたくなったので作ってみました。

といっても、本当は、本当は、元デザインは実は私が避難所ブログで使用しているものをちょっと色変えして修正して……と思っていたものだっていうのは秘密です。これはまた別記事にしようかな。混乱しそうだし。
でも、これのせいで私にしては珍しく文字サイズが固定です。メインが12pxでサイドバーが10px(でも多分IEだともっと大きめ。side全体の指定は違うからだと思いますがよく分かんないなIEは、と放置。ゴメン)って小さすぎると思うんですけれども。少なくとも私は10pxだともう読めない。メインが読めればいっか、という結論で作った記憶があります。寧ろサイドバーなくてもいいんじゃないかとか。

久しぶりに左サイドに画像があるタイプですが、これ、前回作った時に気づいているんですが、崩れやすいのよね。崩れやすいっていうか、MacのIE系で可哀想な事になりがちで、だからどうしようかと思ったんですが右サイドバータイプであればそう問題にならないかなと。
ちなみに、そもそも似合わないんですけれども、左サイドバータイプ＆両サイドバータイプだとけっこう悲惨な事になりがちなので、今回は右サイドバータイプと、これまたそこそこMacIEだと悲惨なんですが左サイドバー＆両サイドバータイプよりはましなワンカラムタイプを作成してみました。珍しい。

今回のものはcontainerのmax-widthを指定してみましたので、大きいモニタで見ると真ん中に寄って見える筈です。筈。私のところのモニタは小さいから分かりません。ちょっとbannerの画像の見え方が切ない気もしますが、これはこれで悪くないかなと。薄いし。

●OldPaper_sepia(2カラム・右サイドバータイプ)

@charset "shift_jis";
/*■tagebuch-zweit■http://tagebuch-zweit.seesaa.net/
●OldPaper_sepia(右サイドバータイプ)
*/

/*▼画像を使用している部分ピックアップ　ここから↓▼*/
#container{
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia01.png);
}

#banner{
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia03.png);
}

.side,.side-tag,#calendar table {
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia02.png);
}
/*▲画像を使用している部分ピックアップ　ここまで↑▲*/

/*全体・ボディ*/
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #fff;
color: #555;
}

/*全体のリンクカラー設定*/
a:link{ color: #300; text-decoration: underline;}
a:visited{ color: #630; text-decoration: none;}
a:active,a:hover{ color: #fff; text-decoration: none;background-color: #630;}

/*全体*/
#container{
margin: 0px auto 0px auto;
padding: 0px;
text-align: center;
width: 100%;
max-width: 1030px;
background-repeat: repeat-y;
background-position: top left;
}

/*日記のタイトル(トップ)部分全体*/
#banner{
font-family: Times New Roman,Times,serif,"MS P明朝","MS 明朝","ヒラギノ明朝 Pro W6","平成明朝";
margin: 0px;
padding: 20px 120px;
text-align: left;
background-repeat: no-repeat;
background-position: top right;
}

/*日記のタイトル(トップ)*/
h1 {
margin: 0px;
padding: 10px 0px;
font-size: 20px;
font-weight: bold;
}

/*日記のタイトルリンクカラー指定*/
h1 a:link,h1 a:visited,h1 a:active,h1 a:hover{color: #cbb792;
text-decoration: none;
background-color: #fff;}

/*ブログの内容説明文*/
.description {
font-size: 11px;
color:  #777;
background-color: #fff;
margin: 5px;
line-height: 150%;
border-bottom: 1px dotted #999;
}

/***************************/

/*記事毎のページのナビ部分*/
.navi{
color: #666;
font-size: 10px;
text-align: center;
padding: 10px 0px;
margin: 0px 0px 0px 90px;
}
.navi  a {}

/*記事エントリ部分(全体)*/
#content{
float: left;
text-align: left;
width: 70%;
}

/*記事エントリの部分2*/
.blog {
margin: 0px 0px 10px 90px;
border: 5px solid #cbb792;
}

/*各記事エントリ部分*/
.blogbody{
font-size: 12px;
line-height: 170%;
padding: 5px 0px;
}

/*日付部分*/
.date{
text-align: right;
font-size: 10px;
color: #cbb792;
padding: 3px;
}

/*日付部分*/
h2 {
margin: 0px;
padding: 0px;
}

/*エントリタイトル*/
.title{
font-weight: bold;
font-size: 14px;
color: #333;
padding: 3px;
}

/*エントリタイトル*/
h3{
margin: 0px 20px 0px 0px;
padding: 0px;
background-color: #cbb792;
}

/*エントリタイトル部分のリンク設定*/
.title a:link,.title a:visited,.title a:active,.title a:hover{
font-size: 100%;
color: #fff;
background-color: #cbb792;
text-decoration: none;
}

/*テキスト設定*/
.text{
font-size: 12px;
color: #444;
padding: 7px;
margin-top: 5px;
line-height: 180%;
}

/*引用部分の設定*/
blockquote{
padding: 3px;
border: 1px dotted #963;
}
q{
background-color: #cbb792;
}

/*キーワードアフィリエイトのリンクカラー*/
a:link.affiliate-link,a:visited.affiliate-link,a:active.affiliate-link,a:hover.affiliate-link{
color: #444;
text-decoration: underline;
background-color: #fff;
}

/*ブックマークアイコン*/
.bookmark{
text-align: right;
padding-top: 10px;
}

/*名前・投稿日時等の部分*/
.posted{ 
font-size: 10px; 
color: #963;
text-align: right;
margin-top: 10px;
padding: 0px 2px;
}

/*****************************/

/*コメント*/
#comments{
color: #630;
font-size: 12px;
margin: 25px 0px 30px 90px;
border: 5px solid #cbb792;
}

#comments form{
padding-left: 25px;
}
#comments input{
max-width: 250px;
border: 2px inset #cbb792;
}
#comments textarea{
max-width: 400px;
border: 2px inset #cbb792;
}

#comments .input-submit{
color: #300;
background-color: #cbb792;
border: 2px outset #cbb792;
}

/*「コメントする」*/
.comments-head{ 
color: #fff;
background-color: #cbb792;
font-weight: bold;
margin: 10px 20px 5px 0px;
padding: 3px;
}

/*コメント(内容)*/
.comments-body{
padding: 10px;
}

/*コメント投稿者*/
.comments-post{
color: #963;
font-size: 90%;
padding: 7px;
border-bottom-width: 1px;
border-bottom-style: dotted;
text-align: right;
}

/*トラックバック*/
#trackback{
color: #963;
font-size: 10px;
background-color: #fff;
margin: 25px 0px 30px 90px;
padding: 5px 15px;
border: 5px solid #cbb792;
line-height: 140%;
}

/******************************/

/*サイドバー左*/
#links-left{
}

/*サイドバー右*/
#links{
float: left;
text-align: left;
font-size: 12px;
width: 25%;
margin: 0px 0px 0px 10px;
padding: 0px;
}

/*サイドバーの見出し部分*/
.sidetitle{
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 3px;
margin: 0px 0px 0px 10px;
border-left: 20px solid #af9e7e;
border-bottom: 1px solid #af9e7e;
background-color: #cbb792;
}

/*サイドバー(中身)*/
.side{
color: #555;
font-size: 10px;
line-height: 1.5;
margin: 0px 0px 10px 10px;
padding: 10px;
text-align: left;
}

.side-tag {
color: #555;
font-size: 10px;
line-height: 1.2;
margin: 0px 0px 10px 10px;
padding: 10px;
text-align: left;
}

#links input{
max-width: 250px;
border: 2px inset #cbb792;
}

#links .input-submit{
color: #fff;
background-color: #cbb792;
border: 2px outset #cbb792;
}

/******************************/

/*カレンダー*/
#calendar {
font-size: 10px;
text-align: left;
margin: 10px 0px 10px 10px; 
padding: 5px 0px 5px 0px;
}

/*カレンダー(テーブルタグでの指定部分)*/
#calendar table {
text-align: center;
width: 100%;
margin: 0px;
padding-top: 5px;
}

/*カレンダー曜日部分(テーブルタグでの指定部分)*/
#calendar  th{
text-align: center;
color: #630;
}

/*カレンダー日にちリンク部分(テーブルタグでの指定部分)*/
#calendar  td a{
text-decoration: none;
background-color: #af9e7e;
display: block;
}

/*カレンダー年月部分*/
.calendarhead {
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 3px;
border-left: 20px solid #af9e7e;
border-bottom: 1px solid #af9e7e;
background-color: #cbb792;
}

.calendarhead a:link{ color: #fff; text-decoration: underline;}
.calendarhead a:visited{ color: #fff; text-decoration: none;}
.calendarhead a:active,a:hover{ color: #fff; text-decoration: none;background-color: #af9e7e;}

/*カレンダー日にち部分*/
.calendarday{
font-size: 10px;
font-weight: normal;
color: #af9e7e;
padding: 1px;
}

.calendarday a{
color: #fff;}

/*rss設定*/
.syndicate{
font-size: 10px;
margin-top: 20px;
margin-bottom: 10px;
padding-top: 10px;
border-top-width: 1px;
text-align: center;
}

.syndicate a{}

/******************************/

/*フッター部分*/
#footer{
clear: both;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}

.copyright{
font-size: 10px;
width: 100%;
text-align: right;
padding: 5px; 
}

/*Seesaaバナー*/
.powered table {
text-align: center;
margin-left: auto;
margin-right: auto;
}

/*タグクラウド用
※記事用のノーマルタイプ以外は確認が出来ていませんので、ビデオ等でもお使
いの方は個々で確認・修正して下さい*/

/**記事内に表示される部分のタグクラウド用**/
.tag-word{
font-size: 11px;
text-align: right;
margin: 5px;
}

/**検索部分のタグクラウド用**/
.tag{
font-size: 12px;
line-height: 1.7;
color: #444;
background-color: #fff;
margin: 25px 0px 30px 90px;
border: 5px solid#cbb792;
padding: 5px 10px;
margin-bottom: 8px;
position:relative;
}

#tag_cloud{
padding: 5px;
position:relative;
}

.tag-title,.tag-photos-title,.tag-audios-title,.tag-videos-title{
font-size: 14px;
font-weight: bold;
color: #cbb792;
position:relative;
}

.tag-search{
font-size: 10px;
text-align: right;
position:relative;
}

.tag-search a:link{color: #555;
text-decoration: underline;}
.tag-search a:visited{color: #666;
text-decoration: none;}
.tag-search a:active,.tag-search a:hover{color: #000;
text-decoration: none;
background-color: #eee;}

.tag-more{
font-size: 10px;
margin-top: 7px;
position:relative;
}

/***********************************/
.tag-photos{
float:left;
margin:10px;
position:relative;
width:150px;
height:200px;
}
.tag-audios{
margin:5px;
position:relative;
}
.tag-videos{
float:left;
margin:10px;
position:relative;
}
.tag-navi{
clear:left;
text-align:center;
margin:10px 0px;
position:relative;
}

●OldPaper_sepia(1カラム・サイドバーなしタイプ)

@charset "shift_jis";
/*■tagebuch-zweit■http://tagebuch-zweit.seesaa.net/
●OldPaper_sepia(サイドバーなしタイプ)
*/

/*▼画像を使用している部分ピックアップ　ここから↓▼*/
#container{
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia01.png);
}

#banner{
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia03.png);
}

.side,.side-tag,#calendar table{
background-image: url(http://tagebuch-zweit.up.seesaa.net/image/papersepia02.png);
}
/*▲画像を使用している部分ピックアップ　ここまで↑▲*/

/*全体・ボディ*/
body {
font-family:Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #fff;
color: #555;
}

/*全体のリンクカラー設定*/
a:link{color: #300; text-decoration: underline;}
a:visited{color: #630; text-decoration: none;}
a:active,a:hover{color: #fff; text-decoration: none;background-color: #630;}

/*全体*/
#container{
margin: 0px auto 0px auto;
padding: 0px;
text-align: center;
background-repeat: repeat-y;
background-position: top left;
width: 90%;
max-width: 800px;
}

/*日記のタイトル(トップ)*/
h1 {
margin: 0px;
padding: 10px 0px;
font-size: 20px;
font-weight: bold;
}

/*日記のタイトルリンクカラー指定*/
h1 a:link,h1 a:visited,h1 a:active,h1 a:hover{color: #cbb792;
text-decoration: none;
background-color: #fff;}

/*ブログの内容説明文*/
.description {
font-size: 11px;
color:  #777;
background-color: #fff;
margin: 5px;
line-height: 150%;
border-bottom: 1px dotted #999;
}

/***************************/

/*記事毎のページのナビ部分*/
.navi{
color: #666;
font-size: 10px;
text-align: center;
padding: 10px 0px;
margin: 0px 0px 0px 90px;
}
.navi  a {}

/*記事エントリ部分(全体)*/
#content{
float: left;
text-align: left;
}

/*記事エントリの部分2*/
.blog {
margin: 0px 0px 10px 90px;
border: 5px solid #cbb792;
}

/*各記事エントリ部分*/
.blogbody{
font-size: 12px;
line-height: 170%;
padding: 5px 0px;
}

/*日付部分*/
.date{
text-align: right;
font-size: 10px;
color: #cbb792;
padding: 3px;
}

/*日付部分*/
h2 {
margin: 0px;
padding: 0px;
}

/*エントリタイトル*/
.title{
font-weight: bold;
font-size: 14px;
color: #333;
padding: 3px;
}

/*エントリタイトル*/
h3{
margin: 0px 20px 0px 0px;
padding: 0px;
background-color: #cbb792;
}

/*エントリタイトル部分のリンク設定*/
.title a:link,.title a:visited,.title a:active,.title a:hover{
font-size: 100%;
color: #fff;
background-color: #cbb792;
text-decoration: none;
}

/*テキスト設定*/
.text{
font-size: 12px;
color: #444;
padding: 7px;
margin-top: 5px;
line-height: 180%;
}

/*引用部分の設定*/
blockquote{
padding: 3px;
border: 1px dotted #963;
}
q{
background-color: #cbb792;
}

/*ブックマークアイコン*/
.bookmark{
text-align: right;
padding-top: 10px;
}

/*名前・投稿日時等の部分*/
.posted{ 
font-size: 10px; 
color: #963;
text-align: right;
margin-top: 10px;
padding: 0px 2px;
}

/*****************************/

/*コメント*/
#comments{
color: #630;
font-size: 12px;
margin: 25px 0px 30px 90px;
border: 5px solid #cbb792;
}

#comments form{
padding-left: 25px;
}

textarea{
max-width: 400px;
border: 2px inset #cbb792;
}

input{
max-width: 250px;
border: 2px inset #cbb792;
}

.input-submit{
color: #fff;
background-color: #cbb792;
border: 2px outset #cbb792;
}

/*「コメントする」*/
.comments-head{ 
color: #fff;
background-color: #cbb792;
font-weight: bold;
margin: 10px 20px 5px 0px;
padding: 3px;
}

/*コメント(内容)*/
.comments-body{
padding: 10px;
}

/*コメント投稿者*/
.comments-post{
color: #963;
font-size: 90%;
padding: 7px;
border-bottom: 1px dotted #963;
text-align: right;
}

/*トラックバック*/
#trackback{
color: #963;
font-size: 10px;
background-color: #fff;
margin: 25px 0px 30px 90px;
padding: 5px 15px;
border: 5px solid #cbb792;
line-height: 140%;
}

/******************************/

/*サイドバーの見出し部分*/
.sidetitle{
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 3px;
margin: 0px 0px 0px 90px;
border-left: 20px solid #af9e7e;
border-bottom: 1px solid #af9e7e;
background-color: #cbb792;
}

/*サイドバー(中身)*/
.side{
color: #555;
font-size: 10px;
line-height: 1.5;
margin: 0px 0px 10px 90px;
padding: 10px;
text-align: left;
}

.side-tag {
color: #555;
font-size: 10px;
line-height: 1.2;
margin: 0px 0px 10px 90px;
padding: 10px;
text-align: left;
}

/******************************/

/*カレンダー*/
#calendar {
font-size: 10px;
text-align: left;
margin: 0px 0px 10px 90px;
padding: 5px 0px 5px 0px;
}

/*カレンダー(テーブルタグでの指定部分)*/
#calendar table {
text-align: center;
width: 90%;
margin: 0px;
padding-top: 5px;
}

/*カレンダー曜日部分(テーブルタグでの指定部分)*/
#calendar  th{
text-align: center;
color: #630;
}

/*カレンダー日にちリンク部分(テーブルタグでの指定部分)*/
#calendar  td a{
text-decoration: none;
background-color: #af9e7e;
display: block;
}

/*カレンダー日にち部分*/
.calendarday{
font-size: 10px;
font-weight: normal;
color: #af9e7e;
padding: 1px;
}

.calendarday a{
color: #fff;}

/*rss設定*/
.syndicate{
font-size: 10px;
margin-top: 20px;
margin-bottom: 10px;
padding-top: 10px;
border-top-width: 1px;
text-align: center;
}

.syndicate a{}

/******************************/

/*フッター部分*/
#footer{
clear: both;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}

.copyright{
font-size: 10px;
text-align: right;
padding: 5px; 
}

/*Seesaaバナー*/
.powered table {
text-align: center;
margin-left: auto;
margin-right: auto;
}

/*タグクラウド用
※記事用のノーマルタイプ以外は確認が出来ていませんので、ビデオ等でもお使
いの方は個々で確認・修正して下さい*/

/**記事内に表示される部分のタグクラウド用**/
.tag-word{
font-size: 11px;
text-align: right;
margin: 5px;
}

/**検索部分のタグクラウド用**/
.tag{
font-size: 12px;
line-height: 1.7;
color: #444;
background-color: #fff;
margin: 25px 0px 30px 90px;
border: 5px solid#cbb792;
padding: 5px 10px;
width: 90%
margin-bottom: 8px;
position:relative;
}

#tag_cloud{
padding: 5px;
position:relative;
}

.tag-title,.tag-photos-title,.tag-audios-title,.tag-videos-title{
font-size: 14px;
font-weight: bold;
color: #cbb792;
position:relative;
}

.tag-search{
font-size: 10px;
text-align: right;
position:relative;
}

.tag-more{
font-size: 10px;
margin-top: 7px;
position:relative;
}

※2,3カラムからワンカラムタイプに切り替える場合、このCSSだけでは構造までは修正出来ませんので、必ず「マイブログ」→「デザイン」→「コンテンツ」で全てのパーツを「メイン」に切り替えて再構築して下さい。

宜しければ画像はお持ち帰りになって、ご自分のファイルマネージャにUpし、CSSの該当部分(一番上にPick Upしてあります)をそちらのURLに書き換えてください。今回の画像は3つです。

「papersepia01.png」

「papersepia02.png」

「papersepia03.png」

posted by sei at 00:31 | TrackBack(0) | MySeesaaCssTemp | 管理用

Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30