タグ編集手順はページの一番下です

2007年07月06日

3カラムデザイン

またまた更新しないと。。。
ちょいと3カラムでデザインしてみました。

このデザインはチョイ丸さんからの依頼です

追記:7/7
これだけじゃー何がどうなんだか?ですよね〜
全体的なイメージは続きを見ていただいて・・・

コメント部分を判りやすく枠を点々
背景にも色付けして投稿者別に区切り線を付けました

クリックで拡大します。
なお、色変更・画像挿入しやすいように日本語で
コメント入れてますが、そのままコピペしてもらっても
日本語部分は表示されませんのでご安心をexclamation
3カラムデザイン

body {
font-family: Arial, Helvetica, sans-serif;
margin:30px;
padding:0px;
text-align:center;
background-color:#87CEFA; /*背景色*/
background-image:url( ) /*背景画像の場合(ここ)*/
}
a {
color:#6D6E71;
}
a:hover{
color:#000;
}
#container{
margin:10px auto 10px auto;
padding-right:0px;
width:780px;
padding-left:0px;
text-align:center;
color:#6D6E71;
background-color:#FFF;
border:1px solid #FFA500;/*枠の色*/

}

#banner{
font-family:arial, Helvetica;
padding:0px 0px 0px 0px;
height:200px;
margin:0px auto 0px auto;
text-align:left;
background-image:url( ) /*トップに画像(ここ)*/
border-bottom:1px solid #87CEFA; /*画像枠下の色*/
}
h1 {
margin:0px 0px 8px 10px;
padding-top:30px;
font-weight:bolder;
font-size:18px;
}

h1 a{
color:#6D6E71;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h1 a:hover{
color:#6D6E71;
}

h2 {
font-weight:bolder;
font-family:arial, Helvetica;
}

h3 {
padding:16px 5px 13px 10px;
margin-bottom:0px;
font-weight:bolder;
font-family:arial, Helvetica;

}

h3 a{
padding: 0px;
font-weight:bolder;
color:#6D6E71;
}
h3 a:hover{
color:#6D6E71;
}
.description {
color:#6D6E71;
margin:0px 0px 0px 10px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}

.navi {
font-size:12px;
text-align:center;
margin-top:10px;
margin-bottom:10px;
}
#content { /*ブログ記事部分*/
margin-bottom:30px;
margin-left:20px;
float:left;
width:370px;
text-align:left;
}

.blog {
}

.blogbody {
border:1px solid #87CEFA; /*記事部分の枠の色*/

}

.date{
font-size: 14px;
color:#6D6E71;
font-weight:bolder;
padding:5px 0px 5px 10px;
margin:10px 0px 0px 0px;
}

.title{
font-weight:bolder;
margin-top:0px;
}
.title a{
font-size: 12px;
border:none;
text-decoration: none;
}

.text{
font-size: 12px;
line-height:1.4em;
padding:5px 0px 5px 10px;
}
.posted{
font-size: 10px;
text-align:right;
padding:5px 10px 20px 20px;
}

#links-left {
font-weight:normal;
width:180px;
float:left;
margin-top:10px;
text-align:left;
}
#links {
margin-left:20px;
font-weight:normal;
width:180px;
float:right;
margin-top:10px;
text-align:left;
}

#calendar {
font-weight:normal;
margin-bottom:10px;
padding-bottom:8px;
}
#calendar table {
width:180px;
}
.calendarhead {
font-size:12px;
padding:5px 10px 5px 10px;
margin-top:0px;
border:1px solid #87CEFA; /*枠の色*/
text-align:left;
}
.calendarday {
font-size:12px;
font-weight:normal;
background-repeat:no-repeat;
background-position:center;
padding:4px ;
color:#6D6E71;
}
.calendarday a{
color:#000;
}
.sidetitle {
font-size:12px;
padding:5px 10px 5px 10px;
margin-top:0px;
border:1px solid #87CEFA; /*サイドバーの枠の色*/
}

.side {
font-size:12px;
font-weight:normal;
line-height:1.4em;
margin-bottom:10px;
padding:5px 10px 8px 10px;
}
.powered {
padding-top:10px;
padding-bottom:10px;
text-align:center;
}

.syndicate {
font-size:10px;
line-height:140%;
text-align:center;
}
#comments {
margin-top:10px;
padding:7px 10px 7px 10px;
text-align:left;
border:2px dashed #FFA500; /*コメントの枠部分*/
background-color:#FFE4E1; /*背景色*/
}
#comments form{
padding-left:20px;
padding-bottom:10px;
}
#comments input{
max-width:200px;
}
#comments textarea{
width:300px;
}
.comments-head{
margin-top:10px;
font-weight:bolder;
font-size: 12px;
}
.comments-body {
font-size: 12px;
}
.comments-post{
font-size: 10px;
text-align:right;
padding:5px 10px 20px 10px;
border-bottom:1px solid #FFA500; /*コメント区切り*/
}
#trackback {
margin-top:10px;
text-align:left;
font-size: 12px;
line-height:1.4em;
padding:7px 5px 7px 5px;
margin-bottom:10px;
border:1px solid #87CEFA;
}
#footer{
clear:left;
text-align:right;
}
.copyright{
font-size:10px;
width:100%;
text-align:center;
}
#diet-container{
border:1px solid #999;
padding:5px;
margin-bottom:5px;
}

.diet-title{
padding:2px 10px 2px 5px;
font-size:12px;
color:#FFFFFF;
width:90px;
margin-top:5px;
}

.diet-content{
padding-left:10px;font-size:12px;
}

#diet-foods{
padding-left:10px;font-size:12px;
}

.food-title{
width:20%;
clear:left;
float:left;
}

.food-content{
width:75%;
padding-top:10px;
}

このデザインで記事部分に色を着けたい
サイドバーに色を着けたいなどあればコメント下さい
なお、画像(ここ)はurlのあとの( )内です

ニックネーム kenny at 15:50| Comment(1) | TrackBack(0) | スタイルシート | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんばんわるんるん初めましてわーい(嬉しい顔)

いろいろ参考にさせていただいてます。
有難うございます犬(笑)
Posted by 【 ちっぷ⌒♪ヾ(・・。 at 2008年11月27日 18:22
この記事へのトラックバックURL
http://a-thera.com/tb/923416
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
作業手順
マイブログ右デザイン右スタイルシート下
サンプルクリックで拡大

スタイルシートを選ぶと、現在使用している
テンプレートの
タイトルが表示されます。下
サンプル1

次に変更したいタイトル名をクリックします。
例として「Still life」を選びました。
サンプル2

上このようにタグが出てきますので
これを全て削除します。下
サンプル3

削除後、Still lifeの記事にあるタグをコピーします
マウスを乗せるだけでコピー可能です。
右クリックでコピー。
サンプル4
先ほど削除したテンプレートに貼り付けます。
貼り付け後、記事内容のように
http://*****.a-thera.jp/*****/*****.jpgのところを
アップされた画像のURLに変更後保存です。
サンプル5