--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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" />


061115pic1.jpg
061115pic1.jpg

 いかがでしょうか?左右が同じように、ポラロイド風の枠が見えますか?右側にはちゃんと枠があるけど、左側には枠が見えないのではありませんか?

 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>


061115pic2.jpg

画像にポラロイド風の飾り枠にワンポイントの画像を設定しましょう

 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>


061115pic3.jpg

なお、今回使用の足跡の画像は、1キロバイトの素材屋さん様からお借りしました。

  • yozoからのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


yozoの気が向いたと記2.0の関連記事紹介

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 連想バトン by yozo | Top | 画像を右に配置して、そのとなりの文章を枠線で囲む。(CSS編集) Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪(^▽^)/
ポラロイド風、可愛いですよね~。
右下にアイコンをつけると本当に可愛い♪(゚-゚*)(。。*)ウンウン
足跡の画像も可愛らしいですね~♪

paddingがきかない件は知らなかったです。そんな問題もあるのですね!!
勉強になりました~。ありがとうございました。(*- -)(*_ _)ペコリ

コメント

>まゆびさん、こんばんはー♪

>ポラロイド風、可愛いですよね~。右下にアイコンをつけると本当に可愛い♪(゚-゚*)(。。*)ウンウン
そうでしょ♪実はこの記事を書くに当たって随分色々試してみたんですよ。どうしてもXML宣言をとりたくなかったし、でもポラロイドもやってみたいし・・・というジレンマでした。今日までの記事で、ちょくちょく実験がてら、ポラロイド風をしていたのはそういう事情だったんですよ。(^○^)

