スタイルシートの変更でデザイン自由

スタイルシートを変えてみました。
まずは、タイトルを画像に。。。
そして、背景を変更。
この色の部分は追加して下さい。
ご注意(タイトル画像の幅は必ず700pxでお願いします。)

画像をURL指定する場合は、indexファイルや画像などが見える
サーバーディレクトリに置いてある必要があります。



#wrapper {
width: 740px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #000000;    ←中央部だけ背景色を変える
}

#header {
padding: 20px;
border-bottom: 1px solid #ccc;
height: 210px;       ←画像高さ調整
width: 700px;       ←画像幅調整
background-image: url(http://www.○○○○.net/title.gif);  ←タイトル画像指定   background-repeat: no-repeat;

}

次に文字色の変更です。

スタイルシートのこの部分を変更
この色の部分は追加して下さい。
背景色と背景画像はどちらか1つを追加して下さい。


body {
font-size: 13px;
font-family: "MS Pゴシック";
background-color: #000000; ←背景色指定
background-image: url(http://www.○○○○.net/○○○.gif); ←背景画像指定
color: #333;      ←投稿記事の文字色指定
}

カレンダー部分の色変更について

ここでは、投稿記事の投稿日の表示色の変更と
カレンダー部の各色変更部分を記載しています。

スタイルシートの文字の大きさも勿論変更出来ますが、
スタイルシートが崩れる恐れもありますので、各部分の
文字の大きさ変更では、よく確認されて変更して下さい。


.entry .foot li {
display: inline;
font-size: 11px;
color: #999;        ←投稿記事の日付文字の文字色
}


/* =================================== */
/* カレンダー */
/* =================================== */

.calendar {
width: 170px;
text-align: center;
}
.calendar .month {
font-size: 12px;
font-family: Verdana;
color: #666;      ←カレンダーの年・月 表示色
}
.calendar .week {
margin-top: 3px;
font-size: 10px;
font-family: Arial;
color: #666;      ←カレンダーの曜日 表示色
}
.calendar .week div {
width: 22px;
float: left;
}
.calendar .day {
margin-top: 2px;
font-size: 10px;
font-family: Verdana;
color: #666;      ←カレンダーの日付 表示色
}
.calendar .day div {
width: 20px;
height: 18px;
line-height: 18px;
float: left;
background: #eee;   ←カレンダーの背景色
border: 1px solid #fff;  ←カレンダーの背景枠線色
}

投稿記事の左部のリストマークの色変更

投稿記事の左部のリストマークの色変更

.entry .head {
padding: 5px;
color: #000;
font-size: medium;
border-left: 5px solid #aaa;   ←記事タイトルのリストマークの色変更
}

各枠線の色を変更する。

スタイルシートの各部分の枠線色の変更方法

#wrapper {
width: 740px;
margin: 0 auto;
border-left: 1px solid #ccc;  ←左の枠線の色を変える
border-right: 1px solid #ccc;  ←右の枠線の色を変える
background-color: #000000;   ←中央部だけ背景色を変える
}

#header {
padding: 20px;
border-bottom: 1px solid #ccc;  ←タイトル画像の下の線色を変える
height: 210px; ←画像高さ調整
width: 700px;  ←画像幅調整
background-image: url(http://www.○○○○.net/title.gif); ←タイトル画像指定
background-repeat: no-repeat;

.entry .foot {
clear: both;
text-align: right;
border-bottom: 1px solid #ccc;  ←投稿記事部の下の線色を変える
}
Calendar
«  May 2012  »
S
M
T
W
T
F
S

 
 
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
31
 
 

search this blog.
category
archives
links
others
Copyright (C) 2005 A-auc & A-auc・hosting. All Rights Reserved