以前、そんなカッチョイイ改造を見てから、やってみたいなあと思って数ヶ月。
やりましたよ！！やりましたですよ！！（￣д￣）さて、改造ですが、３カラムのものをベースにします。
↓のような感じで適当にやってみました。
postscript：てな上記の記事を書いてから、ブログが大変な事になったのでございます。
一時期、各記事へのリンクなども壊れまくってました。
むふう。
仕方がないので、普通の３カラムに戻して現在に至る。
誰かどこが悪かったのか教えて下され。（-＿-）
（トップページは大丈夫だったのに、記事を
クリックすると、記事部分が150pxくらいの幅になってしまっていたのココロよ…）
body {
font-family: Arial, Helvetica, sans-serif;
background-
image:url(
http://画像のURL);background-repeat:repeat-xy;←今回はココもrepeat-yからxyにしてみる。これで全方位に背景の繰り返しだ！！background-position:left;
background-
color:#000000;
margin:0px;
padding:0px;
}
A { text-decoration: underline;
color:#006699;
}
h1 {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-weight:bolder;
font-
size:30px;
}
h1 a{
color:#99ffff;
font-family:arial, Helvetica;
text-decoration: none;
font-family:sans-serif;
font-weight:bolder;
margin-top:0px;
}
h2 {
padding: 0px;
font-size:
100%;
font-weight:bolder;
margin:0px;
}
h3 {
padding: 0px;
font-size:14px;
font-weight:bold;
font-family:arial, Helvetica;
}
H3 a{
padding: 0px;
font-weight:bolder;
font-size:100%;
color:#FFFFFF;
}
#banner{
font-family:arial, Helvetica;
color:#69C;
margin:0px;
width:100%;
padding:0px;
}
.description {
color:#FFF;
margin-left: 20px;
font-size:16px;
font-family:sans-serif;
font-weight:bold;
line-height:140%;
}
.navi {
color:#00F;
font-size:90%;
text-align:center;
margin-bottom:10px;
width:100%;
}
#content {margin-bottom:30px;
margin-top:25px;
margin-left:10px;
margin-right:10px;
float:left;
width:150pxここで真ん中にくる部分（普段は記事）の幅を決定するので、サイドバーに丁度いいように小さく設定。更に、最初は％だったのだが、固定したかったのでpxにする}
.blog {
}
.blogbody {
color: #ccffff;
font-size:100%;
background:#000000;
margin-bottom:10px;
border:1px #6633cc solid;
background:#000000;
}
.date{
font-size: 100%;
color: #000000;
font-weight:bold;
padding:0px;
text-align:right;
background:#999999
margin:0px;
}
.
title{
color: #FFFFFF;
padding:2px;
font-weight:bold;
background:#006699;
margin:0px;
}
.title a{
border:none;
}
.text{
font-size: 95%;
color: #ccffff;
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
background:#000000;
}
.text a{
color:#0000FF;
}
.posted{
font-size: 80%;
color: #000;
text-align: right;
margin-top:10px;
margin-bottom:5px;
padding:3px 3px 3px 5px;
}
.posted a{
color:#00F;
text-decoration: underline;
}
#links-left {font-weight:normal;
width:430px;←ここで、左サイドバーにいつもはあたる部分の幅を決定しているので、記事に丁度いいサイズへ。これも％→pxfloat:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px;
}
#links {font-weight:normal;
width:150px;←ここで、右サイドバーにいつもはあたる部分の幅を決定float:left;
margin-left: 5px;
margin-right: 5px;
margin-top:25px;
}
#calendar {
font-size:95%;
font-weight:normal;
background:#CFCFCF;
border:1px solid #000;
width:100%;
}
#calendar table {
width:100%;
}
.calendarhead {
color:#FFFFFF;
background:#000000;
font-size:80%;
font-weight:bold;
padding-top:3px;
padding-bottom:3px;
text-align:center;
}
.calendarday {
font-size:80%;
font-weight:normal;
color: #003333;
background:#CFCFCF;
}
.calendarday a{
font-size:100%;
color:#0000FF;
text-decoration: underline;
}
.sidetitle {
color:#FFFFFF;
font-size:80%;
font-weight:normal;
padding:5px;
margin-top:10px;
font-weight:bold;
width:100%;
background:#000000;
}
.side {
color:#000;
font-size:80%;
font-weight:normal;
background:#CFCFCF;
line-height:140%;
padding:5px;
width:100%;
border:1px solid #000;
}
.powered {
line-height:120%;
padding:2px;
margin-top:20px;
width:100%;
text-align:center;
}
.syndicate {
font-size:x-small;
line-height:140%;
padding:2px;
margin-top:15px;
text-align:center;
width:100%;
margin-bottom:20px;
}
#comments {
width:430px; margin-top:25px;
background:#CFCFCF;
border:1px dotted #FFF;
}
.comments-head{
background:#006699;
color:#FFF;
font-size:90%;
font-weight:normal;
line-height:140%;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
border-bottom:1px dotted #999;
}
.comments-body {
color:#003333;
font-size:90%;
font-weight:normal;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
border-bottom:1px dotted #999;
}
.comments-post {
color:#003333;
font-size:90%;
font-weight:normal;
padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
#trackback {
width:430px; margin-top:25px;
background:#CFCFCF;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
border:1px dotted #FFF;
}
.trackback-url {
color:#003333;
font-size:100%;
font-weight:normal;
background:#FFF;
line-height:140%;
padding:5px;
border:1px dotted #999;
}
.trackback-body {
color:#003333;
font-size:100%;
font-weight:normal;
background:#FFF;
line-height:140%;
padding-bottom:10px;
padding-top:10px;
border-bottom:1px dotted #999;
}
.trackback-post {
color:#003333;
font-size:x-small;
font-weight:normal;
background:#FFF;
}
#footer{
clear:left;
width:100%;
}
.copyright{
font-size:80%;
width:100%;
text-align:center;
}
posted by 國王 at 21:23| ウィーン
|
Comment(5)
|
TrackBack(0)
|
CSSのお勉強
|
|
| 
←
