2006年11月15日
画像にポラロイド風の飾り枠を設定しましょう（CSS編集）
せっかくの画像を記事に入れるのなら、ちょっと目立つように周りを飾ってみたくなりますよね♪
それでここの記事画像の枠線を設定しましょう（CSS編集）では、画像の枠線（border）を設定して、画像が引き立つようにしてみました。記事はコチラ→画像の枠線を設定しましょう（CSS編集）
この記事では、お友達のKOROPPYの本棚のKOROPPYさんの記事CSSでココログの画像をポラロイド風にアレンジを参考にして、記事の画像に縁取りを付けてみました。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
画像にポラロイド風の飾り枠を設定しましょう
画像の周りに余白(padding)を入れて、飾り枠のようにします。
padding: 上 右 下 左;を同じ値にしてみました。
CSS編集で追加するコード
/*ポラロイド風の枠の設定*/.photofrm
{
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="photofrm" />
いかがでしょうか？左右が同じように、ポラロイド風の枠が見えますか？右側にはちゃんと枠があるけど、左側には枠が見えないのではありませんか？
KOROPPYさんも記事の追記で案内されていましたが、ここのテンプレートを提供してくださている、小粋空間のyujiroさんの記事標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示するによりますと、ここのブログのようにXHTML1.0準拠のテンプレート使用のブログの記事を、IE6.0かそれに順ずるブラウザで見た場合、imgタグの中のpadding（余白）が効かないそうです。ですから、左の画像のように、imgタグの中にclass="photofrm"を入れても、余白部分が見えないので、ちっともポラロイド風には見えないことになります。
これを回避する方法としては、XHTML1.0準拠のテンプレートのHTML編集で、1行目の
<?xml version="1.0" encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので、別の方法で回避しました。
imgタグの中に入れずに、<div class="photofrm">〜</div>で、挟むようにしました。ただし、この場合、ポラロイド風の枠は、画像のサイズごとに設定しなくてはならないようになります。
この記事の場合は、使用する画像のサイズがwidth="130"とheight="170"ですので、同じサイズのwidth:130px;とheight:170px;をphotofrmに追加しました。
CSS編集で追加するコード
/*ポラロイド風の枠の設定*/.photofrm
{
width:130px;
height:170px;
padding: 10px 10px 10px 10px;
background-color: #FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<div class="photofrm"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>
画像にポラロイド風の飾り枠にワンポイントの画像を設定しましょう
KOROPPYさんの記事のように、どうせなら、ポラロイド風の飾り枠にワンポイントの画像を設定してみましょう。padding（余白）の下部分を追加して、そこに、画像を配置します。
- padding: 10px 10px 35px 10px;
padding:上 右 下 左;で設定されているので、下部分の10px→35pxとしました。 - background: #FFFFFF url(画像URI) no-repeat 90% 97%;
余白部分の背景色は白色（#FFFFFF）で、右下に画像を設置させたいので、左端から幅の90％で、上から高さの97％の位置と設定しました。（これは設置する画像と好みの位置をご自分で調節してください。）
CSS編集で追加するコード
/*ポラロイド風の枠画像有り*/.normalphotofrm
{
width:130px;
height:170px;
padding: 10px 10px 35px 10px;
background: #FFFFFF url(画像URI) no-repeat 90% 97%;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}
この画像と文字のソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)
<div class="normalphotofrm"><img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" /></div>
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New 連想バトン by yozo | Top | 画像を右に配置して、そのとなりの文章を枠線で囲む。（CSS編集） Old≫
トラックバックURL
トラックバック
≫ やってみた･･･ from さるのこしかけ
投稿で画像を複数挿入する際の 『かっちょいぃ~く見せる小技』 を ｙｏｚｏの気が向いたと気2.0様で教えて頂きましたm(_ _"m)本当に丁寧に教えてくださいますｎｏ･･･私なんか自分の入力ミスまで質問しちゃいましたヮ･･･ まず ｿｯﾁﾗ様です (。・・)σ∴像枠� [Read More]
トラックバック
≫ CSSでココログの画像をポラロイド風にアレンジ from KOROPPYの本棚
そのまま画像をUPしてもいいのですが、ちょっとお洒落にアレンジしてみたい。 と思っていたら、いい方法を発見しました[ハート] ブログカスタマイズメモ DEAR DAYS別冊さまの「写真をポラロイド風にする」と「ポラロイド背景に画像を(グレー系)」です。 画像をつかうとより [Read More]
トラックバック
≫ 画像にポラロイド風の飾り枠 from HAPPY TALK ?
画像をポラロイド風にしているブログをよく見かけ、前々から可愛いな〜と思っただけで終わってたんですけど、以下の記事を参考させてもらって、ようやくやってみる事にしました。多謝！●yozoの気が向いたと記2.0さん画 [Read More]
トラックバック
≫ ポラロイド風にアレンジ！！！ from キラキラ☆neverland
画像にポラロイド風の飾り枠にワンポイントの画像を設定昨日無事にメインブログの方が設定できたので今日はココのブログでやってみま〜す●画像にポラロイド風の飾り枠を設定しましょう（CSS編集）yozoさんのブログに [Read More]
トラックバック
≫ cssのお勉強（写真をポラロイド風に） from *HeartHills blog*
私のブログの記事では村の様子をとった写真が多いのですが、今日は「写真をポラロイド風に」してみました。実は今までもポラロイド風に写真に枠をつけて表示させていたのですが、ちょっとズルをしていたところがござ [Read More]
トラックバック
≫ 写真にポラロイド風の枠をつけてみた from 今日の大判小判
ずっと前からつけたかった、写真にポラロイド風の枠をつけるカスタマイズをやりました。参考にした記事はこちら(yozoの気が向いたと記2.0様-画像にポラロイド風の飾り枠を設定しましょう（CSS編集))です。とっても分かりやすくてIE6.0で枠が見えない時の対処法もあり、助�... [Read More]
コメント
ポラロイド風、可愛いですよね〜。
右下にアイコンをつけると本当に可愛い♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
足跡の画像も可愛らしいですね〜♪
paddingがきかない件は知らなかったです。そんな問題もあるのですね!!
勉強になりました〜。ありがとうございました。(*- -)(*_ _)ペコリ
Posted by まゆび at 2006.11.15 19:25 | edit
コメント
＞ポラロイド風、可愛いですよね〜。右下にアイコンをつけると本当に可愛い♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
そうでしょ♪実はこの記事を書くに当たって随分色々試してみたんですよ。どうしてもXML宣言をとりたくなかったし、でもポラロイドもやってみたいし・・・というジレンマでした。今日までの記事で、ちょくちょく実験がてら、ポラロイド風をしていたのはそういう事情だったんですよ。(^○^)
＞paddingがきかない件は知らなかったです。そんな問題もあるのですね!!
そーなんですよ♪KOROPPYさんの記事の追記でもありますが、IE6のバグだなんて・・・
yozoも全く知りませんでしたよ。┐( -"-)┌ﾔﾚﾔﾚ...お役にたてて何よりでっす m(_ _)m
Posted by まゆびさんへ at 2006.11.15 20:13 | edit
コメント
んー・・・firefoxだと、左右同じに見えますね☆
IEで見ると、
「ああ、この違いかぁ」とか、わかるのですが。
もじら〜系は、囲み罫に弱いから☆
結構難しい問題でしょうか？？？
ああ、コメントにオチがなかった！
ごめんなさいぃぃぃ<(_ _；)>
Posted by 柴成 at 2006.11.15 21:25 | edit
コメント
> <?xml version="1.0" encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので
↑そうなんでっす!!コレで悩んで泣き寝入りしたのでっす(p_q*)
･･･(・・*)。。oＯ(ｙｏｚｏさん、やっぱり凄いな〜･･･)
ウッキは考えることも出来ませんでした･･･...A=´、｀=)ゞ
よかった〜実はポラロイドにしたかった写真が今まで沢山あって･･･
画像のサイズを一定にすればいいのですね♪ありがとうございまっすm(_ _"m)
ちなみに２種類設定したい場合、１・２をつけて分けても大丈夫ですよね･･･？
ＰＳ．まだ画像はアップに至ってないのですが、ｃｓｓの編集は滞り無く設定を済ませて辞書ツールに入力のタグを記憶させました♪
使用に至りましたら、前記事にご報告いたしまっす
いつもありがとうございまっすm(_ _"m)
Posted by ウッキ at 2006.11.15 22:16 | edit
コメント
しばらく ＣＳＳやカスタマイズのことなど すっかり忘れて 日々の記事のアップだけで いっぱいいっぱいでしたが・・・またまた やる気モードが芽ばえてしまいましたぁ(笑）
右下にアイコンをつけてるところが可愛いですね♡気に入っちゃいましたぁ♪いっぺんには出来ないので ゆっくり時間をかけて挑戦してみようと思います(*^_^*)
Posted by miyu at 2006.11.15 23:07 | edit
コメント
＞んー・・・firefoxだと、左右同じに見えますね☆
そうでしょ♪実はyozoもここ２ヶ月以来ずっとFireFoxなんですが、記事作成の時には、IEでもプレビューしながら作成しています。（最後はOperaもついでにチェックという具合です。）
この記事は、ちょっとだけ苦労しましたね。どうやって説明するのかを含めて・・・(^○^)
こっしょり、センタリングのことも本当は記事にすればよかったのですが、このことは、別記事にするつもりでっす。(*^-^)
＞ああ、コメントにオチがなかった！ごめんなさいぃぃぃ<(_ _；)>
あはは・・・オチがなくてもOKですよ♪(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
IE6.0のバグですからね。もじらちゃんが正解だと思いますよ。IE7はまだ様子見で使用してませんから、わからないのですが、どなたかIE7でみたらどうなのか教えて欲しいものですね。たぶんFireFoxと同じ結果だと思うのですけどね。(^○^)
Posted by 柴成さんへ at 2006.11.15 23:28 | edit
コメント
＞コレで悩んで泣き寝入りしたのでっす(p_q*)
そうだったんですか！yozoも何とか回避するための方法を考えました。これはここ１カ月くらいずっと色々やって試していたことなんですよ。ようやく記事にできましたよ。他にもいい回避方法があるのかもしれませんね。何かあったら教えてくださいね。m(_ _)m
＞ちなみに２種類設定したい場合、１・２をつけて分けても大丈夫ですよね･･･？
そうですよ。番号付けでもいいし、normalのところを、orangeとかappleとか変更してもいいかもしれませんね。お好みの方法でよろしいかと思います。(^○^)
＞使用に至りましたら、前記事にご報告いたしまっす
ご丁寧にありがとーございまっす♪楽しみにしておきますね♪v(*'-^*)ｂぶいっ♪
Posted by ウッキさんへ at 2006.11.15 23:35 | edit
コメント
＞またまた やる気モードが芽ばえてしまいましたぁ(笑）
あはは・・・やる気でましたか！記事を書いてよかったですよ。励みになりまっすm(_ _)m
＞右下にアイコンをつけてるところが可愛いですね♡気に入っちゃいましたぁ♪
記事にあるように、KOROPPYさんの記事で紹介されていたCSSを参考にさせていただいたのですよ。いつもyozoはお世話になってますよ(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞いっぺんには出来ないので ゆっくり時間をかけて挑戦してみようと思います(*^_^*)
そうですね。ひとつずつクリアーしていけばいいと思いますよ。ご自分でどうしたいのかというのが一番大切ですからね。がんばってくださいね。v(*'-^*)ｂぶいっ♪
Posted by miyuさんへ at 2006.11.15 23:41 | edit
コメント
念願のポラロイド成功しました〜。・゜・(/Д`)・゜・。ありがとうございまっすぅ
記事にしましたのでトラバさせていただきました♪
宜しくお願いしますm(_ _"m)ﾍﾟｺｰｰｰｯ
Posted by ウッキ at 2006.11.16 07:44 | edit
コメント
こちらも記事中にリンクを貼らせて頂きましたぁm(_ _"m)
(￣ω￣;)ｴｰﾄｫ...
･photofrmのｃｓｓ内にbackground: #FFFFFF；を足しました
同じ記事で申し訳ありませんがこちらにもトラバさせていただきました
宜しくお願いいたしまっすm(_ _"m)
Posted by ウッキ at 2006.11.16 07:49 | edit
コメント
可愛らしい足跡アイコンですね♪
ココログではIEの問題が起きなかったのですが、
seesaaでは起きたんですよね。
手軽さを優先して、問題の記述をさっくり削除しちゃいましたよ(^^;;
Posted by KOROPPY at 2006.11.16 11:36 | edit
コメント
＞念願のポラロイド成功しました〜。・゜・(/Д`)・゜・。ありがとうございまっすぅ
できましたか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
たった今、お邪魔させていただきました。たくさん紹介してくださったのですね。
本当にありがとーございまっす♪お役に立ててうれしいですよ。m(_ _)m
追伸：トラバありがとーございまっす♪
こちらからもお返しトラバさせていただきました。m(_ _)m
Posted by ウッキさんへ at 2006.11.16 13:39 | edit
コメント
＞photofrmのｃｓｓ内にbackground: #FFFFFF；を足しました
えっ？おお！本当だ！抜けてましたね。（;￣ー￣A ｱｾｱｾ･･･
あのままだと背景が透けてしまってますよね。(≧▽≦;)ｱﾁｬｰ
早速記事修正させていただきました。お知らせしてくださってありがとーございまっす♪
これからも、もしお気づきの点がありましたら、些細なことでも、
遠慮なく指摘してくださいね♪よろしくお願いします m(_ _)m
Posted by ウッキさんへ at 2006.11.16 13:44 | edit
コメント
お返しのトラバ入れてくださり、ありがとーございまっす♪m(_ _)m
随分前から、お借りしていたCSSコードなのに、紹介が遅れて申し訳ありませんでした。お分かりかとは思いますが、divのclassで定義した場合は、さらに画像のセンタリングが問題になってきました。ここでも、またまたIE6のバグに遭遇することとなり、記事をどのように作成していくかを考えた結果、ここまで先延ばしの紹介になったというのが真相です。お察しくださりありがとーございまっす♪m(_ _)m
＞手軽さを優先して、問題の記述をさっくり削除しちゃいましたよ(^^;;
あはは・・・imgタグに入れるほうが本当に手軽ですもんね。
yozoもIE6をIE7へアップグレードさせたい衝動に駆られましたよ。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
Posted by KOROPPYさんへ at 2006.11.16 14:03 | edit
コメント
足跡マークがついてるポラロイド風カワイイですね。
safariで見ると左右同じに見えます。
FC2 はテンプレが豊富でカスタマイズしやすいのはいいんだけど
macで見るとグジャグジャなテンプレがあるのは困り者ですね。
Posted by 蘭子 at 2006.11.16 18:32 | edit
コメント
＞ほお〜〜。スバラしい！足跡マークがついてるポラロイド風カワイイですね。
ふふふ・・・そうでしょ♪KOROPPYさんのポラロイド風の真似をさせていただいたのですよ。
足跡マークがやっぱり基本かなぁ〜って思いました。(^○^)
＞safariで見ると左右同じに見えます。
わぁ♪ありがとーございまっす♪Mac+safariでもちゃんと見えてましたか♪
じゃぁ〜やっぱりWin+IE6.0で見たXHTML準拠ブログのバグだったのですね。(*´ο`*)=3
＞macで見るとグジャグジャなテンプレがあるのは困り者ですね。
ブラウザによって全然違いますし、Macならなおさらでしょうね。
yozoも注意するようにしてますが、何かお気づきの点等がありましたら、遠慮なく指摘してくださるとありがたいです。今後ともよろしくお願いしまっす m(_ _)m
Posted by 蘭子さんへ at 2006.11.16 19:50 | edit
コメント
ポラロイド風おもしろい〜♪
ワンポイントつけると とても可愛いですね＾＾
見ているだけで嬉しいです(*＾▽＾*)
((○（＾▽＾）○)) ウキウキしちゃいました(*^^*) ァハ
Posted by ゆうゆ at 2006.11.16 19:59 | edit
コメント
ポラロイド風、とっても素敵ですね！
足跡アイコンがつくとこれまたかわいいじゃないですかぁ☆
うーんこういう、ちょっとした工夫で
こんなに素敵な画像になるんですねぇ。。
いつも色んなことを教えてくださってありがとございます！！
Posted by babar at 2006.11.16 23:18 | edit
コメント
記事にもコメントのお返事にもっ詳しく書いてくださってたのに
ほんとに 失礼いたしました<(_ _)>
一応 yozoさんの方法でも表示されたのでｓすが
なぜか画像が中央に来なくて 少々悩んでいました。。。。^_^;
で もう一度 こちらにお邪魔して よ〜く読ませていただいたら
KOROPPYさんのことが書かれてて
あ〜〜。。。なんてこと・・・・
私がCSS編集をしてたのはココログの方だったこと！！！
さっそくやり直してみたら 無事に表示できましたぁ♪
でも 自分の記事にも書きましたが
もうひとつのブログはFC2なので yozoさんの教えてくださった
CSS編集必要なので 今度をやってみますね(*^_^*)
なんか 私の勝手な思い込みで ドタバタしちゃってごめんなさいね。
こんな私ですが これからも宜しくお願いします<(_ _)>
Posted by miyu at 2006.11.17 00:00 | edit
コメント
＞ポラロイド風おもしろい〜♪ワンポイントつけると とても可愛いですね＾＾
そうでしょ♪写真にこんな感じの枠をつけたら、記事がより一層見栄えよくなりますよね♪
ちょっと面倒ですが、写真サイズを決めてCSSを書いておけば、ずっとコピペで枠をつけることができますからね。お時間あるときにでもお試しあれ。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
なぁ〜んて押し売りしたりなんかしちゃったりして・・・（;￣ー￣A ｱｾｱｾ･･･
Posted by ゆうゆさんへ at 2006.11.17 09:26 | edit
コメント
＞ポラロイド風、とっても素敵ですね！足跡アイコンがつくとこれまたかわいいじゃないですかぁ
そうでしょ♪いつもKOROPPYさんのブログ『KOROPPYの本棚』にお邪魔して「いいなぁ〜♪」って思っていたんですよ。やっと記事まとめておすすめできるようになりました。 (*^-^)
＞うーんこういう、ちょっとした工夫でこんなに素敵な画像になるんですねぇ。。
でしょ？素敵な写真に飾り枠でさらに見栄えよくなりますね。
見本に写真が用意できないのが、残念でしたよ。（;￣ー￣A ｱｾｱｾ･･･
（yozoの写真は見られたものではありませんからね。
リアルな友人の間では、下手で有名だったりしてますです。(ﾉ△･｡) ）
Posted by babarさんへ at 2006.11.17 09:47 | edit
コメント
＞yozoさん またまたおじゃましま〜す♪
あはは・・・またまたいらっしゃいませ〜♪(*^-^)
＞なぜか画像が中央に来なくて 少々悩んでいました。。。。^_^;
そーなんですよ。実はセンタリングにはちょっと工夫しなきゃいけないんです。IE6.0用とそれ以外のブラウザ用の2重のセンタリングをかけないといけないのですよ。もう少し記事にするのは先の予定なんですが・・・(ﾟｰﾟ;Aｱｾｱｾ
＞私がCSS編集をしてたのはココログの方だったこと！！！
＞さっそくやり直してみたら 無事に表示できましたぁ♪
ふふふ・・・この記事の一番はじめのCSSを使えばいいのですよ。KOROPPYさんの記事のコードを参考にさせていただいていますからね。特にborder（枠線）の４色はそのままお借りしてますよ。これがポイントですからね。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞なんか 私の勝手な思い込みで ドタバタしちゃってごめんなさいね。
いえいえ♪基本はご自分ですからね。ちょっとした失敗なんて、よくあることですよ。それにドタバタなんて思ってません。センタリングまで記事にすると、さらに記事が膨れ上がってポイントが絞りきれなかったんですよ。なんとかしようってセンタリングまでチャレンジされたのはとっても素晴らしいと思います。これからも応援しますよ。センタリングの記事は現在作成中です。しばらくお待ちくださいね♪(*^-^)
Posted by miyuさんへ at 2006.11.17 09:49 | edit
コメント
ポラロイド風って、いいですね。特に、あのワンポイントいいです
今は、ちょっと出来ないのですが、(理由は、私のブログを見てください。)試してみたいです。
Posted by ネーちゃん at 2006.11.17 12:06 | edit
コメント
ポラロイド風、可愛いですよね。
私もやってみたい〜とずっと思ってて、yozoさんのエントリーを見て思い切ってカスタマイズしてみましたv
（トラバ入れさせてもらいましたです）
私もIEユーザーなので、最初はちゃんと表示されなくて…。
yozoさんの案を取ろうか、例の1行目の記述を削除しようか迷い、後者の楽な方を取っちゃったのですが（笑）
1行目を削除した事で、不具合とかは起きないのでしょうか。
この辺の事は全くわからず、怯えながらのカスタマイズだったりします；；
IEのこの妙なバグ、直して欲しいですよね（汗）
ではでは、前回のカスタマイズ同様、わかりやすい解説、ありがとうございました＾＾
Posted by さくら at 2006.11.17 15:48 | edit
コメント
再度ご報告でっすm(_ _"m)
サイズを指定して数種類設定しましたが･･･
大きくなる分には異サイズでもちゃんと対応するようでっす
（入力ミスから発見･･･）
ワンポイント入れも実行してみました♪かぁいぃでっす(///∇//)
ありがとうございました〜♪
Posted by ウッキ at 2006.11.17 17:39 | edit
コメント
＞ポラロイド風って、いいですね。特に、あのワンポイントいいです
そうでしょ♪お友達のKOROPPYさんのコードをお借りして、かわいいワンポイントは、1キロバイトの素材屋さん様からお借りしているんですよ。他にもたくさんかわいい素材を配布してくれていますよ。お時間あるときにでものぞいてみてくださいね♪
（ご存知だったらごめんなさい。m(_ _)m）
＞今は、ちょっと出来ないのですが、(理由は、私のブログを見てください。)試してみたいです。
新品がはやく手に入るといいですね。それまでは、ちょっと我慢しなきゃしかたありませんね。でも、お身体の具合等が悪かったわけではなく安心しましたよ。(*´ο`*)=3 ほっ
Posted by ネーちゃんさんへ at 2006.11.17 20:16 | edit
コメント
＞ポラロイド風、可愛いですよね。私もやってみたい〜とずっと思ってて、
＞yozoさんのエントリーを見て思い切ってカスタマイズしてみましたv
お役に立ててうれしいですよ♪KOROPPYさんのコードをお借りして、それを小粋空間のyujiroさんの情報を元にXHTML準拠で使えるようにアレンジしたという感じなんですよ。
＞後者の楽な方を取っちゃったのですが（笑）
＞1行目を削除した事で、不具合とかは起きないのでしょうか。
その点は実はyozoはチェックできていないのですよ。ただ、ここのテンプレの１行目を一度削除した後で、Another HTML-lint gatewayでチェックすると、とてつもなく大量にエラーが出ていたので、やめちゃいました。m(_ _)m
＞ではでは、前回のカスタマイズ同様、わかりやすい解説、ありがとうございました＾＾
いえいえ♪こちらこそ、励みになります。しかもトラバも入れてくださりありがとーございまっす♪
こちらからもお返しさせていただきますね。m(_ _)m
追伸：他の記事にもお返しのトラバありがとーございまっす♪リンクも旧ブログのままになっていましたのでHAPPY TALK ? に変更させていただきました。m(_ _)m
Posted by さくらさんへ at 2006.11.17 20:18 | edit
コメント
＞再度ご報告でっすm(_ _"m)サイズを指定して数種類設定しましたが･･･
＞大きくなる分には異サイズでもちゃんと対応するようでっす
そうでしょ♪IE6.0だけだと思うのですが、ブラウザの自己調整みたいな感じでちゃんと表示されますよね。なんだか裏技っぽくて便利かも？ですね。ただ、FirefoxやOperaではやっぱりサイズをしっかり指定しないと枠がズレちゃうんですよ。その他の不具合のチェックまではyozoにもできていませんが・・・(^-^;
＞ワンポイント入れも実行してみました♪かぁいぃでっす(///∇//)
うまくいきましたか！こっしょりのぞいてきました。(^○^)
ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
ちゃんと後ほど、お邪魔させていただきますね。m(_ _)m
Posted by ウッキさんへ at 2006.11.17 20:30 | edit
コメント
もうひとつのブログ yozoさんのCSS編集でちゃんとできましたぁ＼(~o~)／
昨日散々やってたので 思ったより早くできたみたい（*´▽`*) ヤッター！そして忘れずに ＴＢもさせていただきましたぁ♪
次はセンタリング！！頑張るぞ〜！ なんちゃって♪
でも これからだんだん慌しい時期になるので
ぜった〜い ムリなさらないでね。記事はゆっくりで大丈夫よ〜ん♪
今はポラロイド風に出来ただけで 凄くうれしいんだもの(~o~)
ではでは ホントに何度もアドバイスありがとうございました<(_ _)>
Posted by miyu at 2006.11.18 00:37 | edit
コメント
＞もうひとつのブログ yozoさんのCSS編集でちゃんとできましたぁ＼(~o~)／
たった今、お邪魔させていただきましたよ♪CSS編集もばっちりできていましたね。(^○^)
随分管理画面にも慣れてきたみたいですね。やっぱり習うより慣れろだったでしょ。(*^-^)
ただ、気になることがあります。お気づきかもしれませんが、もともとのCSSコードのはたらきで、枠線が２重になっていますね。
えっとそのことを書く前に一言お詫びでっす。
そちらのコメントに、この点をついつい長々書いちゃいましたごめんなさい。miyuさんのお友達が見たらどんな会話してるんだ！って思われますよね。失礼しました。投稿したコメントが承認制のため編集できなくて、やむを得ず、こちらでお詫びさせていただきますね。m(_ _)m
問題となるCSSコードはこれです。これをコメントアウトしてもいいかもしれませんね。（/*と*/で囲むだけですよ。）詳しくはコチラを参考にしてくだい。
http://yozoblog2.blog63.fc2.com/blog-entry-436.html
/*テキスト内の画像*/
/*.entry_text img {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
margin: 0px 5px 5px 0px;
padding: 3px;
} */
＞ヤッター！そして忘れずに ＴＢもさせていただきましたぁ♪
記事での紹介及びトラバありがとーございまっす♪
yozoからもお返しトラバ入れさせていただきましたよv(｡･ω･｡)ｨｪｨ♪
＞次はセンタリング！！頑張るぞ〜！ なんちゃって♪
ふふふ・・・張り切ってますね♪＼(*⌒0⌒)ｂがんばっ♪
＞ぜった〜い ムリなさらないでね。記事はゆっくりで大丈夫よ〜ん♪
あはは・・・ありがとーございまっす♪ちょっとどうやって記事にするかを考え中なんです。ここでローカル配布しているCLEVERBBSのスキンも全ブラウザ共通のセンタリングにしなきゃいけませんからね。ちょっとお時間くださいませ。m(_ _)m
Posted by miyuさんへ at 2006.11.18 11:16 | edit
コメント
やっと この意味がわかりましたぁ！！！
（ここの部分はCSSはイジってはないのですよね。
初めはこういう設定なのでしょうか？良くわかりませんが・・）
なんで このブログは 画像をいれると余白が出来ちゃうのか
すごーーく不思議でした。
＞。（/*と*/で囲むだけですよ。
はい！ちゃんとご指摘の通りやって解決しました。
ほんとに丁寧に色々アドバイスしてくださってありがとうございました。
コメントのほうは 全然ＯＫ！ですよ〜。
だって yozoさんのコメントから 何かヒントとかアドバイスにもなったりしてると思いますよ★っていうか何より私自身が助かります(*^_^*)
なので これからも お時間のある時でいいですから 気になることとかありましたら どこでもいいのでお気軽にコメントしてくださいね♪
またまた長々と失礼いたしました<(_ _)>
Posted by miyu at 2006.11.18 18:21 | edit
コメント
＞やっと この意味がわかりましたぁ！！！
わかってくださいましたか♪miyuさんちのコメントではかなりわかりにくくなっていましたからね。他のみなさんにも参考になるかもしれませんので、本来、ここのレスコメントで詳しく解説するようにしているのですが、うっかり書き込んでしまったんです。余計な混乱を招いたみたいでごめんなさいでした。m(_ _)m
＞初めはこういう設定なのでしょうか？良くわかりませんが・・
テンプレートの作者の方がはじめから設定しているのだと思いますよ。
＞はい！ちゃんとご指摘の通りやって解決しました。
今、またまたお邪魔させていただきました。CSSのコメントアウトもバッチリでしたね。
これでうまくできましたよ。ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞気になることとかありましたら どこでもいいのでお気軽にコメントしてくださいね♪
(*^▽^*)ﾉﾊｰｲ ♪そのようにさせていただきますね。ありがとーございまっすm(_ _)m
＞またまた長々と失礼いたしました<(_ _)>
いえいえ♪ここのコメントは、一言でも、たくさんでも、なんでもＯＫなので、
お気軽にどうぞ。今後ともよろしくでっす m(_ _)m
Posted by miyuさんへ at 2006.11.18 20:16 | edit
コメント
実は何度もお邪魔しているのですが、コメントをさせていただくのは初めてです。
今回、「ポラロイド風」に挑戦しまして、やっとやっとできたのでご報告させていただきます。
これまでは画像にclassをつけて、さらに?xml宣言を削除して表示していたのですが、どうせならとお勉強させていただきましたm(_ _"m)
自分のブログは記事中の写真が多いので、可愛くカスタマイズすることができ、感謝しております♪
お世話になります、またお邪魔させていただきます。
Posted by とこたん at 2007.03.24 10:03 | edit
コメント
＞実は何度もお邪魔しているのですが、コメントをさせていただくのは初めてです。
(￣◇￣;)ｴｯ そーだったのですか？コメントしてくださってありがとーございまっす♪
タイトル通りの『気が向いたと記』ですが、いつでも気軽に遊びにきてくださいね♪(^○^)
＞今回、「ポラロイド風」に挑戦しまして、やっとやっとできたのでご報告させていただきます。
(ﾉ´▽｀)ﾉｵｵｵｵｯ♪そうですか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
お役に立ててうれしいでっす。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
とりあえずこの「ポラロイド風」に関しては、ややこしいのはIE6.0だけみたいですね。IE7.0ではちゃんと余白も生きますからね。それでも、IEとその他のブラウザへの対応はやむなし・・・みたいなんですけど・・・。yozoもまだまだ小粋空間様や他のサイト様で勉強中ってとこなんでっす。（;￣ー￣A ｱｾｱｾ･･･
＞お世話になります、またお邪魔させていただきます。
勝手ながらお邪魔させていただき、リンクさせていただきました。
こちらこそ、今後ともよろしくお願いしまっす m(_ _)m
Posted by とこたんさんへ at 2007.03.24 10:49 | edit
コメント
この度は私の記事へのコメント並びにトラバをいただき、ありがとうございました。
何だかとっても嬉しい反面、恐縮しております(*^^*ゞ
cssって何？から始めたカスタマイズですが、こうしてお勉強してみるといろいろなことが解ってきて楽しくなりますね。
そしてリンクもいただき、本当にありがとうございます<(_ _)>
これからもよろしくお願い致します（＾＾）
※ドキドキしながらこちらからもトラバさせていただきました。
またお邪魔させていただきま〜す★
Posted by とこたん at 2007.03.26 23:54 | edit
コメント
＞何だかとっても嬉しい反面、恐縮しております(*^^*ゞ
(∩。∩;)ゞﾃﾚﾃﾚ･･･そんなぁ〜♪yozoこそ、記事での紹介ありがたかったですよ。(^○^)
＞cssって何？から始めたカスタマイズですが、こうしてお勉強して
＞みるといろいろなことが解ってきて楽しくなりますね。
yozoもそうでしたよ。まず勉強ありき。でなくって、「こんなのがしたいなぁ〜」から
入りましたよ。ちょっといじると反映されるので、うまくいかないことも多いですが、
思うとおりにできると、楽しいですよね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
追伸：リンク及びお返しのトラバありがとーございまっす♪ m(_ _)m
ばっちり投稿できていますよ♪ v(*'-^*)ｂぶいっ♪
Posted by とこたんさんへ at 2007.03.27 17:36 | edit