人気ブログランキング | 話題のタグを見る
2005年 04月 05日
スキンのカスタマイズ
CSSの変更方法です。
ここでは、ヘッダとタイトル部の 
 ・フォントの種類
 ・文字の大きさ
 ・文字の色
 ・文字の間隔
について。


○フォントの種類
(例) FONT-FAMILY : "Comic Sans MS", TAHOMA, VERDANA ;

フォントの名称の間に空白がある場合は、ダブルコ-テーション(”)で囲みます。


○文字の大きさ
(例) FONT-SIZE : MEDIUM;

small, medium, largeなど。
20ptのような指定もできます。


○文字の太さ 
(例) FONT-WEIGHT : BOLD;

normal, lighterなど。


○文字の色
(例) COLOR : #AB5D00;

red, pinkなど、名称でも指定できます。


○文字の間隔
LETTER-SPACING : 2PX;

文字の間隔を調整したい時に。


☆参考までに
・大文字、小文字の区別はないようです。
・各項目の指定値(色の名称など)については、ネットや市販の本を参照くださいませ(^^ゞ
・OSやブラウザの種類、バージョンによっては、
機能しないものもあるので、ご注意ください。
・各行の最後の「;」を付け忘れると、うまく機能しないです。



◆◆CSSの修正箇所◆◆
ご参考までに、変更箇所のソースを以下に。
(指定値は、このブログの実際の値とは異なります^^;)


<ブログヘッダ: ブログ名「花と空と風と」の部分>

*フォントの種類、大きさ、文字間隔、太さ
DIV.HEADER {
PADDING : 25PX;
FONT-weight :bold;
FONT-FAMILY : sans-serif, TAHOMA, VERDANA ;
FONT-SIZE : 10PT;
LETTER-SPACING : 2PX;
MARGIN : 0PX 250PX 0PX
}

*文字色はこちら
DIV.HEADER A:LINK {COLOR: #00bfff; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #00bfff; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: #00bfff; TEXT-DECORATION: NONE}

LINKは、未訪問の場合の色。
VISITEDは、既に訪問したことがある場合の色。
HOVERは、マウスカーソルが、この文字上にいる時の色。


<ブログヘッダ: URL「julywind.exblog.jp」の部分>

*フォントの種類、大きさ、文字間隔、太さ
DIV.URL {
FONT-FAMILY : "Comic Sans MS", TAHOMA, VERDANA ;
FONT-SIZE : 15PT;
LETTER-SPACING : 10PX;
MARGIN : 0PX 220PX 0PX
}

*文字色はこちら
DIV.URL A:LINK {COLOR: pink; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: red; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #000080; TEXT-DECORATION: NONE}


<各記事のタイトル>
DIV.POST_TTL {
FONT-SIZE : MEDIUM;
FONT-FAMILY : GEORGIA;
COLOR : #AB5D00;
FONT-WEIGHT : bold;
MARGIN : 15PX 0PX;
}


ソースは以上です。

やってみたらできたのレベルなので、
私もよくわからないことがイッパイなのですが、
何かご不明な点などございましたら、
コメント欄などにお知らせくださいませm(*_ _)m

# by julywind | 2005-04-05 10:58