2007年 12月 27日
写真に枠を付ける方法
Nikon D200 + Ai AF DC Nikkor 105mm F2D
f0018464_21181256.jpg
久しぶりのスキン編集コーナーです。
excite以外の方、つまらなくてごめんなさい。
一応写真も1枚ずつUPしますから。^^

で、本題に入りますが、
私のblogにUPしている写真、何気に立体枠が付いているのにお気づきですか?
ちょっと高級感が出て良い感じですよね。^^
今回は、この枠の付け方について紹介します。



 
 枠の付け方は結構簡単です。
CSSの中に、IMG.IMAGE_○○○{・・・・・・}という文字列があるはずです。
これをいじります。
まず、私のスキンのCSSのIMG.IMAGE_○○○{・・・・・・}の文字列をを紹介します。

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

MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;
}

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

MARGIN-LEFT : 10PX;
MARGIN-BOTTOM : 10PX;
}

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

MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}

黄色の文字列が私が新しく追加した文字列です。
写真の右(right)と下(bottom)に1pxの白っぽい線(#595857 solid)、
左(left)と上(top)に1pxの黒っぽい線(#2b2b2b solid)を入れています。
こうすることで、写真がちょっとだけ凹んだように見えます。
ちなみにの文字は写真の貼り付け方を表しています。
写真をアップロードするときに、左(LEFT)・右(RIGHT)・中央(MID)を選んでいますよね。あれです。
それぞれに設定しなくてはなりません。
どの写真も同じように枠を付けるなら、上の例のように、3カ所を変更してください。





なお、右上のロゴ画像も同じように枠を付けることができます。
私のスキンの例で紹介しますと、

 IMG.LOGO {
border-top:1px #333631 solid;
border-right:1px #595857 solid;
border-bottom:1px #595857 solid;
border-left:1px #333631 solid;

MARGIN-TOP : 4PX;
MARGIN-BOTTOM : 10PX;
}

細かい説明は要りませんね、^^





最後に、立体枠ではなく普通の白枠を付けたいという場合は、次のようにすると良いでしょう。

 IMG.IMAGE_LEFT {
border:10px #FFFFFF;
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 10PX;

これで、左寄せの写真に10pxの白い枠が付きます。
IMG.IMAGE_RIGHT, IMG.IMAGE_MIDも同様に設定してください。


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

by muto2100 | 2007-12-27 21:53 | スキン編集 | Comments(4)
Commented by jin-na at 2007-12-27 22:39
久々のスキンネタ。 待ってました☆
しかも、以前より気になっていた枠付けですし。

早速、白枠パターンも試して見ましたが、私の写真では合わないものも多く。。。
作品には似合いそうなんですがねぇ (^ ^;)

毎回、あざぁ~す。
ホント、感謝・感激。。。
Commented by gohda_takeshi at 2007-12-27 22:59
お~!mutoさんお得意のスキン編集ですね(^_-)-☆私のような黒バックでも効果あるかな?

今日はちょ~っと早いかもしれませんが、年末はバタバタしそうなのでご挨拶(笑)
今年も私のつたない写真に沢山のコメントをいただき本当にありがとうございました。
来年もどうぞ宜しくお願いいたしますm(__)m

mutoさんご一家もどうぞ良いお年をお迎えくださいね(^_-)-☆
Commented by muto2100 at 2007-12-28 17:50
jin-naさん、こんにちは。
先日のスキンコンテストのときに、結構色々な方のblogなどを見て勉強しまして、
今のスキンには、小変更を入れてるんですよね。
列記すると、写真の枠、ユーザーメニュー、ボタン、コメント欄、メモ欄、背景。
こうやってみると、沢山いじくってますね。^^
それぞれはそんなに目立たないのですが、トータルすると大きな変更になりました。
そんなわけで、今使っているスキンは、結構満足度が高いです。

なるべく分かりやすく説明するつもりですが、
分からなければ、気軽にコメントで聞いてくださいね。
Commented by muto2100 at 2007-12-28 17:55
gohda_takeshiさん、こんにちは。
>>今日はちょ~っと早いかもしれませんが、年末はバタバタしそうなのでご挨拶(笑)
そうですね。
もう年の瀬なんですよね。早いものです。^^

こちらこそ、今年一年有り難うございました。
gohda_takeshiさんの花の写真は、とても素晴らしく、多大なる影響を頂きました。
別館blogの花写真なんかは、相当影響されてるんですよ。
gohda_takeshiさんのおかげで、とくにボケ味にこだわるようになりましたね。
来年も花写真を撮り続けていきますので、よろしくお願いします。


<< ログアウトを添付      晩秋の川間駅 >>