人気ブログランキング | 話題のタグを見る

マイスキンつくりたいな
by tomo0640820
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カテゴリ
目次
このサイトについて
とりあえずマイスキン
HTML編集 A
HTML編集 B
HTML編集 C
HTML編集 D
CSS編集 序1 明解編
CSS編集 序2 模索編
CSS編集の友
いざマイスキン
マイスキン人リンク(TB)
お便利サイト
以前の記事
2004年 10月
2004年 09月
2004年 08月
2004年 07月
2004年 06月
2004年 05月
フォロー中のブログ
Feeling...感じ...
ちゃめ・家
【 d r o p s ...
FOOTBALL STYLE
ごはんですよ。
のらくら庵
ライムのブログ
流れ星の散歩道(^_-)-☆
極私的パパ馬鹿日誌
じゅん☆ブログ
:..: めもにっき。:...
はい こちらサポセン。
+ music life +
Roller skate...
でも、がんばる!
Fan Fan Life...
トルコ旅日記
喜 怒 哀 楽
ぽっとの陽だまり研究室
MIURAKE
ぷぷぷのぶ
Loophole
blueblueclub
恐悦至極に存じます。
しゃんくのつぶやき
しあわせの箱庭
ぱーむらいふ
超初心者一眼レフ日記。
私の人生、こんなもん 涙...
人生の地図
today's chan...
そんな目で見るなよ
雀屋だらだらday's
スラドット60
norah'#
3gatsu-USAGI
***amedama ...
My funny Val...
Bostonterrie...
たびcamera
お魚好きなねこ
MINT TIME
エキブロ外リンク
Anemosphere-Blog
TOMOのother sites
tomolatte
最新のトラックバック
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
CSS編集 序2 模索編
前回の「CSS編集 序1 明解編」の続きです。迷走しています。

前回と同様の前置きですが
私の使用しているのは「C. 2列のレイアウト-左側にメニュー」タイプなのですがデフォルトのCSSはこちらに置いてみました。
クリックすると別窓が開きます。同時に開いて見比べると分かりやすいかと思います。
※別窓を見ることはできますがこのページ内に同時記入することにしました[2008.1.8]
順にナンバリングしてあり、模索編はこの22,23、26~58です。

※この文を書いている時点でのデフォルト画面(2004.5.30)のスクリーンショットはこちらです。ちと重め55kbです。
※左メニューの「HTML編集 序1」「HTML編集 序2」にある図も参照するとわかりやすいかもしれません。
※色指定は見た感じの色で表現しています。

