: シンプル3カラム（サイズ可変） [Seesaa デザインテンプレート]

<<現在、微調整中です。| Main | ブログの簡易バックアップ>>

2004年09月11日

シンプル3カラム（サイズ可変）

HOME ⇒ シンプル ⇒ この記事

シンプル3カラムの幅可変、ベースレイアウトです。

使用するテーマ：ダイアリー
レイアウト：両サイドバー

注）サンプルでは画像が表示されていません。

@charset "shift_jis"; 
/*

このCSSは、Seesaaブログ用です。 
文字色、大枠レイアウトマージン、各パーツマージンと分けて記述しています。
修正等は自由ですが、CSSに関する質問は受け付けていませんので自己責任でお願いします。

<a href="http://template.seesaa.net" target="_blank">http://template.seesaa.net</a>

/* font-size, color, line-height */

h1 {
	font-size: 1em;
	}
	h1 a{
	}
	h2,h3{
	font-size: 1em;
	}

#banner, #content, #links-left, #links{
		font-size: 0.95em;
		color: #333333;
		line-height: 140%;
	}

a{
		text-decoration: none;
		color: #355B86;
		padding: 0px 0.2em 0px 0em;
	}

a:hover{
		color: #3333FF;
		text-decoration: underline;
	}
	
	#calendar table td,#calendar table th, .calendarhead {
	font-size: 12px;
	line-height: 100%;
	background: #F4F2EC;
	}

/* layout color */

body {
	background: #ECE8DD;
}
#banner {
	background: #E0D5AD;
	border-bottom: 10px solid #9D8D64;
	border-top: 10px solid #9D8D64;
}
#content {
	background: #F8F7F3;
	border: 2px solid #E1DBCA;
}
#footer{
	border-top: 2px solid #999999;
}
.calendarhead {
	background: #EC862B;
	color: #FFFFFF;
	border-bottom: 5px solid #333333;
}
.sidetitle {
	color: #302C1F;
	font-weight: bold;
	border-bottom: 7px solid #9D8D64;
}
.side {
	background: #F4F2EC;
	border: 2px dotted #BBB095;
}
.posted, .comments-post{
	border-top: 1px dashed #CCCCCC;
	border-bottom: 1px dashed #CCCCCC;
	background: #F0EEE6;
}
#calendar {
	border: 1px solid #999999;
}
/* layout margin */

* {
	margin: 0px;
}
.text, .navi, blockquote, .posted{
	margin: 1em 20px 2em;
}
.title {
	margin: 0px 10px;
}
#comments, #trackback {
	margin: 0px 35px 2em;
}

/* base layout */
body {
	text-align: center;
}
#container{
	text-align: left;
}
#banner {
	margin: 20px 220px 10px;
	padding: 20px 0px 20px 20px;
}
#content {
	margin: 0px 220px 20px;
	padding-top: 20px;
}
#links-left {
	width: 190px;
	position: absolute;
	margin: 0px;
	left: 10px;
	top: 20px;
}
#links {
	width: 190px;
	margin: 0px;
	position: absolute;
	right: 10px;
	top: 20px;
}
#footer{
	padding: 5px;
	clear: both;
}
/* parts */
.description {
}
.navi {
	border-bottom: 1px solid #CCCCCC;
	padding: 3px 3px 5px;
}

.blog {}
.blogbody {}
.date{
	margin: 1em 20px 0px;
	text-align: right;
	padding: 0px 0px 18px;
	background: url(image/dateback01a.gif) no-repeat right bottom;
}

.title a{}
blockquote {
	border: 1px solid #CCCCCC;
	padding: 10px;
}
.posted{
	padding: 5px;
}
.posted a{
}
#calendar {
	margin: 0px 0px 1em;
}
#calendar table {
	width: 188px;
}
.calendarhead {
	padding: 5px 0px 3px;
}
.calendarday {
	padding: 4px 0px;
}
.calendarday a{
	font-weight: bold;
}
.sidetitle {
	padding: 5px 0px 2px 3px;
	margin: 0px 0px 2px;
}
.side {
	padding: 10px;
}
.powered {
}
.syndicate {
}
.syndicate a{
}
#comments {
}
#comments textarea{

}
.comments-head{
	font-weight: bold;
	margin: 0px 0px 1em;
}

.comments-body {
}

