マウスやすめ～パソコンに疲れたら・・・ 自分癒しのBLOG～

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

Ξ 2009/3/20 金曜日

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

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

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

たとえば、タイトルの部分は
 
となって、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;

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

左のサイドバーは

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

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

2 Responses to ' SeeSaaブログのデザインをカスタマイズする（CSSの見かた） '

Subscribe to comments with RSS or TrackBack to ' SeeSaaブログのデザインをカスタマイズする（CSSの見かた） '.

1. 園田俊博 のコメント
   
   

   2009/7/15 水曜日 at 3:28 PM

   はじめまして。
   園田と申します。
   ブログ初心者で毎日汗ダクダクになっていますが、一向に前に進みません(パソコン音痴です)。バーをカスタマイズする説明を何度見てもわからずがっかりしています。CSSの検証でインストールをした後に「要素を表示する」と説明書きがありますですが、ツールバーのどこの部分でしょうか。教えて下さい。
   恥ずかしい質問ですが、よろしくお願いします。

2. Mouse Master のコメント
   
   

   2009/7/16 木曜日 at 8:38 PM

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

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

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

   がんばってください。

Leave a reply

| → Comments (2) | ∇ Seesaa |