だーしゃのCSS講座 写真に自動で白縁をつけたい！
だーしゃのCSS講座
第7回 写真に自動で白縁をつけたい！
はいこんににちは、今日は
写真に白い縁を付けてみたい！
と思っている方にその白縁の付け方をお伝えいたしましょー。
つまりは下の写真のような感じで白い縁がスタイルシートでつくれるんですよ。
←このような形でただ画像をUPするだけで
白縁写真のようにすることができるんです。
それでは続きへGO！。
まずは管理画面TOP＞左サイドバーのテンプレート＞使用中のテンプレートのカスタマイズをクリック
を行ってください。そして
その後に【スタイルシート】の中の文字列から下記文字列をさがしてくださいな。
.main img{
margin:0px 5px 5px 5px;
}
はい、このスタイルシートの中身を替えるだけで、
お好みの枠を作る事ができるんですよー。
ではまずスタンダードな枠から。
【スタンダード】
.main img{
margin:0px 5px 5px 5px;
background:#ffffff;
padding:8px;
border:1px solid #cccccc;
}
右の文字をコピーしてスタイルシート内の「.main img」の場所に貼り付けてください。
そうすると左の写真のようになりますからー！
これは全て自動ですよー(笑）
【カスタマイズ】
■こちらは立体的な感じを再現したスタイルシート
.main img{
margin:0px 5px 5px 5px;
background:#ffffff;
padding:8px;
border-right:2px solid #cccccc;
border-bottom:1px solid #cccccc;
border-top:2px solid #efefef;
border-left:1px solid #efefef;
}
■こちらは影の部分を強調したスタイルシート
.main img{
margin:0px 5px 5px 5px;
background:#ffffff;
padding:8px;
border-right:2px solid #cccccc;
border-bottom:1px solid #cccccc;
}
とにかく右の文字をコピーして張り付ければ使えますので、
利用したい方はドンドンと利用してくださいね。
色とか、白縁の部分は自由に変えれますので、
色々と試してみてください。
ただし！！
こちら副作用として、絵文字まで枠が付いてしまいます。。。
こんな感じ↓
絵文字を沢山使っている人は入れないほうがいいかもしれませんよー。
そしてアルバムについても同じ！
http://daxiazzz.ti-da.net/album.html
こちらはカスタムの影を強調したやつなら問題ないかもしれませんが、
他のやつは線が入ってしまいます。
こればっかりはしょうがないので、色々と試行錯誤してくださいねー
それでは今日の授業はここまで！
しーゆー（＝＾＾）/
▼CSS講座
2006-04-11 だーしゃのCSS講座 写真に自動で白縁をつけたい！
2005-12-29 だーしゃのCSS講座 引用文に色を付けてみよう！
2005-09-02 だーしゃのCSS講座 線のカスタマイズしよう！
2005-07-28 だーしゃのCSS講座 背景画像及び背景色を変更してみよう！
2005-07-21 だーしゃのCSS講座 ブログタイトルの位置を変更してみよう！
2005-07-18 だーしゃのCSS講座 ブログタイトルの色を変えてみよう！
2005-07-17 だーしゃのＣＳＳ講座 ブログの構造を理解してみよう！
2005-07-11 だーしゃのCSS講座 カスタムプラグインをかっこよく！
2005-07-10 だーしゃのCSS講座 ヘッダーの画像を変えてみよう！
関連記事