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: }

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

1 comment

  1. こんにちは。
    コメントありがとうございます。

    FirefoxのアドインWeb Developerをインストールするとツールバーが現れますが、その中に『情報』というのがあります。
    この中の『ブロック要素のサイズを表示する』、『div要素の順序を表示する』、『要素の情報を表示する』のいずれかでdivのブロックを見ることができます。
    自分がよく使うのは、『要素の情報を表示する』で細かいところまで見ることができます。

    div名が分かったら後はCSSでそのブロックの部分を編集すればその部分が変更できます。

    がんばってください。

コメントを残す