この「めざせマイスキン」を参考にしようと思っている方は 他にも詳細な解説ブログがありますのでまずそちらを見て下さい(爆
私はまだ実際にマイスキンをこさえてないので言ってることがかなりあやしいと思います。
間違い箇所は見つけ次第順次訂正しますというか発見して下さるとありがたいです。
そのうちexciteさんが解説ページを作ってくださることを願って…。(-人-)
あーでもフリーなブログなのにそれは高望みというものかしら…。

  追 記 
項目名(セレクタ)は基本スキンABC共通です。
基本スキンDは2行分増えています。ここCで22行目でしたら、Dでは24行目になります。
属性値は各スキンによって違います(共通部分が多いですが)。

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


22 DIV.POST_TTL
{ FONT : BOLD 15PT/130%;}

投稿文のタイトル
{フォント:太字 15ポイント/130%}

これは「POST_TTL」というクラス名から投稿文のタイトルと察することができたのですが私が使用しているレイアウト「C. 2列のレイアウト-左側にメニュー」はデフォルトで適用されていません。投稿タイトル…太字になってない。
最初「???」だったのですが他のエキサイトブログ提供スキンを参考にすると(例えば「レインボー」)適用されてます。
投稿文タイトルは実際にマイスキンをつくる時にはいじれたほうがよいからどうにかせねばなりませぬ。
まず「HTML編集」の本文
<TD WIDTH=80%><$postsubject$></TD>
のところを
<TD WIDTH=80%><DIV
CLASS=POST_TTL>
<$postsubject$></DIV></TD>
と書き換えてみました。プレビューだとうまくいきます。しかし、実際には適用されません。そこで「CSS編集」の方を再度読むと
DIV.POST_TTL{ FONT : BOLD 15PT/130%}
となっています。ん、フォントファミリーが指定されていない。とりあえず何かを入れてみよう。…英字だけど
DIV.POST_TTL{ FONT : BOLD 15PT/130% VERDANA;}
と書き足してみました。
(^^ うまくいきました。やほう。(今の時点では適用していません)

※適用しましたら下の図のようになりました。
CSS編集 序2 模索編_a0003861_142224.gif

23 DIV.POST_ADMIN
{ TEXT-ALIGN : RIGHT;}

投稿文の「編集|削除」部分
{テキストの水平位置:右寄せ}

これも22と同様に適用されていなかったので実際にいじる場合になりましたら「HTML編集」本文側
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD>

<TD WIDTH=20% ALIGN=RIGHT><DIV CLASS=POST_ADMIN><$postadmin type=1$></DIV></TD>
と書き足します。
※CSS側の右寄せは適用されていませんがHTML側でも右寄せを指定してあるので結果的に右寄せになっているようです(くどい文だわ)


26 DIV.COMMENT
{ BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7; PADDING : 15PX; MARGIN : 20PX 0PX; }

投稿文下の「Comments」をクリックした時に現れるコメントボックス全体
{ボーダー:1ピクセル 灰色っぽい水色 実線; 背景:更に薄い水色; パディング:15ピクセル; マージン:上下20ピクセル、左右0ピクセル}

27 DIV.COMMENT_BODY
{ MARGIN-BOTTOM : 20PX; LINE-HEIGHT : 130%; }

コメントボックス内の寄せられたコメント本文
{下のマージン:20ピクセル; 行送り:130%}

28 DIV.COMMENT_TAIL
{ MARGIN : 8PX 0PX 5PX; FONT : 8PT/150% TAHOMA; COLOR : #777; }

コメントボックス内の「Commented by コメンターのID at 日時×」
{マージン:上8ピクセル、左右0ピクセル、下5ピクセル; フォント:8ポイント/150% TAHOMA; 文字色:灰色}

29 DIV.COMMENT_INPUT
{ MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }

コメントボックス内下部のコメントを入力するテキストエリア
{上のマージン:20ピクセル; 上のボーダー:1ピクセル 灰色 点線(ドット); パディング:20ピクセル;}

{BACKGROUND-COLOR:YELLOW;}と追加指定した場合下の図のようになりました。
※画像は縮小してあります。
CSS編集 序2 模索編_a0003861_1433256.gif

30 DIV.COMMENT_LINE
{ BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; }

投稿文下の「Trackback」と「Comments」を両方クリックした場合の中間部分
{上のボーダー:1ピクセル 濃いめの灰色 点線(ドット); マージン:上10ピクセル、左右0ピクセル、下15ピクセル; }


31 DIV.TRACK_TOP
{ LINE-HEIGHT : 170%; }

投稿文下の「Trackback」をクリックした場合に現れるボックス上部 (トラックバックURL : http://tomomap.exblog.jp/tb/××× の文字とトラックバックする(会員専用) [ヘルプ]の2行分)
{行送り:170%;}

32-33 迷走中。

※34-36はアップロードした画像のマージンが指定されています。
画像アップロードのポップアップウィンドウでは中央、左寄せ、右寄せが指定できます。

CSS編集 序2 模索編_a0003861_1451260.gif


34 IMG.IMAGE_TOP
{ MARGIN-BOTTOM : 15PX; }

画像を上部に設置した場合
{下のマージン:15ピクセル}

実際には上部に設置というのはポップアップウィンドウの選択肢にありません。
これをあえて適用させたい場合は投稿画面でとりあえずタグを生成し、
例:[#IMAGE|a0033273_23263578.gif|200409/04/73/|mid|150|100#](中央選択時)ならば
  [#IMAGE|a0033273_23263578.gif|200409/04/73/|top|150|100#]
と書き換えます。
CSS編集 序2 模索編_a0003861_146122.gif


35 IMG.IMAGE_LEFT
{ MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; TEXT-ALIGN:LEFT}

画像を左寄せに設置した場合
{右のマージン:15ピクセル; 下のマージン:15ピクセル; テキスト(この場合画像ですが)の水平位置:左寄せ;}

CSS編集 序2 模索編_a0003861_1465866.gif
左寄せは上部に設置することを前提にしているようで上のマージンは指定されていません。


36 IMG.IMAGE_MID
{ MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }

画像を中央に設置した場合
{上のマージン:15ピクセル; 下のマージン:15ピクセル;}

CSS編集 序2 模索編_a0003861_1481812.gif


ここまできておや?と思うことが。
何故かCSS編集には右寄せのケースが存在しません。
デフォルトのままポップアップウィンドウで右寄せ指定をしてしまうと下の図のようになり、マージンがとられません。
CSS編集 序2 模索編_a0003861_1491197.gif
左寄せと同様に15ピクセルのマージンをとりたい場合はCSS編集で新たに
IMG.IMAGE_RIGHT{ MARGIN-LEFT : 15PX; MARGIN-BOTTOM : 15PX; TEXT-ALIGN:RIGHT;}
と書き足します。
CSS編集 序2 模索編_a0003861_1493993.gif


37-38 迷走中。

39 IMG.LOGO
{ MARGIN-BOTTOM : 10PX; }

左上部のロゴ画像
{下のマージン:10ピクセル}

40 DIV.BANNER
{ MARGIN : 30PX 0PX 10PX; }

左部Exciteのバナー
{マージン:上30ピクセル、左右0ピクセル、下10ピクセル;}

41 .SMALL
{ FONT-SIZE : 11PX; }

左部最新のコメント下の「by コメンター」
{フォントサイズ:11ピクセル;}


※42 43をみてね

43 .TIME
{ FONT : 8PT/150% TAHOMA; TEXT-ALIGN : LEFT; }

投稿文下の「by」と「年月日時間」
{フォント:8ポイント/150% TAHOMA; テキストの水平位置:左寄せ;}

クラス名は「TIME」であるけれど 年月日も適用されている。対して42の「DATE」は値をいじっても変わらない。このコンパクトな場所で別々に指定しても効率的ではなさそうだしそういうものだと割り切ればいいのかしら…?

フォントを16ポイント、斜体に変更した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1502814.gif


['04.11.18追記]
「.TIME」はTrackbackをクリックした際に現れるTrackback情報部分の「トラックバックURL」右側にも掛かるようです。(柿渋さん情報)
Trackbackを開いた場合の変更(フォント16ポイント&斜体)後は下の図です。


※この辺のカスタマイズはsaradhinaさんの記事が参考になります。
ぜひにご訪問を。


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

フォントを16ポイント、斜体に変更した場合下の図のようになりました
当ブログの2004年09月の分です。(画像は縮小されています)



44 .AUTHOR
{ FONT : BOLD 8PT TAHOMA; }

投稿文下のby作成者の「ID」部分
{フォント:太字 8ポイント TAHOMA;}

フォントを8ポイントから16ポイントに変更した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1565129.gif


45 .TXTFLD
{ FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }

29のテキストエリア内の入力フィールド
{フォントサイズ:9ポイント; 文字色:黒; ボーダー:1ピクセル 実線 濃い灰色; 背景:白;}

フォントサイズを24ポイントに変更した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1572043.gif


※46 クラス名は「SUBMIT」なので「送信」ボタンかと思いきやいじっても適用されない。うー。

47 DIV.CAL_TOP
{ }

カレンダー上部
{指定なし}

{BORDER:1PX SOLID RED;}と指定した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1575047.gif


48 DIV.CAL
{ MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;}

カレンダー全体
{マージン:上20ピクセル、左右:0ピクセル、下20ピクセル; 幅:150ピクセル; テキストの水平位置:中央寄せ;}

{BORDER:1PX SOLID RED;}と追加指定した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1581279.gif


49 DIV.CAL_HEAD
{ WIDTH : 150PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}

カレンダーヘッド(フォントで指定した場合、月年。「<」と「>」は含まない)
{幅:150ピクセル; フォント:8ポイント/150% VERDANA; テキストの水平位置:中央寄せ; パディング:上下4ピクセル 左右0ピクセル; 下のマージン:10ピクセル;}

フォントを8ポイントから16ポイントに変え、
{BORDER:1PX SOLID RED;}と追加指定した場合
下の図のようになりました

CSS編集 序2 模索編_a0003861_1584069.gif


50 DIV.CAL_BODY
{ WIDTH : 150PX; TEXT-ALIGN : CENTER;}

カレンダー本体
{幅:150ピクセル; テキストの水平位置:中央寄せ;}

{BORDER:1PX SOLID RED;}と追加指定した場合
下の図のようになりました

CSS編集 序2 模索編_a0003861_159591.gif


51 DIV.CAL_BOTTOM
{ }

カレンダー下部
{指定なし}

{BORDER:1PX SOLID RED;}と指定した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_1593395.gif


52 .CAL
{ FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }

カレンダーのタイトル「<」と「>」、当日以外の日付数値
{フォント:7ポイント/170% VERDANA; テキストの水平位置:中央寄せ;}

フォントを7ポイントから12ポイントに変え、
{BORDER:1PX SOLID RED;}と追加指定した場合
下の図のようになりました

CSS編集 序2 模索編_a0003861_20570.gif


53 .CAL_DAY
{ FONT : BOLD 7PT/170% VERDANA; TEXT-ALIGN : CENTER; }

カレンダー上部の曜日「MTWTF」
{フォント:太字 7ポイント/170% VERDANA; テキストの水平位置:中央寄せ;}

54 .CAL_SUN
{ FONT : BOLD 7PT/170% VERDANA; COLOR : #D36654; TEXT-ALIGN : CENTER; }

カレンダー上部の曜日「S」(日曜日)
{フォント:太字 7ポイント/170% VERDANA; 文字色:濃ピンク; テキストの水平位置:中央寄せ;}

55 .CAL_SAT
{ FONT : BOLD 7PT/170% VERDANA; COLOR : #3572A1; TEXT-ALIGN : CENTER; }

カレンダー上部の曜日「S」(土曜日)
{フォント:太字 7ポイント/170% VERDANA; 文字色:濃水色; テキストの水平位置:中央寄せ;}

56 .CAL_TODAY
{ FONT : BOLD 7PT/170% VERDANA; BACKGROUND : #E3E3E3; COLOR : #3D5586; TEXT-ALIGN : CENTER; }

カレンダー当日の日付数値
{フォント:太字 7ポイント/170% VERDANA; 背景色:薄い水色; 文字色:ダークブルー; テキストの水平位置:中央寄せ;}

57 .CAL_TR
{ }

カレンダーの「TR」
{指定なし}
{BACKGROUND:RED;}と指定した場合下の図のようになりました

CSS編集 序2 模索編_a0003861_203248.gif


58 DIV.XML
{ FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

左部下の「GET XML」と「skin by 制作者」
{フォント:8ポイント/150% VERDANA; テキストの水平位置:中央寄せ;}

フォントを16ポイントにし、BORDER:1PX SOLID RED を加えて
指定した場合、下の図のようになりました。

CSS編集 序2 模索編_a0003861_211385.gif

■ 追 記 1
cssのボックスを視覚的に確認するのにBookmarkletという便利なものがあります。詳細はこちら


■ 追 記 2
34-36に関しましてはOasisさんのコメント情報により
シナさんのサイト「やおよろず」の記事を参考にさせて頂きました。
ありがとうございます<(_ _)>
2004.09.05

by tomo0640820 | 2004-06-03 00:22 | CSS編集 序2 模索編
<< No.3「Greyheron&... No.2「のらくら庵」ノラク... >>