マイスキンつくりたいな
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
Brel et moi
Loophole
blueblueclub
恐悦至極に存じます。
しゃんくのつぶやき
しあわせの箱庭
ぱーむらいふ
超初心者一眼レフ日記。
私の人生、こんなもん 涙...
人生の地図
today's chan...
そんな目で見るなよ
雀屋だらだらday's
スラドット60
no name☆
日記はいつも三日坊主。
norah'#
3gatsu-USAGI
***amedama ...
My funny Val...
Bostonterrie...
たびcamera
お魚好きなねこ
MINT TIME
エキブロ外リンク
Anemosphere-Blog
TOMOのother sites
tomolatte
最新のトラックバック
表示/非表示のがたつき
from 華談 -St.Dorothe..
CSS&HTML / T..
from 日刊エキブロ新聞
リニューアル工事中。
from Too High Quali..
HTMLのテーブル
from † CrossMoon † ..
検索
人気ジャンル
ファン
記事ランキング
ブログジャンル
画像一覧
<   2004年 05月 ( 6 )   > この月の画像一覧
「CSS編集」って…。
今回は「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名が3分の2以上出現。
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行の後は2行分増えるので、その後は21行→23行、22行→24行というふうに2行分ずつずれていきます。
属性値は各スキンによって違います(共通部分が多いですが)。

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


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; }

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

a0003861_134581.gif


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

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

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

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追記)

a0003861_136528.gif


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

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

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

a0003861_1364216.gif


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

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

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

a0003861_137983.gif


['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;」(=「背景色: 黄色;」)と追加指定した場合、下の図のようになります。
※画像は縮小してあります。

a0003861_1372954.gif

※20,21,24,25の水色線部分は'04.11.25に追記。
[PR]
by tomo0640820 | 2004-05-30 10:21 | CSS編集 序1 明解編
「C-2列のレイアウト-左側にメニュー」HTML編集内部
a0003861_13595.gif


内部の構造を読む
[PR]
by tomo0640820 | 2004-05-26 23:07 | HTML編集 C
「C-2列のレイアウト-左側にメニュー」HTML編集全体
昨日初期設定のままマイスキンをつくった。
このページの左下に恥ずかしそうに「skin by tomo0640820」という文字が出現している。
これから手を加えていくにはまずあのマイスキンを作る際の「HTML編集」にあるコードをやっつけ(理解し)なければならないのだろう。

私が選んだのは「C. 2列のレイアウト-左側にメニュー」なのだけど、まずこの全体部分のHTML(図1のオレンジ部分ね)が初期設定でどんなふうになっているのか紙に鉛筆でしこしこメモっていった。昔から書かないと記憶&理解不能なタイプなの…。それが図2。
全体は大きい二つのテーブルでつくられていて下のテーブルには更に小さいテーブルがはめ込まれているみたい。(テーブルは赤線、中のセルは黒線)
そしてセルの中にはなにやら見慣れない「<$」と「$>」で囲まれたエキサイトブログタグなるものが鎮座している。

このエキサイトブログタグについての説明ページあったのでそれに照らし合わせて差し替えたのが図3。
エキサイトブログタグは削除可能なものと出来ないものがあるそうで可は青字、不可は赤字に下線で示しました。
a0003861_23626100.gif

ここまでやってみて、自分が試行錯誤していることを人様に伝えることの難しさというものを実感。そもそも私のことだからどこかしらか間違いがありそう、いや、絶対ある!と思うのにこんな文章かいてて許されるのかしら。間違っていたらごめんなさーい。いやいや、TOMOおまえは何を考えている。自意識過剰だよ。山ほどあるサイトの中のこんなミジンコみたいな私のブログをマジに読んでいる人なんていないいない。そうよね、あははは。

あ、すみません、ちょっと妄想してました。
…そろそろ寝ます。おやすみなさい。
[PR]
by tomo0640820 | 2004-05-25 00:09 | HTML編集 C
このサイトについて
はじめまして、TOMOと申します。
現在は一児(一歳)の母で専業主婦(無職ともいう)をしています。
育児をしていたらすっかり浦島太郎になって世間で何が起こっているのか、オリコンチャート1位はこの人はいったい何者?状態になってしまいました。
頭もボケボケです。
そこで登録したまましぱらく放置していたエキサイトブログをつかって「マイスキンをつくる」という頭の体操をしようと思います。
私的に敷居はかなり高いです。
更新が滞りがちになったら頭がフリーズしているんだろうなと思って哀れんで下さい。
作り方について「こいつ勘違いしているな」と思う箇所がありましたらご指摘頂ければありがたいです。
同士の方がいらしたら励まし合ってステップアップしませう。
ではみなさま、以後おみおしきりのほど宜しくお願いいたします。
[PR]
by tomo0640820 | 2004-05-23 19:20 | このサイトについて
マイスキンが出来た(違
今現在エキサイトブログ提供スキンをお借りしている私ではある。
しかしゆくゆくはマイスキンを作りたい!
宣言して投稿してあとは明日…と布団に入りました。(急いては事をしそんじるというし。うんうん)

そしたらば寝入りばなに「作りたいっていうてもどんなの?構想はあるのかい?」とスキンの小人さんが耳元で聞いてきました。
うぎゃ、いまはまだ…ない。しょぼーん。
夢の中で50センチ四方×厚さ1センチの複数のWeb画面が「いきあたりばったりかい!」と私を責め立て、頭の上に次々と覆い被さってきました。

朝起きて「宣言して1日坊主はまずいよね、前に進まなければ」と謙虚な気分でマイブログを開きました。
「マイブログ」→「設定」→「スキン変更」→「マイスキン」→「新しいスキン作成」ここでヘルプを飛ばし読みし(汗)、更に「スキン作成を始めます!」をクリック。

レイアウト選択画面だ。本格的になってきたぞ(?)
若葉な私には「C. 2列のレイアウト-左側にメニュー」というオーソドックスなタイプが妥当よね、クリック!

お…なにやらこ難しそうなところに来たぞ。これがマイスキンの編集画面ね…プレビューのち…とりあえずこのままいっちゃえ!と「保存」ボタンをクリック。

これででもう終わりかと思いきや「マイスキンに保存します」ボタン画面が出現。
「スキン名」を「skin01」としてクリック!
あ、「gif形式のイメージのみアップロードできます」やんわりと注意されちゃったよ。
a0003861_145856.gif

…スキンイメージ用のgif画像を作らなきゃいけないのね。ごそごそ。

でけた。クリック!「保存しました。スキン保存画面でご確認ください。」よっしゃ。
「元のページへ」クリック!
ふふふ、今作ったスキンイメージが選択肢に参入している。
そして…「適用」クリック!

おお、マイスキンができたーっ!
違う~…。私がつくりたいのはこんな豆腐のような画面ではない。
もっともっと!…何?
それはこれから…(汗
[PR]
by tomo0640820 | 2004-05-23 15:00 | とりあえずマイスキン
千里の道も一歩から
HTMLはある程度知っている。
CSSもリンクの下線をちょっといじる程度だったらやったことはある。
でもなんだか時代はどんどん私の知らないうちに進化してデザイン的要素はオールCSSブラボーになっているみたい。
いっちょ、私も時代の波のはしっこに乗ってみようかしら。
なんだかブログっていうのも最近もてはやされているみたい。
CSSいじれるみたいだしこの際ここで練習させてもらおう~。

そんなわけで今日からわたしはっ!
地道にのろのろと遊ばせて頂きます…。
まずはブログの世界を理解しなければ(汗
[PR]
by tomo0640820 | 2004-05-22 19:33 | とりあえずマイスキン