.comments-post{ 
	padding: 5px;
}
.comments-post a{
}
textarea {
	width: 300px;
}
input {
	width: 150px;
}
#trackback {
}
#trackback a {
}
.trackback-url {
}
.trackback-body {
}
.trackback-post {
}
.trackback-post a {
}
.copyright{
}
#diet-container{
}
.diet-title{
}
.diet-content{
}
#diet-foods{
}
.food-title{
}
.food-content{
}

posted by えびす at 15:28 | Comment(25) | TrackBack(6) | シンプル

この記事へのコメント

えびすさん
お手数をお掛けしました、態々サイズ可変テンプレートまで作っていただき有難う御座いました。
お蔭様で綺麗に表示されました。
私のノートパソコンが使えない状況のため、家族用のパソコン（WinXP+IE6.0）を使用しましたが綺麗な3カラムになっています。
Win2000+IE6.0でも同様に表示される筈です。
現在はカテゴリーページに適用していますのでお手数ながら確認いただければ幸いです。

Posted by 京極恭輔 at 2004年09月11日 16:45

おつかれさまでした。

なんだかんだといって、テストに付き合っていただいてありがとうございます。まだテンプレート作成には不慣れなものですから、とても助かりました。どこかオカシナところがあったら、ご連絡くださいね。

Posted by えびす at 2004年09月11日 20:34

はじめまして。
テンプレート使わせてもらいました。
すごくシンプルでいいですよ。
ありがとうございました。

Posted by ユウジ at 2004年10月01日 14:20

　はじめまして
テンプレートをお借りしています。
色使いが大変気に入っています。
ありがとうございます。

Posted by ペペ at 2004年12月02日 07:14

このテンプレートを使わせていただきました。シンプルでシックなデザインで、たいへん気に入りました。ありがとうございました。

Posted by kenbo at 2004年12月22日 20:43

はじめまして。
こちらのテンプレートお借りしました。
長く使わせていただくつもりです。
ありがとうございました。

Posted by へたこもり at 2005年01月07日 10:56

はじめまして　こんにちは～
こちらのテンプレートをお借りしました
シンプルで３カラムの型崩れのしないものが欲しかったので助かりました＾＾

Posted by まこと at 2005年01月22日 13:22

はじめまして。
seesaaのテンプレートを探していてこちらに
来ました。
ひと目でこのテンプレートが気に入り、使わせて頂く事に致しました。
ありがとうございます。

Posted by ik at 2005年03月20日 08:50

レイアウト気に入りまして、使わせていただきました。
背景、カラーその他、自分なりに加工させてもらいます。
両サイドバーが機能的で、好きです。
よかったら、見に来ていただいて、評価をお願いいたします。

Posted by KNTY at 2005年05月10日 18:16

このテンプレートレイアウト最高です。
使わせていただきました。
カラー、背景などをいじくり自分風にアレンジしたつもりです。
もし時間がありましたら、評価してくださいませんか。
よろしくお願いいたします。

Posted by KNTY at 2005年05月10日 18:21

ひと目で気に入りさっそく使わせていただきました。
ありがとうございます！

Posted by ｙｙｙ at 2005年05月21日 09:34

昨日（5月31日）にテンプレートが壊れました。
何が原因かが、解らず困ってます。
アドバイスお願いします。

Posted by KNTY at 2005年06月01日 07:35

>昨日（5月31日）にテンプレートが壊れました。

後から追加修正した際にを消してしまったか、余分なまで貼り付けたか、はたまた挿入する位置が悪かったのかもしれません。

ソースを見ながら＜div＞と、それを閉じる＜/div＞の位置を確認していくのが近道かと思います。

Posted by えびす at 2005年06月01日 14:50

アドバイス有難うございます。
contentのwidthを100％にしたら、直りました。
今度は、ページの立ち上がりが遅いので、もう少し軽くなるよう、少しずつ改良していきます。

Posted by KNTY at 2005年06月08日 00:10

この時間帯、めちゃくちゃ重くて、時間掛かります。
先日は有難うございました。
おかげさまで元の状態に戻りました。
コンテントのWidthを100%にしたら、直りました。
今度は、ページが重いので、軽くなるように少しずつ改良していきます。

Posted by KNTY at 2005年06月08日 00:15

テンプレートを使わせていただきます。　

自分でこんな風に作れたらいいな♪　

