ウィンドゥは最大表示でお願いいたします。
日本の地域ブログ大集合！津々浦々の美味い・楽しいがここに！
2006年04月11日
だーしゃのCSS講座 写真に自動で白縁をつけたい！
だーしゃのCSS講座
第7回 写真に自動で白縁をつけたい！
はいこんににちは、今日は写真に白い縁を付けてみたい！
と思っている方にその白縁の付け方をお伝えいたしましょー。
つまりは下の写真のような感じで白い縁がスタイルシートでつくれるんですよ。
←このような形でただ画像をUPするだけで
白縁写真のようにすることができるんです。
それでは続きへGO！。
第7回 写真に自動で白縁をつけたい！
はいこんににちは、今日は写真に白い縁を付けてみたい！
と思っている方にその白縁の付け方をお伝えいたしましょー。
つまりは下の写真のような感じで白い縁がスタイルシートでつくれるんですよ。
←このような形でただ画像をUPするだけで白縁写真のようにすることができるんです。
それでは続きへGO！。
まずは管理画面＞デザイン＞オリジナルデザイン
の画面へ行ってください。
その後に【スタイルシート】の中の文字列から下記文字列をさがしてくださいな。
はい、このスタイルシートの中身を替えるだけで、
お好みの枠を作る事ができるんですよー。
ではまずスタンダードな枠から。
【スタンダード】
.main img{
margin:0px 5px 5px 5px;
background:#ffffff;
padding:8px;
border:1px solid #cccccc;
}
右の文字をコピーしてスタイルシート内の「.main img」の場所に貼り付けてください。
そうすると左の写真のようになりますからー！
これは全て自動ですよー(笑）
【カスタマイズ】
■こちらは立体的な感じを再現したスタイルシート
■こちらは影の部分を強調したスタイルシート
とにかく右の文字をコピーして張り付ければ使えますので、
利用したい方はドンドンと利用してくださいね。
色とか、白縁の部分は自由に変えれますので、
色々と試してみてください。
ただし！！
こちら副作用として、絵文字まで枠が付いてしまいます。。。
こんな感じ↓
絵文字を沢山使っている人は入れないほうがいいかもしれませんよー。
そしてアルバムについても同じ！
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講座 ヘッダーの画像を変えてみよう！
の画面へ行ってください。
その後に【スタイルシート】の中の文字列から下記文字列をさがしてくださいな。
.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;
}
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;
}
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
こちらはカスタムの影を強調したやつなら問題ないかもしれませんが、
他のやつは線が入ってしまいます。
こればっかりはしょうがないので、色々と試行錯誤してくださいねー
それでは今日の授業はここまで！
しーゆー（＝＾＾）/
この記事へのコメント
|
|
パソコン超初級者の私には・・・難しい。 実はこの間の旅行で、婚約指輪をなくしてしまったんです。 でも、今日改めて買っていただきました。 だーしゃさん、石垣島で格安かわいい結婚式場があったら、是非教えて下さい。 |
Posted by ちえ at 2006年04月12日 01:27
|
|
■ちえさんへ こんばんはー、 これはブログのお話なのでちょっとややこしいかもですよー。 そして前回の旅行でなくされちゃったんですけ（＞＜） でもでも、また買ってくれるってすごいかっこいい！！ いいですね！おめでとうございます！ そして石垣の格安ですかーんー、 前回石垣に行ったのが始めてだったので、 なんとも言えないのですが、 知り合いに聞いてみますねー。 |
Posted by だーしゃ at 2006年04月12日 01:34
|
|
沖縄の魅力を振り返ってみました。 初めて沖縄へ行ったのは２００２年の２月。 遠浅の青い海に興味があって、思い切って沖縄へ・・・ ほんまに日本なん、と思うくらい綺麗で、どこかなつかし感じがしました。それから沖縄へ４回行きました。 やっぱり沖縄は大好きです。だーしゃさんがうらやましい。 いつもお返事ありがとうございます。 |
Posted by ちえ at 2006年04月12日 19:11
|
|
だーしゃさん・・・（Ｔ＿Ｔ） ↑の記事とは全然違うんですけど ブログの記事の領域（(･_･?)）が 狭くなったんですけど～ なじぇ(･_･?) ただ昨夜記事を投稿しただけで サイドバーが下に完全移動したので デザインを既存のにしたのですが 記事の枠はやっぱり小さい・・・・・ 選んだデザインのせい(･_･?) |
Posted by 月 at 2006年04月12日 19:59
|
|
だーしゃさん・・・（Ｔ＿Ｔ） ↑の記事とは全然違うんですけど ブログの記事の領域（(･_･?)）が 狭くなったんですけど～ なじぇ(･_･?) ただ昨夜記事を投稿しただけで サイドバーが下に完全移動したので デザインを既存のにしたのですが 記事の枠はやっぱり小さい・・・・・ 選んだデザインのせい(･_･?) |
Posted by 月 at 2006年04月12日 20:04
|
|
■月さんへ こんにちはー、今非公開にしてます？？ ブログがみれないので、なんともいえないのですが、 おそらく昨夜の記事投稿の際に タグが不完全なまま投稿されたんだと思いますよー。 多分ですが、 ↓こちらのタグがないはず。。 </div> つまり <div>で始っているタグの終わりがないので、 そうなっていると思いますー。 記事のタグを一度全部消すとおそらく もとにもどりますよっ。 試してみてくださいねー |
Posted by だーしゃ at 2006年04月12日 20:08
|
|
すんませんｍ(＿ ＿)ｍ なじぇか２回・・・・・ もう一度ごめんなさいｍ(＿ ＿)ｍ 隠し玉（(･_･?)）使いました(-.-) |
Posted by 月 at 2006年04月12日 20:11
|
|
ん(･_･?) と、いう事は<div>で始まったものは </div>で終わっていないとおかしな事に なるのですか～ (^▽^;)～はい面白くなくて 削除したい衝動にかられましたので 今、非公開・・・・・もちょっといじって公開にします(-.-) お早いレス感謝ですｍ(＿ ＿)ｍ |
Posted by 月 at 2006年04月12日 20:18
|
|
３月にコメントしましたぴぐです。楽しく、おかしく読んでます（＾＾） 8/19のシーサーの写真ですが、石垣で商品のシールの イメージにしようして良いですか？ |
Posted by ぴぐ at 2006年04月13日 11:08
|
|
■月さんへ 直ったようですね、よかったです（＾＾） HTMLはちょっとした違いで崩れてしまいますので。。 うまく使わないといけないですよね。 特に記事内のタグ崩れが多いので、色々と確認してみてくださいねー ■ぴぐさんへ こちら商品のイメージという事なのですが、 どのような商品に利用される予定でしょうか？ うちの親父へ確認と許可を取らないといけないので、 できれば詳しく教えていただけるとありがたいです。 宜しくお願いいたします。 |
Posted by だーしゃ at 2006年04月13日 15:09
|
|
石垣でジュースをつくってます。 沖縄を、イメージして数種類のシールを作成してはって います。(シークワーサー・マンゴー・パッションなど) とてもとても気に入った映像でしたので、使わせて頂けたらと思い、 失礼ながら、コメントという形式でお尋ねいたしました。 |
Posted by ぴぐ at 2006年04月14日 10:04
|
|
■ぴぐさんへ 石垣でジュースを作られているんですね！ わかりましたー、こちらはちょっと聞いて見ますね。 どうぞ宜しくお願いいたします。 |
Posted by だーしゃ at 2006年04月14日 22:01
|
|
はじめまして！ いつも美しい写真にうっとりさせてもらっています♪ こんなことができるんですね～！！ 私もさっそくやってみます！これからも色々勉強させてください☆ |
Posted by ｓａｋｕｒａ at 2006年04月15日 10:55
|
|
今やってみたのですが、今までの写真がズレちゃったりと、 結構むつかしいですね…＞＜ 初心者の私にはまだちょっと無理みたいなので、泣く泣く元に戻してしまいました… （ホントに元に戻ったかどうかも不安ですが。。） だーしゃさんのワクつき写真で、引き続きうっとりさせてもらいますね！ ありがとうございました！ |
Posted by ｓａｋｕｒａ at 2006年04月15日 11:18
|
|
■sakuraさんへ こんにちは、コメントありがとうございますー。 んー、うまく行かなかったみたいですね（＞＜） 色々と触っていたら慣れてくると思いますので 試してみてくださいね。 もう少しわかりやすく編集してみますねー。 |
Posted by だーしゃ at 2006年04月20日 16:15
|
|
オリジナルの画像を上につけてやりましたら、できたのですが。 ウィンは大丈夫でしてたが、マックが言う事効きません、、、 再度バーは一番下まできまして！ いろいろやりましたが、原因不明！ オリジナル画像を取替えましたら、治りました。 当分このままオリジナル入れずにやります。 |
Posted by 源氏パイ at 2006年04月20日 18:31
|
|
■源氏パイさんへ こんばんはー。 オリジナル、そうマックはブラウザーのCSSの読み方が違うので とってもこまるんですよね。 特にIEはマイクロソフトもサポート終ってしまって、 改善されないので。。。 大きさの点でなにかズレがしょうじていたのかもしれないですね。 その調整がちょこっとむずかしいんです。。。（＞＜） |
Posted by だーしゃ at 2006年04月22日 03:29
|
|
はじめまして。 だーしゃさんのCSS講座を参考にして、色々挑戦しているところです。 それで質問です。 背景の色と同じ色をdateやそれぞれのタイトルに反映させたいのですがなかなか難しくうまいきません。 どうすればいいですか？ ☆amo☆ |
Posted by amo at 2006年04月24日 14:46
|
|
■amoさんへ こんにちは、コメントありがとうございます。 そして色の事ですね（＾＾） dateの部分の背景色をまずbodyの背景色と同じカラーコードにしてみてください。 それから画像のURLが入っている可能性もあるので、 画像のURLは取り外してくださいね。 ↓ background:#87CEFA url('/_img/simple_marine/obj.gif'); ^^^^^^^^^^＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾ ulrと（） の部分を削除してください。 そうしたら色が反映されますよー。 |
Posted by だーしゃ at 2006年04月24日 14:56
|
|
なんだかうまくいきません・・・。 date部分が真っ白になってしまいました(>_<) どうなっているのでしょうか？ .date{ border-top:1px solid #87CEFA; border-left:1px solid #87CEFA; border-right:1px solid #87CEFA; border-bottom:1px solid #87CEFA; background:#87CEFA background-position:1px 1px; color:#fff; font-size:12px; etter-spacing:2px; padding:5px 0px 5px 5px;} お時間あるときにお願いします。 |
Posted by amo at 2006年04月24日 17:16
|
|
■amoさんへ background:#87CEFA ↑こちら後ろのセミコロンが抜けてますよー background:#87CEFA; 「;」を入れてみてくださいー。 そうしたらたぶん表示されるとおもいますよー |
Posted by だーしゃ at 2006年04月24日 17:19
|
|
だーしゃさんへ おはようございます。 どうやら慌てていたようです！うまくいきました。どうもありがとうございました(*^_^*) それともうひとつ質問してもいいですか？ タイトルの下のサブタイトルだと思いますが、色の変更はどうすればいいですか？タイトルはうまくいったのですが、サブタイトルがどうもうまくいきません。 お時間あるときにでもお願いします。 |
Posted by amo at 2006年04月25日 10:30
|
|
■amoさんへ あそこはdescriptionというクラスなので、 そちらにて変えてみてくださいね。 http://daxiazzz.ti-da.net/e448157.html ブログの構造を説明しているので、 参考にしていただければと思います。 |
Posted by だーしゃ at 2006年04月26日 10:17
|
|
質問がいっぱいは言ってますね～。 で、私も質問。 画像をモブログしたときに 自動で「align="left"」が入ってるようなんですが、 これが入ってしまうと２枚を同時投稿したときに不具合がでます。 なのでこのalign="left"が入らないようにしたいんですが どうしたらいいでしょう？ |
Posted by pyo at 2006年05月09日 11:28
■沖縄からヨッシャー（＝＾＾）９新着記事
>>最新画像の一覧を見る￤>>ブログの記事一覧を見る
■各種オリジナルページへ
|
・ブログ記事一覧を見る |
・写真の一覧を見る |
・タグでの区分けを見る |
この記事へのトラックバックURL
この記事へのトラックバック
いつも「滋賀咲くブログ」ご利用いただきありがとうございます。産経新聞さんや、京都新聞さんに取り上げていただいたり、みなさまの口コミのおかげもあり、ブログ総数も９０を超えま...
ブログカスタマイズのヒント満載サイトのご紹介【お知らせブログ】at 2006年07月19日 23:24