出来事etcをつづっています。方へ目次なんでも掲示板画像掲示板ブログペットキリぺた帳検索トップ--年--月--日スポンサーサイト上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。画像にポラロイド風の飾り枠を設定しましょう(CSS編集)せっかくの画像を記事に入れるのなら、ちょっと目立つように周りを飾ってみたくなりますよね♪それでここの記事画像の枠線を設定しましょう(CSS編集)では、画像の枠線(border)を設定して、画像が引き立つようにしてみました。この記事では、お友達のKOROPPYの本棚のKOROPPYさんの記事CSSでココログの画像をポラロイド風にアレンジを参考にして、記事の画像に縁取りを付けてみました。この記事の内容は、CSS編集が可能なブログならどのブログでもできます。画像の周りに余白(padding)を入れて、飾り枠のようにします。左;を同じ値にしてみました。#DCE3E3;}この画像と文字のソースコード(この画像を文字を記事に入れるとき、下の通りに入力します。IEでドロップシャドウ画像に枠を表示するによりますと、ここのブログのようにXHTML1.0準拠のテンプレート使用のブログの記事を、IE6.0かそれに順ずるブラウザで見た場合、imgタグの中のpadding(余白)が効かないそうです。左の画像のように、imgタグの中にclass="photofrm"を入れても、余白部分が見えないので、ちっともポラロイド風には見えないことになります。encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので、別の方法で回避しました。class="photofrm">?</div>で、挟むようにしました。この場合、ポラロイド風の枠は、画像のサイズごとに設定しなくてはならないようになります。この記事の場合は、使用する画像のサイズがwidth="130"とheight="170"ですので、同じサイズのwidth:130px;とheight:170px;をphotofrmに追加しました。#DCE3E3;}この画像と文字のソースコード(この画像を文字を記事に入れるとき、下の通りに入力します。KOROPPYさんの記事のように、どうせなら、ポラロイド風の飾り枠にワンポイントの画像を設定してみましょう。padding(余白)の下部分を追加して、そこに、画像を配置します。左;で設定されているので、下部分の10px→35pxとしました。余白部分の背景色は白色(#FFFFFF)で、右下に画像を設置させたいので、左端から幅の90%で、上から高さの97%の位置と設定しました。(これは設置する画像と好みの位置をご自分で調節してください。#DCE3E3;}この画像と文字のソースコード(この画像を文字を記事に入れるとき、下の通りに入力します。/></div>なお、今回使用の足跡の画像は、1キロバイトの素材屋さん様からお借りしました。この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。画像を右に配置して、そのとなりの文章を枠線で囲む。(CSS編集)CSS編集をしましょう画像を左に配置してそのとなりに文字を書く。(CSS編集)画像を左右に並べて間に文を書く画像タグのエラーを回避する。図形のalign属性によるWin+IEの表示の不具合を直す。画像を右に配置して、そのとなりの文章を枠線で囲む。ポラロイド風、可愛いですよね~。右下にアイコンをつけると本当に可愛い♪(゚-゚*)(。*)ウンウン足跡の画像も可愛らしいですね~♪paddingがきかない件は知らなかったです。そんな問題もあるのですね!!勉強になりました~。ありがとうございました。editコメント>まゆびさん、こんばんはー♪>ポラロイド風、可愛いですよね~。右下にアイコンをつけると本当に可愛い♪(゚-゚*)(。*)ウンウンそうでしょ♪実はこの記事を書くに当たって随分色々試してみたんですよ。してもXML宣言をとりたくなかったし、でもポラロイドもやってみたいし・・・というジレンマでした。今日までの記事で、ちょくちょく実験がてら、ポラロイド風をしていたのはそういう事情だったんですよ。>paddingがきかない件は知らなかったです。そんな問題もあるのですね!!そーなんですよ♪KOROPPYさんの記事の追記でもありますが、IE6のバグだなんて・・・yozoも全く知りませんでしたよ。editコメントこんにちは。んー・・・firefoxだと、左右同じに見えますね☆IEで見ると、「ああ、この違いかぁ」とか、わかるのですが。encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので↑そうなんでっす!!コレで悩んで泣き寝入りしたのでっす(p_q*)・・・(・・*)。editコメント>まこさん、こんばんはー♪>んー・・・firefoxだと、左右同じに見えますね☆そうでしょ♪実はyozoもここ2ヶ月以来ずっとFireFoxなんですが、記事作成の時には、IEでもプレビューしながら作成しています。(最後はOperaもついでにチェックという具合です。)この記事は、ちょっとだけ苦労しましたね。こっしょり、センタリングのことも本当は記事にすればよかったのですが、このことは、別記事にするつもりでっす。IE6.0のバグですからね。もじらちゃんが正解だと思いますよ。IE7はまだ様子見で使用してませんから、わからないのですが、どなたかIE7でみたらどうなのか教えて欲しいものですね。FireFoxと同じ結果だと思うのですけどね。editコメント>ウッキさん、こんばんはー♪>コレで悩んで泣き寝入りしたのでっす(p_q*)そうだったんですか!yozoも何とか回避するための方法を考えました。これはここ1カ月くらいずっと色々やって試していたことなんですよ。他にもいい回避方法があるのかもしれませんね。何かあったら教えてくださいね。>ちなみに2種類設定したい場合、1・2をつけて分けても大丈夫ですよね・・・?そうですよ。番号付けでもいいし、normalのところを、orangeとかappleとか変更してもいいかもしれませんね。お好みの方法でよろしいかと思います。やる気モードが芽ばえてしまいましたぁ(笑)あはは・・・やる気でましたか!記事を書いてよかったですよ。_)m>右下にアイコンをつけてるところが可愛いですね♡気に入っちゃいましたぁ♪記事にあるように、KOROPPYさんの記事で紹介されていたCSSを参考にさせていただいたのですよ。いつもyozoはお世話になってますよ(*゚▽゚)*。