めざせマイスキン:CSS編集 序１ 明解編

• 「CSS編集」って…。
  [ 2004-05-30 10:21 ]

今回は「CSS編集」をさぐります。タイトルに「…」がついています。そう、気弱です。

CSSは P {font-size:11px} などのように「<P>のフォントサイズは11ピクセルにします」と指定されます。
ボックス(DIV)の場合ですとCLASS名やID名がつけられ、例えばHTMLで<DIV CLASS=abc>～</DIV>とあればCSSでDIV.abc{font:BOLD}というように記述され、「DIVの間のabcというクラス名がつけられている箇所のフォントは太字」となります。
しかし…。CSSを読んだらデフォルトのHTMLで指定されていないCLASS名が３分の２以上出現。
CLASS名がわからないとなると…名前の意味あいから推測したり実際CSSをいじって確認しなきゃならないのかしら？
わかりやすい箇所もありますし自分でやっている分にはそれでオーライですけどその私のあやふやな解釈をこのブログで公開するのって…間違い率高そうだし迷惑をおかけしたりして？

これに関してはexciteさんは「ここまでなら好きにして。でもこれ以上いじくりたいなら流れを汲んで自分で調べてん」というスタンスかしら？
それともなにかしら明快な方法があって…わたしがアッフォーなだけ？(T_T)

ぐちぐち言わないっ、TOMO。前に進むのよっ、がんばー。おー。
とりあえずCLASS名がHTMLで指定されている明解編をば…。

私の使用しているのは「C. 2列のレイアウト-左側にメニュー」タイプなのですがデフォルトのCSSはこちらに置いてみました。
クリックすると別窓が開いて参照できます。順にナンバリングしました。
※別窓を見ることは出来ますが、このページ内に同時記入することにしました[2008.1.7]
明解編はこの1～21、24,25です。

※この文を書いている時点(2004.5.30)でのデフォルト画面のスクリーンショットはこちらです。ちと重め55kbです。
※左メニューの「HTML編集 C」にある図も参照するとわかりやすいかもしれません。
※色指定は見た感じの色で表現しています…。
※CSSをおわかりの方は以下のゆるい訳文(？)を読んで「頑張っているな…」と微笑んで下さい。
※私の環境はWindowsXP HomeEdition＋IE6.0です。

　　追　記　

項目名(セレクタ)は基本スキンABC共通です。
基本スキンDは17,18行が違います。17,18行の後は２行分増えるので、その後は21行→23行、22行→24行というふうに２行分ずつずれていきます。
属性値は各スキンによって違います(共通部分が多いですが)。

--------------------------------------------------


1 BODY

{ BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; }

BODY
{背景:白;　マージン:0ピクセル;　パディング:0ピクセル;}

2 BODY,TD,DIV,LI

