FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

画像に枠をつける

記事に掲載する写真等の画像に枠をつけて立体的にみせる方法を紹介します。

スタイルシートの一番下に次の記述を加えます。

【 standard の場合】

/* 記事に掲載する画像に枠を付ける*/
.article img{
margin:0px 3px 0px 0px;
padding: 3px;
background: #ffffff;
border-right: #999999 1px solid;
border-bottom: #999999 2px solid;
}
img.emoji {
padding: 0;
margin:0;
background: #ffffff; /* ここには背景と同じ色を設定 */
}

【 lightframe の場合】

/* 記事に掲載する画像に枠を付ける*/
.ently_text img{
margin:0px 3px 0px 0px;
padding: 3px;
background: #ffffff;
border-right: #999999 1px solid;
border-bottom: #999999 2px solid;
}
img.emoji {
padding: 0;
margin:0;
background: #ffffff; /* ここには背景と同じ色を設定 */
}

そして最後にHTMLの一番上にある
<?xml version="1.0" encoding="euc-jp"?>
これを削除してください。
(IEにはこの記述があるとimgのpaddingが効かないというバグがあるのです)

これで記事に掲載する画像に立体的な枠が出来ます。

関連記事

[ 2006/10/25 01:00 ] カスタマイズ共通カスタマイズ | TB(0) | CM(25)

≪ コメント入力欄の色を変える | HOME | タイトル画像をランダムに変える ≫

[ 710 ] ありがとうございます♪

出来ました°ﾟ°｡｡ヾ( ~▽~)ﾂﾜｰｲ♪
嬉しいです♪ありがとうございました！
あのテンプレートに合うので早速使わせてもらいます。
何日も考えて調べたり試したりしたので感動です！！

＞ＸＭＬ

意味が解らなかったので辞書で調べました（笑）
こういう分野に入るとお手上げです…(x_x；)
（難しい分野でなくてもお手上げなんですが…）

いたおさんの説明はホント丁寧で嬉しいです♪

＞私の記事をダウンロードして保存してくれているのですか？

あっ…コピーじゃなかったです（言い方を間違えました）
ほとんどの記事を印刷します。
…が膨大な枚数になってしまうので
説明や気になるＱ＆Ａの箇所だけを切り取りファイルし
後から分かりやすいようにインデックスを付けます。
いたおさんのテンプレートの専用ファイルがあるんです♪
今回のも早速印刷してファイルしました(*￣ー￣)ｖ

また何かありましたらよろしくお願いしますm(__)m
いたおさんも大変でしょうが皆さんの為に頑張って下さい♪

[ 2006/10/25 08:26 ] [ 編集 ]

[ 712 ] > うさこさん

こんばんは、うさこさん。
早速画像に枠を付けられましたね。うさこさんのように写真をよく掲載する方には画像がより写真らしく見えて有効なカスタマイズですね。

私の記事を印刷してくれているとは＾＾
うさこさんのような方がいるから私も頑張れます。有難う御座います。

[ 2006/10/26 22:39 ] [ 編集 ]

[ 769 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2006/11/10 16:42 ] [ 編集 ]

[ 922 ] 画像の枠の件

いたおさん　あけましておめでとうございます♪
昨年は画像の枠の件について
お答えいただきありがとうございましたm(__)m

すみません…それについてまた質問です。
今まで白い壁紙を使っていたので問題ありませんでしたが
最近テンプレートを少し変えてみようと思い
壁紙を黒にしたら絵文字にも白い枠が付いてしまいました。
ＦＣ２のサポートＱ＆Ａには
スタイルシートの『絵文字』の部分を変えれば
いいような事が書いてあったんですが
こちらのテンプレートには『絵文字』の項目がないので分かりませんでした…。

とりあえず今回のテンプレートでは枠を外していますが
また付ける時の為に教えていただけると嬉しいです♪

お忙しいとは思いますがよろしくお願いしますm(__)m

[ 2007/01/04 18:49 ] [ 編集 ]

[ 924 ] > うさこさん

こんばんは、うさこさん。
この「画像に枠をつける」の記事を書き直しました。

background: #ffffff; /* ここには背景と同じ色を設定 */

の部分を背景色に設定すれば上手くいくと思いますよ。

[ 2007/01/05 01:13 ] [ 編集 ]

[ 943 ] ありがとうございました♪

