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

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

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

WS124

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

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

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

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

font-size:24px;

font-size:20px;

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

WS121

左のサイドバーは

#links-left

であることが分かりCSSの

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


1 comment

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

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

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

    がんばってください。

コメントを残す