2007年 04月 16日
Nikon D200+Ai AF Zoom Nikkor 24-85mm F2.8-4D ![]() 今回は、メニューバーやコメント欄の立体化についてです。 比較的分かりやすいメニューバーの立体化について紹介します。 ■ まず、私のスキンのメニューバーの部分の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)
リクエストにお応えいただき、ありがとうございました。
説明もホントに分かりやすく、感謝×2です☆ おかげさまで、たーっぷりと、遊ばせていただきました。 結局、採用されて色は、とっても地味なんですけど。。。
Like
jin-naさん、こんにちは。
>>説明もホントに分かりやすく、感謝×2です☆ こういって頂けると嬉しいです。 立体化すると、なんだか高級感が出ますよね。 次回は、コメント欄の立体化についてUPする予定です。 初心者の説明なので、いたらない部分もあるかと思いますが、 分からないことがあったら、何でも聞いて下さい。
こんにちは。
私もやっとの事でスキン編集に手をつけてみました。 しかし、CSSやらHTMLの何たるかも解らずに…というのは難しいものですね。 mutoさんのレクチャーを頼りに、後は自分であちこち調べて…。 随分感じは変わったのですが、細かい部分でまだ納得ができません(><) これから徐々に勉強しながらやらないと・・・ですね。
とぉさん、こんにちは。
スキン編集は難しいですよね。 私も最初はお手上げ状態でした。 スキン編集で検索すると、結構色々なサイトで紹介されていたので、 あれこれ試行錯誤しながら自分なりにアレンジしてみました。 このblogの記事が参考になれば幸いです。 でも、一番難しいのは色のバランスかもしれませんね。 << 立体化(その2) 花祭り >> |
<< 立体化(その2) 花祭り >> ![]() Welcome!
こんにちは。管理人のmutoといいます。 拙blogへようこそお越し下さいました。 このblogでは、私があちこちに出かけて撮ってきた写真を、とりとめもなくUPしております。 コメントはお気軽にどうぞ。写真の感想などをお聞かせ頂けると幸いです。 ただ、返事が遅くなるかもしれませんので悪しからずご了承下さい。 なお、リンクはフリーですが、このブログのすべての画像の著作権はmuto2100に帰属します。無断で複写・転用することを禁止します。 Copyright (c) 2005-2019 muto2100. All rights reserved. ↓ 本館のHPです。 カレンダー
My Album
|
ファン申請 |
||