Posted by mami at 2005年07月09日 01:48

快適な環境でブログさせてもらってます。
３カラム（サイズ可変）も板についてきました。
有難うございます。
さて、ひとつ教えてください。
キーワードマッチ型広告の事なのですが、テキスト内に自動的に作られるキーワードマッチのキーワード部分の文字の色、サイズ等の変更は、どのように行えばよいでしょうか？

Posted by KNTY at 2005年07月15日 16:12

テンプレート使わせて頂きました。
色などほとんど全て変えてしまったので原型をとどめてないですが・・・(~_~;)

いろいろ参考にさせていただき、ありがとうございました。

Posted by わらしべ at 2005年07月21日 00:03

始めまして山の爺と言う者です。
ヒョンナ事から此処に辿り着きました。

テンプレート両サイド・・（良いな～）・・を使わせてもらっています。
文字サイズを少し変えている最中です。

今後共解りやすい解説を宜しくお願いします。
有り難う御座いました。

Posted by 山の爺 at 2005年10月05日 19:39

はじめまして！
テンプレート使わせていただきました。
ありがとうございましたっ<(_ _)>

Posted by まるけめ at 2005年10月25日 00:22

はじめまして、
テンプレート使わせていただきます。

素敵なでざいんですね、一目ぼれしました！

Posted by ちむ at 2005年10月28日 14:49

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

Posted by 空猫 at 2005年11月20日 02:42

こんにちは！
こういう色のテンプレートを探していたので
すごい嬉しいです！
使わせていただいてます。ありがとうございます！
ブログ名の所にﾏｳｽﾎﾟｲﾝﾀｰがくると青く？(^^;）なるのを解除したいのですが
どこをいじったらいいのか･･･初心者にはぜんぜん解りません。よかったら回答ください。

Posted by kayon at 2006年04月07日 11:58

かわいい。
Seesaa使い勝手は改善されてきているのですが
テンプレだけはいつまでたってもイマイチ（泣）
使わせて頂きましたのでご報告です。

Posted by あり。 at 2006年05月04日 17:05

すいません。
アド入れ忘れました。

Posted by あり。 at 2006年05月04日 17:06

コメントを書く

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/582021

俺の脳みそ1キロバイト
Excerpt: 寝る前に唐辛子をまぶした鮭を食べながら。チョコチップパンを食い。オレンジサイダーを飲みながら。マトレボを見ていた。台風の夜。朝目覚めた。胃がムカムカする今にも吐きそうだ。牛乳が飲みたい...
Weblog: ニーマルニー | 202.be
Tracked: 2004-09-30 15:59

Seesaaデザインテンプレート
Excerpt: シックな色あわせが気に入って『シンプル3カラム（サイズ可変）』テンプレートを使いました。リンク色やボーダーカラーを自分の好きな色に変更した部分がありますので、お出でくださってご確認いただければ幸いで...
Weblog: Funky Rabbit
Tracked: 2004-11-29 18:28

お笑い好きなら、TV.Bros1/8&gt;1/21号を読め！
Excerpt: 「Seesaa デザインテンプレート」を利用して、ページデザインを変えました。気にいったデザインに出会えました。さて、それはさておき、TV.Bros1/8&gt;1/21号。へたなお笑い...
Weblog: 懸賞+
Tracked: 2005-01-07 00:46

テンプレートを変えてみる。
Excerpt: シーサーで用意されているテンプレートって、センスはあるんですけど全体的に文字が小さいですよね。そこで、テンプレートを公開されているブログを探してみました！今はSeesaa デザインテンプレートさ...
Weblog: 仕事しながらネタを考える（仮）
Tracked: 2005-03-02 20:07

カテゴリページに記事一覧表示
Excerpt: やっとできた。こんな感じになる簡単Seesaaカスタマイズ: アフィリエイト
Weblog: 簡単Seesaaカスタマイズ
Tracked: 2005-04-11 17:29

スタイルシート変更一旦終了
Excerpt: 昨日からスタイルシートをいじってたが、キリがないので一旦終了することにした。見る人が見ればまだまだ変なところがあると思うが、まぁ少しは見やすくなったか。次はロゴ作成かな。ちなみに、このデザ...
Weblog: モバイルビジネスを中心としたメディア・広告・ネット業界ニュースの備忘録 - オダログ
Tracked: 2006-01-15 13:01