カテゴリ
目次このサイトについて とりあえずマイスキン 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 エキブロ外リンク
最新のトラックバック
検索
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
|
前回の「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;} と書き足してみました。 (^^ うまくいきました。やほう。(今の時点では適用していません) ※適用しましたら下の図のようになりました。 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ピクセル;} 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はアップロードした画像のマージンが指定されています。 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#] と書き換えます。 35 IMG.IMAGE_LEFT { MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; TEXT-ALIGN:LEFT} 画像を左寄せに設置した場合 {右のマージン:15ピクセル; 下のマージン:15ピクセル; テキスト(この場合画像ですが)の水平位置:左寄せ;} 36 IMG.IMAGE_MID { MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; } 画像を中央に設置した場合 {上のマージン:15ピクセル; 下のマージン:15ピクセル;} ここまできておや?と思うことが。 何故かCSS編集には右寄せのケースが存在しません。 デフォルトのままポップアップウィンドウで右寄せ指定をしてしまうと下の図のようになり、マージンがとられません。 IMG.IMAGE_RIGHT{ MARGIN-LEFT : 15PX; MARGIN-BOTTOM : 15PX; TEXT-ALIGN:RIGHT;} と書き足します。 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ポイント、斜体に変更した場合下の図のようになりました ['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;} 45 .TXTFLD { FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; } 29のテキストエリア内の入力フィールド {フォントサイズ:9ポイント; 文字色:黒; ボーダー:1ピクセル 実線 濃い灰色; 背景:白;} ※46 クラス名は「SUBMIT」なので「送信」ボタンかと思いきやいじっても適用されない。うー。 47 DIV.CAL_TOP { } カレンダー上部 {指定なし} 48 DIV.CAL { MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;} カレンダー全体 {マージン:上20ピクセル、左右:0ピクセル、下20ピクセル; 幅:150ピクセル; テキストの水平位置:中央寄せ;} 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ピクセル;} 50 DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;} カレンダー本体 {幅:150ピクセル; テキストの水平位置:中央寄せ;} 51 DIV.CAL_BOTTOM { } カレンダー下部 {指定なし} 52 .CAL { FONT : 7PT/170% VERDANA; TEXT-ALIGN : CENTER; } カレンダーのタイトル「<」と「>」、当日以外の日付数値 {フォント:7ポイント/170% VERDANA; テキストの水平位置:中央寄せ;} 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」 {指定なし} 58 DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; } 左部下の「GET XML」と「skin by 制作者」 {フォント:8ポイント/150% VERDANA; テキストの水平位置:中央寄せ;} ■ 追 記 1 cssのボックスを視覚的に確認するのにBookmarkletという便利なものがあります。詳細はこちら
by tomo0640820
| 2004-06-03 00:22
| CSS編集 序2 模索編
| ||||||||||||||||||||||||||||||||||||||||||||||||||
ファン申請 |
||