2007年 04月 16日
立体化(その1)
Nikon D200+Ai AF Zoom Nikkor 24-85mm F2.8-4D
f0018464_20363543.jpg
久しぶりにスキン編集です。
今回は、メニューバーやコメント欄の立体化についてです。
比較的分かりやすいメニューバーの立体化について紹介します。



  
 まず、私のスキンのメニューバーの部分のCSSを紹介します。

DIV.MNTTL {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;

PADDING : 2PX 10PX;
MARGIN : 40PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND:#432f2f;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}

黄色い部分が立体化させている文字列です。
この4行によって、top(上部)とleft(左側)に1PX分の灰色の線、bottom(下部)とright(右側)に1PX分の黒っぽい線を描いています。
こうすると、その部分が浮き上がって見えます。
ちなみに、#595857(灰色)と#2b2b2b(黒っぽい色)を入れ替えると凹んで見えます。


 なお、これだけだとカレンダーのタイトルバーが立体化されませんから、カレンダーの部分も以下のように修正します。

DIV.CAL_TOP {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;

PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #432f2f;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}

黄色い部分が立体化させている文字列です。


 さらに、カレンダーの今日の部分を朱色にして凹ませるために、以下の修正を加えています。

.CAL_TODAY {
border-top:1px #250d00 solid;
border-right:1px #d57c6b solid;
border-bottom:1px #d57c6b solid;
border-left:1px #250d00 solid;

FONT-FAMILY : VERDANA;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #9e3d3f ;
COLOR :#BBB;
TEXT-ALIGN : CENTER;
}

黄色い部分が立体化させている文字列です。
#9e3d3fが朱色の四角形です。
気に入らなければお好みで替えて下さい。
ただし、立体化の部分の1PXの枠の色(#250d00と#d57c6b)は朱色に合わせていますので、修正が必要になります。


一応こんな感じです。分かって頂けましたでしょうか?
コメント欄等の立体化もこの方法の応用です。
色々と試してみると面白いですよ。
ただし、失敗するとぐちゃぐちゃになるので、あらかじめバックアップをとることをオススメします。
まぁ、失敗しても最初からやり直せば良いだけのことですけどね。
以上、参考になれば幸いです。

by muto2100 | 2007-04-16 21:09 | スキン編集 | Comments(4)
Commented by jin-na at 2007-04-16 23:15
リクエストにお応えいただき、ありがとうございました。

説明もホントに分かりやすく、感謝×2です☆
おかげさまで、たーっぷりと、遊ばせていただきました。
結局、採用されて色は、とっても地味なんですけど。。。
Commented by muto2100 at 2007-04-17 06:29
jin-naさん、こんにちは。
>>説明もホントに分かりやすく、感謝×2です☆
こういって頂けると嬉しいです。
立体化すると、なんだか高級感が出ますよね。
次回は、コメント欄の立体化についてUPする予定です。

初心者の説明なので、いたらない部分もあるかと思いますが、
分からないことがあったら、何でも聞いて下さい。
Commented by とぉ at 2007-04-17 16:30 x
こんにちは。

私もやっとの事でスキン編集に手をつけてみました。
しかし、CSSやらHTMLの何たるかも解らずに…というのは難しいものですね。
mutoさんのレクチャーを頼りに、後は自分であちこち調べて…。

随分感じは変わったのですが、細かい部分でまだ納得ができません(><)

これから徐々に勉強しながらやらないと・・・ですね。

Commented by muto2100 at 2007-04-17 20:27
とぉさん、こんにちは。
スキン編集は難しいですよね。
私も最初はお手上げ状態でした。
スキン編集で検索すると、結構色々なサイトで紹介されていたので、
あれこれ試行錯誤しながら自分なりにアレンジしてみました。
このblogの記事が参考になれば幸いです。

でも、一番難しいのは色のバランスかもしれませんね。


<< 立体化(その2)      花祭り >>