2007年 04月 17日
立体化(その2)
Nikon D200+Ai AF Micro Nikkor 105mm F2.8D
f0018464_20484363.jpg

昨日に引き続き、blogの立体化について話をします。
今回は、コメント欄の立体化です。



  
 まず、私のスキンのコメント欄のCSSを公開します。

DIV.COMMENT {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 20PX;
border-top:1px #595857 solid;
border-right:1px #2b2b2b solid;
border-bottom:1px #2b2b2b solid;
border-left:1px #595857 solid;

BACKGROUND :#494a41; 
PADDING : 15PX;
PADDING-TOP : 10PX;
}

DIV.COMMENT_BODY {
MARGIN-TOP : 6PX;
MARGIN-BOTTOM : 20PX;
LINE-HEIGHT : 130%;
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;

padding : 10px 10px 10px 10px;
BACKGROUND :#333631;
}

DIV.COMMENTというのが、コメント欄の大枠で、DIV.COMMENT_BODY がコメント欄そのものです。
大枠を浮き上がらせて、コメント欄を凹ませています。
あと、何気に大切なのが赤色の行です。
これは、コメントの上下左右に10PX分の余白を作るための文字列です。
これが無いと、コメントが枠にくっついて見栄えが悪くなります。
「padding:上 右 下 左;」となっております。
数値はお好みで調節して下さい。
なお、オレンジ色の部分は、それぞれの背景の色を決定しています。


 あと気になるのは、コメントを書き込む欄がデフォルトだと白いことですね。
この部分については、私のスキンでは以下のように編集しています。

.TXTFLD{
FONT-SIZE:9PT;COLOR:#BBB;
border-top:1px #2b2b2b solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #2b2b2b solid;

padding : 5px 5px 5px 5px;
BACKGROUND:#333631
}

黄色い部分が書き込み欄を凹ませている文字列です。
あと、緑色の部分が書き込み欄の色を決定しています。
さらに、赤色い部分で書き込んだ文字の色を設定しています。
上下左右には5PX分の余白を設定しています。
ちなみに、これをやると右のメニュー欄のexite検索も変わりますよ。

以上、参考になれば幸いです。

by muto2100 | 2007-04-17 20:21 | スキン編集 | Comments(2)
Commented by jin-na at 2007-04-17 23:47
こんばんわぁ。
今回もお世話になり、ただいま、店舗改装完了しました☆
“mutoさんの色違うだけ版” みたいで、申し訳ないです。。。(^ ^;)

こんな感じで、写真の撮り方もレベルアップできればいいのになぁ。
Commented by muto2100 at 2007-04-18 06:40
jin-naさん、こんにちは。
>>“mutoさんの色違うだけ版” みたいで、申し訳ないです。。。(^ ^;)
いえいえ、そんなこと無いですよ。
むしろ、私は色にこそ個性が出ると思っていますから。
それに、細かく見ればまだまだ結構違いがあるんですよ。
例えば、タイトルの上の日付など、
私のはアンダーラインを無くして、少しだけ右に寄せています。

あれこれ試行錯誤されれば、すぐに私以上のレベルになりますよ。
私だって初心者ですからね。


<< スキン公開      立体化(その1) >>