2006年05月27日

記事のバックには違う色を塗る

 記事の部分のバックを、違う色で塗ってみます。
 ついでに文字の色も変えてみます。
 .blog {  } に、color:#1E9B23; と、background-color:#FFF5BF; を追加します。

 赤文字部分が 追加部分です。
.blog {
margin:0px;
text-align:left;
margin-left:15px;
color:#1E9B23;
background-color:#FFF5BF;
}
posted by わいずふぁくとりい at 22:12| Comment(0) | TrackBack(0) | ブログの塗り絵をしてみよう | このブログの読者になる | 更新情報をチェックする

塗り残した上下にも塗る

 ブログ全体の背景に色を塗りましたが、上の部分と下に、ぽっかり白い部分が残っています。
 この部分にも塗ってみたいと思います。
 同じ色を塗った方が、いいのかも知れませんが、今回はわかりやすくするために少し違う色を塗ります。
 #banner {  } と、#footer {  } の、background-color:#FFF;を編集します。

 これを行っても、まだ上のほうに塗り残しが、残ります。
 これは、画像の一部になっているので、今のところ仕方ありません。

 編集前はつぎのとおりです。

#banner{
font-family:arial, Helvetica;
height:140px;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/orange/header.gif);
background-repeat:no-repeat;
background-color:#FFF;
}

 これをつぎのように編集します。違いは赤 文字部分です。

#banner{
font-family:arial, Helvetica;
height:140px;
margin:0px;
padding:0px 0px 0px 0px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/orange/header.gif);
background-repeat:no-repeat;
background-color:#FC7F87;
}

 #footerも同じように。編集前。

#footer{
clear:left;
padding:20px 0px; 5px 0px
text-align:center;
height:80px;
background-color:#FFF;
}

 編集後

#footer{
clear:left;
padding:20px 0px; 5px 0px
text-align:center;
height:80px;
background-color:#FC7F87;
}

posted by わいずふぁくとりい at 10:58| Comment(0) | TrackBack(0) | ブログの塗り絵をしてみよう | このブログの読者になる | 更新情報をチェックする

バック全体に色をつける

 このブログでは、スタイルシートを編集して、ブログの色を変えてみたいと思います。
 まずは、ブログのバック全体に、ピンクっぽい色を塗ってみます。
 スタイルシートを開くと最初に現れる、body {  } のなかの、background-color:#FFF;を編集します。
 スタイルシートの編集は、[デザイン]−[スタイルシート]で、スタイルシートの名称をクリックすると行えます。

 編集前はつぎのとおりです。

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://blog.seesaa.jp/img/bg/orange/bg.gif);
background-repeat:repeat-x;
background-color:#FFF;
}

 これをつぎのように編集します。違いは赤 文字部分です。

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(http://blog.seesaa.jp/img/bg/orange/bg.gif);
background-repeat:repeat-x;
background-color:#FDEAF0;
}

posted by わいずふぁくとりい at 00:29| Comment(0) | TrackBack(0) | ブログの塗り絵をしてみよう | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。