だーしゃの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講座 ヘッダーの画像を変えてみよう！
パソコン超初級者の私には・・・難しい。
実はこの間の旅行で、婚約指輪をなくしてしまったんです。
でも、今日改めて買っていただきました。
だーしゃさん、石垣島で格安かわいい結婚式場があったら、是非教えて下さい。
■ちえさんへ
こんばんはー、
これはブログのお話なのでちょっとややこしいかもですよー。
そして前回の旅行でなくされちゃったんですけ（＞＜）
でもでも、また買ってくれるってすごいかっこいい！！
いいですね！おめでとうございます！
そして石垣の格安ですかーんー、
前回石垣に行ったのが始めてだったので、
なんとも言えないのですが、
知り合いに聞いてみますねー。
沖縄の魅力を振り返ってみました。
初めて沖縄へ行ったのは２００２年の２月。
遠浅の青い海に興味があって、思い切って沖縄へ・・・
ほんまに日本なん、と思うくらい綺麗で、どこかなつかし感じがしました。それから沖縄へ４回行きました。
やっぱり沖縄は大好きです。だーしゃさんがうらやましい。
いつもお返事ありがとうございます。
だーしゃさん・・・（Ｔ＿Ｔ）
↑の記事とは全然違うんですけど
ブログの記事の領域（(･_･?)）が
狭くなったんですけど～
なじぇ(･_･?)
ただ昨夜記事を投稿しただけで
サイドバーが下に完全移動したので
デザインを既存のにしたのですが
記事の枠はやっぱり小さい・・・・・
選んだデザインのせい(･_･?)
だーしゃさん・・・（Ｔ＿Ｔ）
↑の記事とは全然違うんですけど
ブログの記事の領域（(･_･?)）が
狭くなったんですけど～
なじぇ(･_･?)
ただ昨夜記事を投稿しただけで
サイドバーが下に完全移動したので
デザインを既存のにしたのですが
記事の枠はやっぱり小さい・・・・・
選んだデザインのせい(･_･?)
■月さんへ
こんにちはー、今非公開にしてます？？
ブログがみれないので、なんともいえないのですが、
おそらく昨夜の記事投稿の際に
タグが不完全なまま投稿されたんだと思いますよー。
多分ですが、
↓こちらのタグがないはず。。
</div>
つまり
<div>で始っているタグの終わりがないので、
そうなっていると思いますー。
記事のタグを一度全部消すとおそらく
もとにもどりますよっ。
試してみてくださいねー
すんませんｍ(＿ ＿)ｍ
なじぇか２回・・・・・
もう一度ごめんなさいｍ(＿ ＿)ｍ
隠し玉（(･_･?)）使いました(-.-)
ん(･_･?)
と、いう事は<div>で始まったものは
</div>で終わっていないとおかしな事に
なるのですか～
(^▽^;)～はい面白くなくて
削除したい衝動にかられましたので
今、非公開・・・・・もちょっといじって公開にします(-.-)
お早いレス感謝ですｍ(＿ ＿)ｍ
３月にコメントしましたぴぐです。楽しく、おかしく読んでます（＾＾）
8/19のシーサーの写真ですが、石垣で商品のシールの
イメージにしようして良いですか？
■月さんへ
直ったようですね、よかったです（＾＾）
HTMLはちょっとした違いで崩れてしまいますので。。
うまく使わないといけないですよね。
特に記事内のタグ崩れが多いので、色々と確認してみてくださいねー
■ぴぐさんへ
こちら商品のイメージという事なのですが、
どのような商品に利用される予定でしょうか？
うちの親父へ確認と許可を取らないといけないので、
できれば詳しく教えていただけるとありがたいです。
宜しくお願いいたします。
石垣でジュースをつくってます。
沖縄を、イメージして数種類のシールを作成してはって
います。(シークワーサー・マンゴー・パッションなど)
とてもとても気に入った映像でしたので、使わせて頂けたらと思い、
失礼ながら、コメントという形式でお尋ねいたしました。
■ぴぐさんへ
石垣でジュースを作られているんですね！
わかりましたー、こちらはちょっと聞いて見ますね。
どうぞ宜しくお願いいたします。
はじめまして！
いつも美しい写真にうっとりさせてもらっています♪
こんなことができるんですね～！！
私もさっそくやってみます！これからも色々勉強させてください☆
今やってみたのですが、今までの写真がズレちゃったりと、
結構むつかしいですね…＞＜
初心者の私にはまだちょっと無理みたいなので、泣く泣く元に戻してしまいました…
（ホントに元に戻ったかどうかも不安ですが。。）
だーしゃさんのワクつき写真で、引き続きうっとりさせてもらいますね！
ありがとうございました！
■sakuraさんへ
こんにちは、コメントありがとうございますー。
んー、うまく行かなかったみたいですね（＞＜）
色々と触っていたら慣れてくると思いますので
試してみてくださいね。
もう少しわかりやすく編集してみますねー。
オリジナルの画像を上につけてやりましたら、できたのですが。
ウィンは大丈夫でしてたが、マックが言う事効きません、、、
再度バーは一番下まできまして！
いろいろやりましたが、原因不明！
オリジナル画像を取替えましたら、治りました。
当分このままオリジナル入れずにやります。
■源氏パイさんへ
こんばんはー。
オリジナル、そうマックはブラウザーのCSSの読み方が違うので
とってもこまるんですよね。
特にIEはマイクロソフトもサポート終ってしまって、
改善されないので。。。
大きさの点でなにかズレがしょうじていたのかもしれないですね。
その調整がちょこっとむずかしいんです。。。（＞＜）
はじめまして。
だーしゃさんのCSS講座を参考にして、色々挑戦しているところです。
それで質問です。
背景の色と同じ色をdateやそれぞれのタイトルに反映させたいのですがなかなか難しくうまいきません。
どうすればいいですか？
☆amo☆
■amoさんへ
こんにちは、コメントありがとうございます。
そして色の事ですね（＾＾）
dateの部分の背景色をまずbodyの背景色と同じカラーコードにしてみてください。
それから画像のURLが入っている可能性もあるので、
画像のURLは取り外してくださいね。
↓
background:#87CEFA url('/_img/simple_marine/obj.gif');
^^^^^^^^^^＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾
ulrと（） の部分を削除してください。
そうしたら色が反映されますよー。
なんだかうまくいきません・・・。
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;}
お時間あるときにお願いします。
■amoさんへ
background:#87CEFA
↑こちら後ろのセミコロンが抜けてますよー
background:#87CEFA;
「;」を入れてみてくださいー。
そうしたらたぶん表示されるとおもいますよー
だーしゃさんへ
おはようございます。
どうやら慌てていたようです！うまくいきました。どうもありがとうございました(*^_^*)
それともうひとつ質問してもいいですか？
タイトルの下のサブタイトルだと思いますが、色の変更はどうすればいいですか？タイトルはうまくいったのですが、サブタイトルがどうもうまくいきません。
お時間あるときにでもお願いします。
■amoさんへ
あそこはdescriptionというクラスなので、
そちらにて変えてみてくださいね。
http://daxiazzz.ti-da.net/e448157.html
ブログの構造を説明しているので、
参考にしていただければと思います。
質問がいっぱいは言ってますね～。
で、私も質問。
画像をモブログしたときに
自動で「align="left"」が入ってるようなんですが、
これが入ってしまうと２枚を同時投稿したときに不具合がでます。
なのでこのalign="left"が入らないようにしたいんですが
どうしたらいいでしょう？
はじめまして、こんばんわ。
てぃーだブログで出会った方にこちらを教えていただきました。
早速、白枠にチャレンジしようと思ったのですが。。。。。
恥ずかしいんですが管理画面>デザイン
↑
これがどこにあるのか分かりません。
ほんと、素人すぎてすみませんが教えてください。
度々すみません。
分からないのはデザインの部分です。
■ love2maririnさんへ
コメントありがとうございます、かなり前の記事なので表記がちょっとちがってましたー、
今回ちょっと直させてもらいました、ありがとうございます。
管理画面TOPの中の左サイドバーにある、テンプレートという項目をクリックしてもらって、そのなかのカスタマイズをクリックしてください。
そうするとスタイルシートとか4つの枠が出てきますので、そのスタイルシート内にあるのを変更してみてくださいね。
どうぞ宜しくお願いいたします。
at 2010年11月06日 22:11
