fLife

アクセスカウンタ

zoom RSS 画像の枠問題(出来た!)

<<   作成日時 : 2005/12/03 07:22   >>

ブログ気持玉 0 / トラックバック 1 / コメント 12

 ごちゃごちゃになってきたので、次の記事にまとめますから、そこを参照してください^^;
 すいません。

 ん〜そういう訳でもないようです。
 ブログ本文中のリンクの枠を下地と同じにするのをCSSで指定していたんですけど…更新している内に、Amazonのリンクの画像までborderがついてしまいました^^;
 後ほど再検討してみます。
 どうやら細枠が、border="0"でも取れないとお困りの方がいらっしゃるので…。
画像

 仕様変更前の画像の外枠が復活しただけだと思います。
 消すにはいろいろ方法はあると思いますが…CSSに詳しくない私がやったのは…
/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/
/*------------------ 記事本体 ------------------*/
/* アップロード画像 */
#blog-body a img#upload-image{
float:right;
margin:5px 0px 5px 5px;
border-color: #fff;
border-width: 1px;
}
 ここの赤い部分を適当に調整したらいいと思います。
 うちのサイトは白地なので、線を白にしてしまいました。
  border-width: 0px;
 だとダメかもしれません。 
 たけのこ生活さんの記事を参考にしたら出来ました。
 そちらをご参照ください。
 ありがとうございます!!
 ちなみに。「.up-image」をつけると…UPしてないものは枠が残ってしまいますね。
/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/
/*------------------ 記事本体 ------------------*/
/* アップロード画像 */
#blog-body a img{
border-color: #fff;
border-width: 1px;
}
 こうしてみました。 
 0pxにしなかったのは、ブラウザ変えると不具合があったからのような…。
 何でそうしたかは覚えてないですがね。
 後ほど確かめてみようと思います。
 IE,Opera(Win),Safariで確認した所、 border-width: 0px;でも問題ないですね。
 何でだろう…。まあ本当は0にしたらいいはずだったんですが、なぜ迂遠な事をしたのかは理解できませんが(笑) 当時は確か0でやったらダメだったので、カラーを下地とどうかさせた気がします。
 気にしないでください。
  素直にborder-width: 0px;で入れてください。
 では、正しいやり方を!
 全て自作のCSSでやっている人は、CSS編集の場面で…
/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/
(省略)

/*------------------ 記事本体 ------------------*/
(省略)

/* アップロード画像 */
#blog-body a img#upload-image{
border-width: 0px;
}
 赤字の部分を消し、緑字の部分を追加してください。
 すなわち、
/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/
(省略)

/*------------------ 記事本体 ------------------*/
(省略)

/* アップロード画像 */
#blog-body a img{
border-width: 0px;
}

 と、このように編集しましょう。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
アップロード画像についた枠を消すには
 リンクのついている画像枠が気になっている方も多いようですね。  まあ、リンクがあるかないかを区別する上で、必要と感じる人もいると思いますが。  前記事を見ていただくと、全面的にCSSを作られている方は、リンク付き画像の枠の取り方が解ると思います。  ただ、ウェブリブログで用意されているテンプレートを使っている場合は、テンプレート側の設定が影響する可能性があります。  そんなわけで、ちょっと検証してみます。 これは、ミサさんが採用している「秋の夜長(茶)」のスタイルシートの一部です... ...続きを見る
*翼あるもの*
2005/12/04 16:48

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(12件)

内 容 ニックネーム/日時
画像に枠がつく??
自分のブログにもできてるのかな・・・。
【border="0"】での対処の仕方しかわからない(涙)
読んでも「?」で初心者にはムリだー↓↓

てか、最近また変なトラバが多いような・・・。
私も同じところからされてました。
ミサ
2005/12/03 22:06
白い枠が出てますね。
必要ならいいんですけど、邪魔だと消す必要があります。
HTMLでなくて、スタイルシートの設定ですね。

一度やって見るとオリジナルの設定が出来て愛着がわきますよ〜(^^)HTMLが多少解るなら、同じ要領で解ると思います。
CSS設定は、「オプション」の「CSS編集(上級者向け)」を選んでください。
で、「/* アップロード画像 */」って項目を探して、上の様に編集してみてください。