{ FONT-SIZE : SMALL; FONT-FAMILY : VERDANA,ARIAL,SANS-SERIF; LINE-HEIGHT : 150%; COLOR : #000; }

BODY,TD,DIV,LI
{フォントサイズ:小;　フォントファミリー:VERDANA,ARIAL,SANS-SERIF;　行送り:150%;　文字色:黒;}

3 A:LINK

{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

未訪問リンク
{文字色:青;　テキスト装飾:なし;}

4 A:VISITED

{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

訪問済みリンク　
{文字色:青;　テキスト装飾:なし;}

5 A:ACTIVE

{ COLOR: #0000FF; TEXT-DECORATION: NONE; }

リンク部をクリックしたとき　
{文字色:青;　テキスト装飾:なし;}

6 A:HOVER

{ COLOR: #813888; TEXT-DECORATION: UNDERLINE; }

リンク部分にマウスカーソルが乗ったとき　
{文字色:紫;　テキスト装飾:下線;}

※7-15は上の図の「上部」です

7 DIV.HEADER

{ FONT : BOLD LARGE/100% Courier New,TAHOMA; TEXT-ALIGN:LEFT;}

ヘッダー（タイトルの「めざせマイスキン」部分）　
{フォント:太字，大きめ/100%，Courier New,TAHOMA; テキストの水平位置:左寄せ;}
※ここでの「％」数値は行送り(１行の高さ)です

8 DIV.HEADER A:LINK

{ COLOR: #000; TEXT-DECORATION: NONE; }

ヘッダーのリンク　
{文字色:黒;　テキスト装飾:なし;}

9 DIV.HEADER A:VISITED

{ COLOR: #000; TEXT-DECORATION: NONE; }

ヘッダーの訪問済みリンク　
{文字色:黒;　テキスト装飾:なし;}

10 DIV.HEADER A:HOVER

{ COLOR: #888; TEXT-DECORATION: NONE; }

ヘッダーのリンク部にマウスカーソルが乗った場合　
{文字色:黒;　テキスト装飾:なし;}

11 DIV.URL

{ FONT : X-SMALL/100% VERDANA,TAHOMA; MARGIN : 10PX 0PX 20PX; TEXT-ALIGN:LEFT;}

URL(「tomomap.exblog.jp」部分)　
{フォント:かなり小さく/100%，VERDANA,TAHOMA;　マージン:上は10ピクセル,左右は0ピクセル,下は20ピクセル;　テキストの水平位置:左寄せ:}

12 DIV.USERMENU

{ FONT : 8PT/100% VERDANA; TEXT-ALIGN : RIGHT; MARGIN-BOTTOM : 7PX; }

ユーザーメニュー(「センター | 投稿 | 設定 」部分)　
{フォント:8ポイント/100%，VERDANA;　テキストの水平位置:右寄せ;　下のマージン:7ピクセル;}

13 DIV.USERMENU A:LINK

{COLOR: #727272; TEXT-DECORATION: NONE}

ユーザーメニューのリンク　
{文字色:灰色;　テキスト装飾:なし;}

14 DIV.USERMENU A:VISITED

{COLOR: #727272; TEXT-DECORATION: NONE}

ユーザーメニューの訪問済みリンク　
{文字色:灰色;　テキスト装飾:なし;}

15 DIV.USERMENU A:HOVER

{COLOR: #98A6E4; TEXT-DECORATION: UNDERLINE;}

ユーザーメニューのリンク部にマウスカーソルが乗った場合　
{文字色:灰色がかった水色;　テキスト装飾:なし;}

※16-19は上の図の「左部」です。

16 DIV.PROFILE

{ WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:LEFT;}

プロフィール(ロゴ画像「めざせマイスキン」、説明部「マイスキンつくりたいな」 ID部「by tomo0640820 」)　
{幅:150ピクセル;　パディング:上0ピクセル,左右0ピクセル,下10ピクセル;　行送り:130%;　オーバーフロー時:表示しない;　テキストの水平位置:左寄せ;}

17 DIV.MN

{ TEXT-ALIGN:LEFT; }

メニュー(カテゴリ、以前の記事、エキサイトブログ、最新のコメント等)　
{テキストの水平位置:左寄せ;}

18 DIV.MNTTL

{ WIDTH : 150PX; BORDER-BOTTOM : 1PX #AAA SOLID; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; }

メニューのタイトル部分　
{幅:150ピクセル;　下のボーダーライン:1ピクセル，薄めの灰色，実線;　パディング:上は2ピクセル,左右は0ピクセル,下は0ピクセル;　マージン:上は25ピクセル,左右は0ピクセル,下は10ピクセル;}

19 DIV.MEMOBODY

{ WIDTH : 150PX; OVERFLOW : HIDDEN; }

メモ帳の本文　
{幅:150ピクセル;　オーバーフロー時:表示しない;}

※20-25は上の図の「メイン」です。

20 DIV.POST

{ MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}

投稿全体(投稿文のタイトルからコメントまで)　
{下のマージン:50ピクセル;　テキストの水平位置:左寄せ;}

「BORDER:1PX SOLID #FF0000;」(＝「ボーダー:1ピクセル 実線 赤;」です)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。('04.11.25追記)

21 DIV.POST_HEAD

{ BORDER-BOTTOM : 1PX #CCC SOLID; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }

投稿のヘッダー部(タイトルと「編集 | 削除」メニュー)　
{下のボーダーライン:1ピクセル，より薄めの灰色，実線;　下のマージン:15ピクセル;　下のパディング:3ピクセル;}

「BACKGROUND-COLOR: #FFFF00;」(＝「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

24 DIV.POST_BODY

{ LINE-HEIGHT : 150%; WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }

投稿文　
{行送り:150%;　幅:500ピクセル;　下のマージン:30ピクセル;　オーバーフロー時:表示しない;}

「BACKGROUND-COLOR: #FFFF00;」(＝「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

['05.04.20追記]
「DIV.POST_BODY」は「以前の記事」の「○年○月」を選択した時に表示されるページにも反映されます。
表示されるページの上部にある月の記事タイトル一覧の部分です。

「BACKGROUND-COLOR: #FFFF00;」(＝「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
当ブログの2004年09月の分です。(画像は縮小されています)

25 DIV.POST_TAIL

{ FONT : 11PX/150% TAHOMA; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

投稿の末尾あたり(作成者、登録日、パーマリンク、トラックバック、コメント)　
{フォント:11ピクセル/150%，TAHOMA;　上のマージン:10ピクセル;　テキストの水平位置:右寄せ;}

「BACKGROUND-COLOR: #FFFF00;」(＝「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

※20,21,24,25の水色線部分は'04.11.25に追記。