早速のご回答ありがとうございましたm(__)m
やってみましたら出来ましたＯ(≧▽≦)Ｏﾜｰｲ♪

すぐに聞くのは悪いかと思い
一応は先に調べたりするんですが…(^▽^;)
やっぱりいたおさんに聞くのが１番速いですね！

今回もありがとうございました♪
また何かありましたらよろしくお願いしますm(__)m

[ 2007/01/06 20:18 ] [ 編集 ]

[ 944 ] 何度もすみませんm(__)m

すみません…一つ問題が出てきました(>_<)
コメントとコメントの間をライン画像で仕切っているのですが
そのライン画像に大きな白い枠が付いてしまいました。
この枠を消すにはどうしたらいいのでしょうか？

何度もすみませんがよろしくお願いしますm(__)m

[ 2007/01/06 20:41 ] [ 編集 ]

[ 945 ]

<img src="画像URL" border="0">で消えますよ♪

[ 2007/01/06 21:33 ] [ 編集 ]

[ 949 ] すみませんが…。

ちゃんさん
ご親切にありがとうございますm(__)m

すみません…ＨＴＭＬの何処に入れたらいいのですか？
のライン画像の
<img src="画像URL">にborder="0"だけ
付け加えましたら変化はありませんでした(>_<)

いたおさん・ちゃんさん
初歩的な質問ですみませんがよろしくお願いしますm(__)m

[ 2007/01/06 23:03 ] [ 編集 ]

[ 953 ] > うさこさん

お待たせしました、うさこさん。
ちょっと離席している間に話が進んでしまいました。

ちゃんさん、いつもフォロー有難うございます＾＾
「透過していない画像」の場合はちゃんさんのご指摘通りで解決します。しかし今回の場合は透過処理されている画像のようですね。そうなると少し複雑になります。

現在のHTMLは



<a name="comment_list"></a><br />
<div class="article">
<img src="http://～">

となっていると思います。
これを次のように編集してください。



<a name="comment_list"></a><br />
<img style="margin-left:2.5em;" src="http://～">
<div class="article">

これで上手く行くと思います。

[ 2007/01/07 01:11 ] [ 編集 ]

[ 957 ] すみません…。

いたおさん　早速のお返事ありがとうございます♪
そして何度も何度もすみません…。

こちらをコピペしてコメント表示に入れましたが
１番上の画像ラインの仕切りだけが
白枠が消えて思い通りに表示されましたが
その代わり２番目以降のコメントとコメントを仕切る
画像ラインが全部消えてしまいました。

変える前の元のＨＴＭＬは
上に表示されているとおりではなくて



<div class="article">

<img src="http://～">

だったので
<a name="comment_list"></a><br />がなくて
も
<img src="http://～">の上にあったので

位置を変えて色々試してみましたら
今度は画像ラインが各コメントの仕切りに表示されましたが
白枠が出てきてしまい今までと同じ状態になりました(>_<)

各コメントの仕切りに画像ラインが表示されている方が
可愛くて好みなので…よろしくお願いしますm(__)m

[ 2007/01/07 10:53 ] [ 編集 ]

[ 960 ] > うさこさん

こんにちは、うさこさん。
申し訳ありません。元の状態を見誤っていました。
解決策を見つけるのにもう少し時間をください。
お待たせして申しわけありません。

[ 2007/01/07 15:44 ] [ 編集 ]

[ 961 ] お忙しいのにすみませんm(__)m

ゆっくり待っていますので大丈夫です(*^-^)ﾆｺ
考えてくださりありがとうございますm(__)m

では　またお邪魔します♪

[ 2007/01/07 16:38 ] [ 編集 ]

[ 962 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/01/07 17:02 ] [ 編集 ]

[ 964 ] > うさこさん

こんばんは、うさこさん。
下記のように編集してみてください。

HTML編集



<div class="article">

<img class="test" src="http://～">

スタイルシート追加

img.test {
padding: 0;
margin:0;
background: #000000; /* ここには背景と同じ色を設定 */
border:0;
}

これでどうでしょう。

[ 2007/01/08 03:11 ] [ 編集 ]

[ 966 ] ありがとうございます♪

いたおさん♪出来ましたヾ(≧▽≦)ﾉ
嬉しいですっ！！
おかげさまで思い通りの
お気に入りのテンプレになりました♪
今回も色々ありがとうございましたm(__)m
また何かありましたらよろしくお願いします。