TBは最近悪質になって来ましたね。困ったもんです。
Darth Alexios
2005/12/04 00:46
こんにちは。TBありがとうございました。(^o^)/
実は前から時々お邪魔しておりました。ご紹介いただいて感動です。
おっしゃる通り、「blog-body a img.up-image」はアップロード画像のみの設定なので、他スペースからリンク表示させている画像の枠線も消したい場合は、別に「blog-body a img」もborder="0"を指定する必要がありますね〜。
たけのこ
2005/12/04 01:17
朝に格闘していて、たけのこさんのブログを見つけられなかったら、電車に乗り遅れそうでした(笑)助かりました。
そうでしたか。ありがとうございます^^;
今後ともよろしくお願いいたします。

で、2つは別に設定する必要があるんでしょうか?
「全体のリンク付き画像の周囲の枠」を消してしまえばいいのかなと思って、アップロード画像に限定せずに全部やってしまいました。
一応、アップロードした画像も枠は消えたようですが…あまりCSSに詳しくないもんで^^;
Darth Alexios
2005/12/04 01:25
直りません(>_<)
もう少しがんばってみます!!
ミサ
2005/12/04 06:45
お邪魔させていただきます。(ちょっと横レス。)
全ての画像に一括して枠をなくすために以下のようなスタイルシートを適用してみました。参考までに。

#blog-body a img#upload-image,#blog-body a img,#blog-body a img.up-image{border: none;}

Amazonなどアフィリエイトのバナーに枠がつくと、バナーといっしょに表示されている小さなドットの部分まで枠がみえてしまうことがありますね。(実はこの部分が重要。)

どうでも線がついて困るかたは<img>タグ内に
<img src="***" style="border:none">のようにstyle属性を埋め込むという手もあります。
徒然冩眞館
URL
2005/12/04 11:00
コメントありがとうございます。
ふむふむ…結局全部の項目を羅列したのですね。

Amazonのは
#blog-body a img
で対応できるんですよね。
私もそうやってみました。

私がよくわからないのは、
#blog-body a img
というのは、「本文のエリアの画像」
#blog-body a img#upload-image
というのは、「昔のアップロード画像」
#blog-body a img.up-image
は、「今の本文中の画像中、アップロード画像」
という項目になるのではないでしょうか。
旧アップロードはもう構造が変わってしまったから当てはまる所がない=だから何を変更しても変わらない…と言うことで、記述する意味があるのでしょうか?
そして、本文中のアップロード画像だけを限定して指定しなくても、本文中の画像全般を一括して枠無しにすればよいのかと思ったんですが、どうでしょうか。
Darth Alexios
2005/12/04 11:22
ちなみに…
border: none;
は古めのブラウザだと非対応だとか読んだ事があります。
border: 0px;
の方が妥当かと思います。
Darth Alexios
2005/12/04 11:23
>ミサさん
ちょっと検討してみます。
何を検討するかというと、1からデザインを作ってるブログだと、この設定をいれるだけで問題ないんですけど、既存のデザインに枠だけ外すってのは、既存のデザインの設定が悪さをしておかしなことになっている可能性があるんです。
Darth Alexios
2005/12/04 13:03
ふたたび失礼します。
border:none;の件ですが、W3Cにもとづくならばborderの初期値としてnoneがあてがわれているため、noneと記述させていただいたままです。border-width: 0px; を妥当とするかは、ブラウザ側の実装の問題と考えますが。

WC3のCSS1においてのborder-styleに関しての説明では、
≫5.5.17 'border-style'
≫ none
≫no border is drawn (regardless of the 'border-width' value)
border-widthの値にかかわらず、枠線なしを描く。
という説明となっております。以上でございます。
#upload-image
は確認しましたら、昔の記事でIMGタグのクラスが'up-image'に変ってましたので、この部分の指定はなくていいということですね。失礼しました。
徒然冩眞館
2005/12/04 13:45
上記コメントWC3× → W3C 〇でした。
ちなみにですが、
a img{}とimg{} との指定ではちょっと異なります。大変おじゃまいたしました。以後気をつけます。
徒然写真館
2005/12/04 13:51
コメントありがとうございます。
なるほど、W3Cの仕様ではnoneですか。
まあ、解析してみると、殆ど最近のブラウザを利用されているようですから、仕様に従った方が妥当なのかもしれませんね。
ありがとうございます。

いえいえ、おじゃまどころか、CSSを行き当たりばったりでやってる私にとっては大変ありがたいです^^; 感謝いたします。
Darth Alexios
2005/12/04 14:00

コメントする help

ニックネーム
URL(任意)
本 文
画像の枠問題(出来た!) fLife/BIGLOBEウェブリブログ
文字サイズ:       閉じる