>paddingがきかない件は知らなかったです。そんな問題もあるのですね!!
そーなんですよ♪KOROPPYさんの記事の追記でもありますが、IE6のバグだなんて・・・
yozoも全く知りませんでしたよ。┐( -"-)┌ヤレヤレ...お役にたてて何よりでっす m(_ _)m

コメント

こんにちは。
んー・・・firefoxだと、左右同じに見えますね☆
IEで見ると、
「ああ、この違いかぁ」とか、わかるのですが。
もじら~系は、囲み罫に弱いから☆
結構難しい問題でしょうか???
ああ、コメントにオチがなかった!
ごめんなさいぃぃぃ<(_ _;)>

コメント

yozoさん( ^-^)ノ(* ^-^)ノこんばんわぁ♪

> <?xml version="1.0" encoding="utf-8"?>を削除すると表示されるようになるそうですが、XHTMLの準拠をyozo自らやめるわけにはいきませんので

↑そうなんでっす!!コレで悩んで泣き寝入りしたのでっす(p_q*)
・・・(・・*)。。oO(yozoさん、やっぱり凄いな~・・・) 
ウッキは考えることも出来ませんでした・・・...A=´、`=)ゞ
よかった~実はポラロイドにしたかった写真が今まで沢山あって・・・
画像のサイズを一定にすればいいのですね♪ありがとうございまっすm(_ _"m)
ちなみに2種類設定したい場合、1・2をつけて分けても大丈夫ですよね・・・?

PS.まだ画像はアップに至ってないのですが、cssの編集は滞り無く設定を済ませて辞書ツールに入力のタグを記憶させました♪
使用に至りましたら、前記事にご報告いたしまっす
いつもありがとうございまっすm(_ _"m)

コメント

yozoさん こんばんは~☆
しばらく CSSやカスタマイズのことなど すっかり忘れて 日々の記事のアップだけで いっぱいいっぱいでしたが・・・またまた やる気モードが芽ばえてしまいましたぁ(笑)
右下にアイコンをつけてるところが可愛いですね♡気に入っちゃいましたぁ♪いっぺんには出来ないので ゆっくり時間をかけて挑戦してみようと思います(*^_^*)



コメント

>まこさん、こんばんはー♪

>んー・・・firefoxだと、左右同じに見えますね☆
そうでしょ♪実はyozoもここ2ヶ月以来ずっとFireFoxなんですが、記事作成の時には、IEでもプレビューしながら作成しています。(最後はOperaもついでにチェックという具合です。)
この記事は、ちょっとだけ苦労しましたね。どうやって説明するのかを含めて・・・(^○^)
こっしょり、センタリングのことも本当は記事にすればよかったのですが、このことは、別記事にするつもりでっす。(*^-^)

>ああ、コメントにオチがなかった!ごめんなさいぃぃぃ<(_ _;)>
あはは・・・オチがなくてもOKですよ♪(=⌒▽⌒=) ニャハハハ♪
IE6.0のバグですからね。もじらちゃんが正解だと思いますよ。IE7はまだ様子見で使用してませんから、わからないのですが、どなたかIE7でみたらどうなのか教えて欲しいものですね。たぶんFireFoxと同じ結果だと思うのですけどね。(^○^)

コメント

>ウッキさん、こんばんはー♪

>コレで悩んで泣き寝入りしたのでっす(p_q*)
そうだったんですか!yozoも何とか回避するための方法を考えました。これはここ1カ月くらいずっと色々やって試していたことなんですよ。ようやく記事にできましたよ。他にもいい回避方法があるのかもしれませんね。何かあったら教えてくださいね。m(_ _)m

>ちなみに2種類設定したい場合、1・2をつけて分けても大丈夫ですよね・・・?
そうですよ。番号付けでもいいし、normalのところを、orangeとかappleとか変更してもいいかもしれませんね。お好みの方法でよろしいかと思います。(^○^)

>使用に至りましたら、前記事にご報告いたしまっす
ご丁寧にありがとーございまっす♪楽しみにしておきますね♪v(*'-^*)bぶいっ♪

コメント

>miyuさん、こんばんはー♪

>またまた やる気モードが芽ばえてしまいましたぁ(笑)
あはは・・・やる気でましたか!記事を書いてよかったですよ。励みになりまっすm(_ _)m

>右下にアイコンをつけてるところが可愛いですね♡気に入っちゃいましたぁ♪
記事にあるように、KOROPPYさんの記事で紹介されていたCSSを参考にさせていただいたのですよ。いつもyozoはお世話になってますよ(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>いっぺんには出来ないので ゆっくり時間をかけて挑戦してみようと思います(*^_^*)
そうですね。ひとつずつクリアーしていけばいいと思いますよ。ご自分でどうしたいのかというのが一番大切ですからね。がんばってくださいね。v(*'-^*)bぶいっ♪

コメント

yozoさん( ^-^)ノ(* ^-^)ノおはょございまっす♪

念願のポラロイド成功しました~。・゜・(/Д`)・゜・。ありがとうございまっすぅ
記事にしましたのでトラバさせていただきました♪
宜しくお願いしますm(_ _"m)ペコーーーッ

コメント

yozoさん、再び( ^-^)ノ(* ^-^)ノおはょございまっす♪
こちらも記事中にリンクを貼らせて頂きましたぁm(_ _"m)
( ̄ω ̄;)エートォ...
・photofrmのcss内にbackground: #FFFFFF;を足しました
同じ記事で申し訳ありませんがこちらにもトラバさせていただきました
宜しくお願いいたしまっすm(_ _"m)

コメント

ご紹介ありがとうございました。
可愛らしい足跡アイコンですね♪

ココログではIEの問題が起きなかったのですが、
seesaaでは起きたんですよね。
手軽さを優先して、問題の記述をさっくり削除しちゃいましたよ(^^;;

コメント

>ウッキさん、こんにちはー♪

>念願のポラロイド成功しました~。・゜・(/Д`)・゜・。ありがとうございまっすぅ
できましたか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
たった今、お邪魔させていただきました。たくさん紹介してくださったのですね。
本当にありがとーございまっす♪お役に立ててうれしいですよ。m(_ _)m

追伸:トラバありがとーございまっす♪
こちらからもお返しトラバさせていただきました。m(_ _)m

コメント

>ウッキさん、こんにちはー♪

>photofrmのcss内にbackground: #FFFFFF;を足しました
えっ?おお!本当だ!抜けてましたね。(; ̄ー ̄A アセアセ・・・
あのままだと背景が透けてしまってますよね。(≧▽≦;)アチャー
早速記事修正させていただきました。お知らせしてくださってありがとーございまっす♪
これからも、もしお気づきの点がありましたら、些細なことでも、
遠慮なく指摘してくださいね♪よろしくお願いします  m(_ _)m

コメント

>KOROPPYさん、こんにちはー♪

お返しのトラバ入れてくださり、ありがとーございまっす♪m(_ _)m
随分前から、お借りしていたCSSコードなのに、紹介が遅れて申し訳ありませんでした。お分かりかとは思いますが、divのclassで定義した場合は、さらに画像のセンタリングが問題になってきました。ここでも、またまたIE6のバグに遭遇することとなり、記事をどのように作成していくかを考えた結果、ここまで先延ばしの紹介になったというのが真相です。お察しくださりありがとーございまっす♪m(_ _)m

>手軽さを優先して、問題の記述をさっくり削除しちゃいましたよ(^^;;
あはは・・・imgタグに入れるほうが本当に手軽ですもんね。
yozoもIE6をIE7へアップグレードさせたい衝動に駆られましたよ。┐( ̄ヘ ̄)┌ ヤレヤレ・・・

コメント

ほお~~。スバラしい!
足跡マークがついてるポラロイド風カワイイですね。
safariで見ると左右同じに見えます。
FC2 はテンプレが豊富でカスタマイズしやすいのはいいんだけど
macで見るとグジャグジャなテンプレがあるのは困り者ですね。

コメント

>蘭子さん、こんばんはー♪

>ほお~~。スバラしい!足跡マークがついてるポラロイド風カワイイですね。
ふふふ・・・そうでしょ♪KOROPPYさんのポラロイド風の真似をさせていただいたのですよ。
足跡マークがやっぱり基本かなぁ~って思いました。(^○^)

>safariで見ると左右同じに見えます。
わぁ♪ありがとーございまっす♪Mac+safariでもちゃんと見えてましたか♪
じゃぁ~やっぱりWin+IE6.0で見たXHTML準拠ブログのバグだったのですね。(*´ο`*)=3
>macで見るとグジャグジャなテンプレがあるのは困り者ですね。
ブラウザによって全然違いますし、Macならなおさらでしょうね。
yozoも注意するようにしてますが、何かお気づきの点等がありましたら、遠慮なく指摘してくださるとありがたいです。今後ともよろしくお願いしまっす m(_ _)m

コメント

yozoさん、こんばんは~(^^)d

ポラロイド風おもしろい~♪
ワンポイントつけると とても可愛いですね^^
見ているだけで嬉しいです(*^▽^*)
((○(^▽^)○)) ウキウキしちゃいました(*^^*) ァハ

コメント

こんばんはー。
ポラロイド風、とっても素敵ですね!
足跡アイコンがつくとこれまたかわいいじゃないですかぁ☆
うーんこういう、ちょっとした工夫で
こんなに素敵な画像になるんですねぇ。。
いつも色んなことを教えてくださってありがとございます!!

コメント

yozoさん またまたおじゃましま~す♪
記事にもコメントのお返事にもっ詳しく書いてくださってたのに
ほんとに 失礼いたしました<(_ _)>
一応 yozoさんの方法でも表示されたのでsすが
なぜか画像が中央に来なくて 少々悩んでいました。。。。^_^;
で もう一度 こちらにお邪魔して よ~く読ませていただいたら
KOROPPYさんのことが書かれてて
あ~~。。。なんてこと・・・・
私がCSS編集をしてたのはココログの方だったこと!!!
さっそくやり直してみたら 無事に表示できましたぁ♪
でも 自分の記事にも書きましたが
もうひとつのブログはFC2なので yozoさんの教えてくださった
CSS編集必要なので 今度をやってみますね(*^_^*)
なんか 私の勝手な思い込みで ドタバタしちゃってごめんなさいね。
こんな私ですが これからも宜しくお願いします<(_ _)>

コメント

>ゆうゆさん、おはよーございまっす♪

>ポラロイド風おもしろい~♪ワンポイントつけると とても可愛いですね^^
そうでしょ♪写真にこんな感じの枠をつけたら、記事がより一層見栄えよくなりますよね♪
ちょっと面倒ですが、写真サイズを決めてCSSを書いておけば、ずっとコピペで枠をつけることができますからね。お時間あるときにでもお試しあれ。(=⌒▽⌒=) ニャハハハ♪
なぁ~んて押し売りしたりなんかしちゃったりして・・・(; ̄ー ̄A アセアセ・・・

コメント

>ばばるさん、おはよーございまっす♪

>ポラロイド風、とっても素敵ですね!足跡アイコンがつくとこれまたかわいいじゃないですかぁ
そうでしょ♪いつもKOROPPYさんのブログ『KOROPPYの本棚』にお邪魔して「いいなぁ~♪」って思っていたんですよ。やっと記事まとめておすすめできるようになりました。 (*^-^)

>うーんこういう、ちょっとした工夫でこんなに素敵な画像になるんですねぇ。。
でしょ?素敵な写真に飾り枠でさらに見栄えよくなりますね。
見本に写真が用意できないのが、残念でしたよ。(; ̄ー ̄A アセアセ・・・
(yozoの写真は見られたものではありませんからね。
リアルな友人の間では、下手で有名だったりしてますです。(ノ△・。) )

コメント

>miyuさん、おはよーございまっす♪

>yozoさん またまたおじゃましま~す♪
あはは・・・またまたいらっしゃいませ~♪(*^-^)

>なぜか画像が中央に来なくて 少々悩んでいました。。。。^_^;
そーなんですよ。実はセンタリングにはちょっと工夫しなきゃいけないんです。IE6.0用とそれ以外のブラウザ用の2重のセンタリングをかけないといけないのですよ。もう少し記事にするのは先の予定なんですが・・・(゚ー゚;Aアセアセ

>私がCSS編集をしてたのはココログの方だったこと!!!
>さっそくやり直してみたら 無事に表示できましたぁ♪
ふふふ・・・この記事の一番はじめのCSSを使えばいいのですよ。KOROPPYさんの記事のコードを参考にさせていただいていますからね。特にborder(枠線)の4色はそのままお借りしてますよ。これがポイントですからね。(=⌒▽⌒=) ニャハハハ♪

>なんか 私の勝手な思い込みで ドタバタしちゃってごめんなさいね。
いえいえ♪基本はご自分ですからね。ちょっとした失敗なんて、よくあることですよ。それにドタバタなんて思ってません。センタリングまで記事にすると、さらに記事が膨れ上がってポイントが絞りきれなかったんですよ。なんとかしようってセンタリングまでチャレンジされたのはとっても素晴らしいと思います。これからも応援しますよ。センタリングの記事は現在作成中です。しばらくお待ちくださいね♪(*^-^)

コメント

yozoさん、こんにちわv-16
ポラロイド風って、いいですね。特に、あのワンポイントいいですv-10
今は、ちょっと出来ないのですが、(理由は、私のブログを見てください。)試してみたいです。

コメント

yozoさん、こんにちわ~。
ポラロイド風、可愛いですよね。
私もやってみたい~とずっと思ってて、yozoさんのエントリーを見て思い切ってカスタマイズしてみましたv
(トラバ入れさせてもらいましたです)

私もIEユーザーなので、最初はちゃんと表示されなくて…。
yozoさんの案を取ろうか、例の1行目の記述を削除しようか迷い、後者の楽な方を取っちゃったのですが(笑)
1行目を削除した事で、不具合とかは起きないのでしょうか。
この辺の事は全くわからず、怯えながらのカスタマイズだったりします;;
IEのこの妙なバグ、直して欲しいですよね(汗)

ではでは、前回のカスタマイズ同様、わかりやすい解説、ありがとうございました^^

コメント

yozoさん( ^-^)ノ(* ^-^)ノこんばんわぁ♪
再度ご報告でっすm(_ _"m)
サイズを指定して数種類設定しましたが・・・
大きくなる分には異サイズでもちゃんと対応するようでっす
(入力ミスから発見・・・)

ワンポイント入れも実行してみました♪かぁいぃでっす(///∇//)
ありがとうございました~♪

コメント

>ネーちゃんさん、こんばんはー♪

>ポラロイド風って、いいですね。特に、あのワンポイントいいですv-10
そうでしょ♪お友達のKOROPPYさんのコードをお借りして、かわいいワンポイントは、1キロバイトの素材屋さん様からお借りしているんですよ。他にもたくさんかわいい素材を配布してくれていますよ。お時間あるときにでものぞいてみてくださいね♪
(ご存知だったらごめんなさい。m(_ _)m)

>今は、ちょっと出来ないのですが、(理由は、私のブログを見てください。)試してみたいです。
新品がはやく手に入るといいですね。それまでは、ちょっと我慢しなきゃしかたありませんね。でも、お身体の具合等が悪かったわけではなく安心しましたよ。(*´ο`*)=3 ほっ

コメント

>さくらさん、こんばんはー♪

>ポラロイド風、可愛いですよね。私もやってみたい~とずっと思ってて、
>yozoさんのエントリーを見て思い切ってカスタマイズしてみましたv
お役に立ててうれしいですよ♪KOROPPYさんのコードをお借りして、それを小粋空間のyujiroさんの情報を元にXHTML準拠で使えるようにアレンジしたという感じなんですよ。

>後者の楽な方を取っちゃったのですが(笑)
>1行目を削除した事で、不具合とかは起きないのでしょうか。
その点は実はyozoはチェックできていないのですよ。ただ、ここのテンプレの1行目を一度削除した後で、Another HTML-lint gatewayでチェックすると、とてつもなく大量にエラーが出ていたので、やめちゃいました。m(_ _)m

>ではでは、前回のカスタマイズ同様、わかりやすい解説、ありがとうございました^^
いえいえ♪こちらこそ、励みになります。しかもトラバも入れてくださりありがとーございまっす♪
こちらからもお返しさせていただきますね。m(_ _)m

追伸:他の記事にもお返しのトラバありがとーございまっす♪リンクも旧ブログのままになっていましたのでHAPPY TALK ? に変更させていただきました。m(_ _)m

コメント

>ウッキさん、こんばんはー♪

>再度ご報告でっすm(_ _"m)サイズを指定して数種類設定しましたが・・・
>大きくなる分には異サイズでもちゃんと対応するようでっす
そうでしょ♪IE6.0だけだと思うのですが、ブラウザの自己調整みたいな感じでちゃんと表示されますよね。なんだか裏技っぽくて便利かも?ですね。ただ、FirefoxやOperaではやっぱりサイズをしっかり指定しないと枠がズレちゃうんですよ。その他の不具合のチェックまではyozoにもできていませんが・・・(^-^;

>ワンポイント入れも実行してみました♪かぁいぃでっす(///∇//)
うまくいきましたか!こっしょりのぞいてきました。(^○^)
オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
ちゃんと後ほど、お邪魔させていただきますね。m(_ _)m

コメント

yozoさ~ん こんばんは★
もうひとつのブログ yozoさんのCSS編集でちゃんとできましたぁ\(~o~)/
昨日散々やってたので 思ったより早くできたみたい(*´▽`*) ヤッター!そして忘れずに TBもさせていただきましたぁ♪
次はセンタリング!!頑張るぞ~! なんちゃって♪
でも これからだんだん慌しい時期になるので
ぜった~い ムリなさらないでね。記事はゆっくりで大丈夫よ~ん♪
今はポラロイド風に出来ただけで 凄くうれしいんだもの(~o~)
ではでは ホントに何度もアドバイスありがとうございました<(_ _)>

コメント

>miyuさん、おはよーございまっす♪

>もうひとつのブログ yozoさんのCSS編集でちゃんとできましたぁ\(~o~)/
たった今、お邪魔させていただきましたよ♪CSS編集もばっちりできていましたね。(^○^)
随分管理画面にも慣れてきたみたいですね。やっぱり習うより慣れろだったでしょ。(*^-^)
 ただ、気になることがあります。お気づきかもしれませんが、もともとのCSSコードのはたらきで、枠線が2重になっていますね。
 えっとそのことを書く前に一言お詫びでっす。
 そちらのコメントに、この点をついつい長々書いちゃいましたごめんなさい。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;
} */

>ヤッター!そして忘れずに TBもさせていただきましたぁ♪
記事での紹介及びトラバありがとーございまっす♪
yozoからもお返しトラバ入れさせていただきましたよv(。・ω・。)ィェィ♪

>次はセンタリング!!頑張るぞ~! なんちゃって♪
ふふふ・・・張り切ってますね♪\(*⌒0⌒)bがんばっ♪

>ぜった~い ムリなさらないでね。記事はゆっくりで大丈夫よ~ん♪
あはは・・・ありがとーございまっす♪ちょっとどうやって記事にするかを考え中なんです。ここでローカル配布しているCLEVERBBSのスキンも全ブラウザ共通のセンタリングにしなきゃいけませんからね。ちょっとお時間くださいませ。m(_ _)m

コメント

yozoさ~ん こんばんは~★
やっと この意味がわかりましたぁ!!!
 (ここの部分はCSSはイジってはないのですよね。
初めはこういう設定なのでしょうか?良くわかりませんが・・)
なんで このブログは 画像をいれると余白が出来ちゃうのか
すごーーく不思議でした。

>。(/*と*/で囲むだけですよ。

はい!ちゃんとご指摘の通りやって解決しました。
ほんとに丁寧に色々アドバイスしてくださってありがとうございました。
コメントのほうは 全然OK!ですよ~。
だって yozoさんのコメントから 何かヒントとかアドバイスにもなったりしてると思いますよ★っていうか何より私自身が助かります(*^_^*)
なので これからも お時間のある時でいいですから 気になることとかありましたら どこでもいいのでお気軽にコメントしてくださいね♪
またまた長々と失礼いたしました<(_ _)>

コメント

>miyuさん、こんばんはー♪

>やっと この意味がわかりましたぁ!!!
わかってくださいましたか♪miyuさんちのコメントではかなりわかりにくくなっていましたからね。他のみなさんにも参考になるかもしれませんので、本来、ここのレスコメントで詳しく解説するようにしているのですが、うっかり書き込んでしまったんです。余計な混乱を招いたみたいでごめんなさいでした。m(_ _)m

>初めはこういう設定なのでしょうか?良くわかりませんが・・
テンプレートの作者の方がはじめから設定しているのだと思いますよ。

>はい!ちゃんとご指摘の通りやって解決しました。
今、またまたお邪魔させていただきました。CSSのコメントアウトもバッチリでしたね。
これでうまくできましたよ。オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!

>気になることとかありましたら どこでもいいのでお気軽にコメントしてくださいね♪
(*^▽^*)ノハーイ ♪そのようにさせていただきますね。ありがとーございまっすm(_ _)m

>またまた長々と失礼いたしました<(_ _)>
いえいえ♪ここのコメントは、一言でも、たくさんでも、なんでもOKなので、
お気軽にどうぞ。今後ともよろしくでっす m(_ _)m

コメント

yozoさん、初めまして。
実は何度もお邪魔しているのですが、コメントをさせていただくのは初めてです。
今回、「ポラロイド風」に挑戦しまして、やっとやっとできたのでご報告させていただきます。
これまでは画像にclassをつけて、さらに?xml宣言を削除して表示していたのですが、どうせならとお勉強させていただきましたm(_ _"m)
自分のブログは記事中の写真が多いので、可愛くカスタマイズすることができ、感謝しております♪
お世話になります、またお邪魔させていただきます。

コメント

>とこたんさん、おはよーございまっす♪いらっしゃいませー♪

>実は何度もお邪魔しているのですが、コメントをさせていただくのは初めてです。
( ̄◇ ̄;)エッ そーだったのですか?コメントしてくださってありがとーございまっす♪
タイトル通りの『気が向いたと記』ですが、いつでも気軽に遊びにきてくださいね♪(^○^)

>今回、「ポラロイド風」に挑戦しまして、やっとやっとできたのでご報告させていただきます。
(ノ´▽`)ノオオオオッ♪そうですか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
お役に立ててうれしいでっす。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪
とりあえずこの「ポラロイド風」に関しては、ややこしいのはIE6.0だけみたいですね。IE7.0ではちゃんと余白も生きますからね。それでも、IEとその他のブラウザへの対応はやむなし・・・みたいなんですけど・・・。yozoもまだまだ小粋空間様や他のサイト様で勉強中ってとこなんでっす。(; ̄ー ̄A アセアセ・・・

>お世話になります、またお邪魔させていただきます。
勝手ながらお邪魔させていただき、リンクさせていただきました。
こちらこそ、今後ともよろしくお願いしまっす m(_ _)m

コメント

yozoさん、お邪魔しております♪
この度は私の記事へのコメント並びにトラバをいただき、ありがとうございました。
何だかとっても嬉しい反面、恐縮しております(*^^*ゞ
cssって何?から始めたカスタマイズですが、こうしてお勉強してみるといろいろなことが解ってきて楽しくなりますね。
そしてリンクもいただき、本当にありがとうございます<(_ _)>
これからもよろしくお願い致します(^^)

※ドキドキしながらこちらからもトラバさせていただきました。
 またお邪魔させていただきま~す★

コメント

>とこたんさん、こんばんはー♪

>何だかとっても嬉しい反面、恐縮しております(*^^*ゞ
(∩。∩;)ゞテレテレ・・・そんなぁ~♪yozoこそ、記事での紹介ありがたかったですよ。(^○^)

>cssって何?から始めたカスタマイズですが、こうしてお勉強して
>みるといろいろなことが解ってきて楽しくなりますね。
yozoもそうでしたよ。まず勉強ありき。でなくって、「こんなのがしたいなぁ~」から
入りましたよ。ちょっといじると反映されるので、うまくいかないことも多いですが、
思うとおりにできると、楽しいですよね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

追伸:リンク及びお返しのトラバありがとーございまっす♪ m(_ _)m
ばっちり投稿できていますよ♪ v(*'-^*)bぶいっ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。