ブログのデザインはスタイルシート（テンプレート）で決まります。オリジナルブログをデザインするためにはスタイルシートを編集しなければなりません。ブログカスタマイズに必要最低限知っておいた方が良いスタイルシートの基礎知識について説明します。
スタイルシートの基礎知識
スタイルシートは<span>タグ、<div>タグを用いて次のように記述します。<span>タグはインライン要素（前後で改行されない）、<div>タグはブロック要素（前後で改行される）を囲む際に使用します。
<span style="color:red;">テキスト</span>
<div style="color:red;">テキスト</div>
<div style="color:red;">テキスト</div>
<span>、<div>に限らず、<a>などのHTMLタグにもstyle属性を指定することができます。
<a style="color:red;" href="http://www.blogcustomize.com/">ブログカスタマイズ</a>
ページ内のすべての<a>タグに属性を指定するのは面倒なので、<head>〜</head>にまとめて指定を行うことができます。次のように指定するとすべての<a>タグに属性が有効になります。
<head>
<style type="text/css">
<!--
a { color:red; }
-->
</style>
</head>
<body>
<a href="http://www.blogcustomize.com/">ブログカスタマイズ</a>
<a href="http://blogcustomize.seesaa.net/">ブログカスタマイズのブログ</a>
</body>
<style type="text/css">
<!--
a { color:red; }
-->
</style>
</head>
<body>
<a href="http://www.blogcustomize.com/">ブログカスタマイズ</a>
<a href="http://blogcustomize.seesaa.net/">ブログカスタマイズのブログ</a>
</body>
スタイルシートを外部ファイルに定義して、複数のページで共有することができます。
<head>
<link rel="stylesheet" type="text/css" href="styles-index.css">
</head>
<link rel="stylesheet" type="text/css" href="styles-index.css">
</head>
外部ファイルには次のように記述します。スタイルシートのコメントアウトは /* コメント */ です。
a { color:red; } /* リンクの色を赤に設定 */
Seesaaブログはこの形式を採用しています。
ユーザーはこの外部ファイルを編集することでデザインをカスタマイズすることができます。
ユーザーはこの外部ファイルを編集することでデザインをカスタマイズすることができます。
上述のように<a>などのHTMLタグに属性を与えることを、基本セレクタにスタイルシートを設定するといいます。
各タグにクラスを定義することもできます。次の例は<h2>タグにredクラスとblueクラスを定義しています。
h2.red { color:red; }
h2.blue { color:blue; }
h2.blue { color:blue; }
<h2 class="red">これはredクラスです。</h2>
<h2 class="blue">これはblueクラスです。</h2>
<h2 class="blue">これはblueクラスです。</h2>
IDセレクタを指定することもできます。ひとつのドキュメント中に、同じIDセレクタを複数定義することはできません。IDセレクタを定義する場合はセレクタ名の前に「#」をつけます。
#content { font-size:10pt; }
<div id="content">
Seesaaブログでは、基本セレクタ、クラスセレクタ、IDセレクタを使用します。
カンマ（,）を用いることにより、複数の要素に対して同時に属性を定義することができます。
h1, h2 { color:red; }
複数の属性を定義する場合はセミコロン（;）で区切ります。
a {
color:red;
text-decoration:none;
}
color:red;
text-decoration:none;
}
ピリオド（.）で定義すると異なるタグでクラスを共有することができます。
.red { color:red; }
<h1 class="red">これはredクラスです。</h1>
<a class="red">これもredクラスです。</a>
<a class="red">これもredクラスです。</a>
A要素は link（通常のリンク）, visited（読み込み済みのリンク）, active（クリックされた瞬間のリンク）, hover（マウスを重ねたときのリンク）といった定義済みのクラスを持っています。定義済みクラスのスタイルを変更する際はコロン（ : ）で指定します。
A:link { color:green; }
A:visited { color:blue; }
A:active { color:red; }
A:hover { color:red; }
A:visited { color:blue; }
A:active { color:red; }
A:hover { color:red; }
1つのタグで複数のクラスを同時に指定することができます。
.red { color:red; }
.bold { font-weight:bold; }
.bold { font-weight:bold; }
<span class="red bold">赤い太字</span>
「あるタグに囲まれているときだけ」といった条件を指定することもできます。
次の例では<td>タグの中に現れる<a>タグにのみ属性を指定しています。
次の例では<td>タグの中に現れる<a>タグにのみ属性を指定しています。
td a { text-decoration:none; }
<td><a href="http://www.blogcustomize.com/">ブログカスタマイズ</a></td>