SeeSaaブログのデザインをカスタマイズする(CSSの見かた)

サイトを作ったことのある方は当然知っていることなのですが、CSSの簡単な見方を説明します。

まずはWeb開発に便利なツール『Web Developer』で書いたFireFoxのアドオンを使うと便利です。

WS124

Divの要素を表示させるとこのようになります。
これで変更したいCSSの部分を確認しながらCSSを書き換えていくこととなります。

たとえば、タイトルの部分は
WS119 
となって、CSSの部分は

   1: h1 {
   2: margin:0px;
   3: padding-top:50px;
   4: padding-bottom:10px;
   5: font-weight:bolder;
   6: font-size:24px;
   7: font-family:Verdana;
   8: }

であることが分かります。

そして、大きさを変えたいときは

font-size:24px;

font-size:20px;

などと変更すれば文字は小さくなります。

WS121

左のサイドバーは

#links-left

であることが分かりCSSの

   1: #links-left {
   2: font-weight:normal;
   3: width:180px;
   4: float:left;
   5: margin: 0px 0px 0px 0px;
   6: text-align:left;
   7: }

この部分を変えることで変更できます。