いたおさんもお忙しいでしょうが
これからも皆さんの為に頑張って下さい♪

そうそう…いたおさんの代わりに
答えてくださる方がいるって何かいいですね！
アットホームな感じで…。
ちゃんさんもありがとうございましたm(__)m

ではでは　失礼します☆彡

[ 2007/01/09 00:10 ] [ 編集 ]

[ 967 ] > うさこさん

こんばんは、うさこさん。
出来ましたね＾＾
しかもさらに応用させて白枠部分を大きくしましたね。お見事です。
代わりに答えてくれる方がいることは本当に助かりますよ。有難うございます。ちゃんさん。

カスタマイズに挑戦された方々はスキルが上がっていくことをヒシヒシと感じる今日この頃です＾＾

[ 2007/01/09 00:29 ] [ 編集 ]

[ 968 ]

私の答えは違う方向に行っていたみたいですみません(汗)

私はborder="数字"でいちいち枠の太さを指定したり、ソフトを使って画像加工して枠をつけたりしていたので、それしか頭に浮かばず…申し訳なかったです。
m(__)m

1/7は1周年だったのですね！
おめでとう御座います
お祝いの言葉が遅くなってしまいました。。。

[ 2007/01/09 01:16 ] [ 編集 ]

[ 969 ] > ちゃんさん

こんばんは、ちゃんさん。
いつも有難う御座います＾＾
自分のブログで誰かが誰かのために答えてくれるというのはとっても嬉しいものですよ。

そういえば１周年経っていましたね。私も忘れてました＾＾；
飽きっぽい私が皆さんのおかげで１年続けることが出来ました。有難う御座います。

[ 2007/01/09 01:37 ] [ 編集 ]

[ 974 ] お二人にありがとうございます♪

いたおさんへ

＞カスタマイズに挑戦された方々はスキルが上がっていくことをヒシヒシと感じる今日この頃です＾＾

カスタマイズをするきっかけ＆勉強させてくれたのは
いたおさんのテンプレートのおかげです♪(*￣ー￣)ｖ
こちらのテンプレ＆ブログがなかったら絶対無理でした…。
だからとても感謝しています！！

あっ…１周年なんですね♪
☆;:*:;☆;:*:;☆“Congratulations”☆;:*:;☆;:*:;☆

　ちゃんさんへ

＞私の答えは違う方向に行っていたみたいですみません(汗)

誤らないで下さい(*^-^)ﾆｺ
ちゃんさんに答えてもらって嬉しかったんですから～♪
これからもよろしくお願いします！

[ 2007/01/10 18:18 ] [ 編集 ]

[ 977 ] > うさこさん

こんばんは、うさこさん。
ここまでカスタマイズするのは大したものですよ。仕組みを作る知識とデザインセンスは別物ですが、ほんの少しのことを知らないだけでその素晴らしいセンスをかたちにできない方々がいるのは非常に勿体無いことです。そんな方々のために少しでも役に立てたのなら嬉しいです。

１周年経っちゃいました＾＾
有難うございます。

[ 2007/01/11 01:24 ] [ 編集 ]

[ 7403 ] 初めまして

テンプレートの編集にはこのサイトが参考になると
ブログ友達から教えてもらい、参考にさせて頂いてます。
今回画像に枠を付けたく、この記事を見つけました。
無事に画像に枠を付ける事が出来たのですが、
絵文字、拍手ボタンにも枠が付いてしまいました；；
これを消すにはどうしたらいいでしょうか？

background: #ffffff; /* ここには背景と同じ色を設定 */
これは実行済みです。

唐突に申し訳ありません、よろしくお願いいたします。

[ 2009/12/13 21:52 ] [ 編集 ]

[ 7412 ] > ネコリラさん

スタイルシートの末尾にこれを加えてみてください。

.fc2_footer img {
padding: 0;
margin:0;
background: #696969; /* ここには背景と同じ色を設定 */
}

[ 2009/12/13 22:45 ] [ 編集 ]

[ 7413 ] ありがとうございます！

無事に解消できました！
すばやいレスをありがとうございました。
これからも参考にさせて頂きたいと思いますのでよろしくお願い致します。

[ 2009/12/13 23:47 ] [ 編集 ]

[ 7422 ] > ネコリラさん

解決して良かったです＾＾

[ 2009/12/14 22:14 ] [ 編集 ]

コメントの投稿