画像に対する文字の回りこみの相談

0   名前： たもつ ： 2007/02/28（水） 06:58  ID:nX5fOicb sub-hI
【何をしたいのか】
ライブドアのブログを使っております。
ブログ内にアップロードした、写真に対する文字の回りこみを解除したいのです。
記事を投稿すると、画像<ima>に対して、自動的に align="left" というタグがついて
しまい、とても体裁の悪い形で文字が回りこんでしまうので、このブログが参照
している外部スタイルシートの該当する箇所に手を加えて、画像に文字が回りこまないよ
うにしたいのですが、上手くゆきません。

デフォルトで、img タグには、class="pict"　が指定されるのですが、
.pict　を確認してみたのですが、スタイルは何も指定されていない状態でした。
こんな状態→.pict {}

そこで.pictに、clear や　float 、など色々なスタイルを試したのですが、
どれも上手く行きません。

おそらく、画像に align="left"　のhtmlタグが入っているのが
原因なのではないかと思うのですが・・・

画像に対して、自動的に加えられる align="left" はそのままの状態に
したままで、スタイルシートで、文字の回りこみを解除させることは
できますでしょうか？

何か策がござましたら、是非ともご教えていただきたく
書き込みをさせていただきました。

どうぞよろしくお願いいたします。
1   名前： 元帥 ： 2007/02/28（水） 06:58  ［URL］  ID:GQaajLPH sub-bK
http://www.tagindex.com/html_tag/img/br_clear.html
2   名前： たもつ ： 2007/02/28（水） 06:58  ID:nX5fOicb sub-hI
＞元帥様　情報ありがとうございます。

いただいた情報は、私の知らなかった情報なので役立たせていただきまが、
残念なのですが、状況を改善することができませんでした。
私の説明が足りなかったのかも知れません。

<img src="省略" class="pict" align="left" />
↑
このタグの class="pict"
.pict　の中で、スタイルを指定することにより
文字の回りこみを解除させたいのです。

教えていただけると、大変たすかります。

お願いします。
3   名前： みるず ： 2007/02/28（水） 06:58  ID:rsGydZ4/ sub-.G
こんにちは！
勉強中の身なのでわかる範囲がかぎられてますが・・・
私だったらこうするかも？というのを書き込みます。
自信満々ではないのですが・・・


.pictに対してスタイルを振るのではなく（既にimgタグにalign="left"が指定されてるので）
それ以降を解除したいということですよね？？

で、あればimgの後にくる説明文字（テキスト）を囲ってるタグの直前に
<br>タグをおき、その<br>にクラスを振ります。

そして、そのクラスをスタイルシートで指定してclearプロパティで解除してみてはいかがでしょうか？

使い方が正しいのかどうかちょっと私も微妙なのですけれど・・・確信的に考えたわけではないので
正確性を求めるのなら、掘りこして調べてみて下さい！
4   名前： 匿名 ： 2007/02/28（水） 06:58  ID:dNetjyhh sub-kJ
>>2
前後の文脈（HTML）が分からないと、答えづらい。


>>3
細かいことを言えば、CSS2 で clear 指定できるのはブロック要素のみ。br { display: block; } も併せて指定すれば良いのかもしれないが、個人的には（もし区切りが明確なら） hr 要素を推す。
# CSS1 ならインライン要素に対しても指定できた（おそらく、br 要素の clear 属性の名残）。
5   名前： たもつ ： 2007/02/28（水） 06:58  ID:nX5fOicb sub-hI
皆様ありがとうございます。

私の説明がわかりづらくて、申し訳ありません。

<img src="省略" class="pict" align="left" />

上記タグには、一切手を加えることができません。

class="pict" のみ手を加えることができるので、
.pict {???} 　この???の部分だけで、
タグ<img src="省略" class="pict" align="left" />の
文字周り込み解除を実現したいのです。

大変恐縮ですが、ご理解いただけましたでしょうか？

再度情報をいただけると、大変助かります。

ライブドアのブログにアップロードした画像を貼り付けると
文字の周り込みの体裁が、きれいでない場合があると
思うのですが、まったくcssやhtmlの知識の無い人は、
投稿画面に、直接タグを書き込むことができないので、
可能であれば、最初から　スタイルシートを加工して
投稿する人にストレスを与えないようにしたいのです。

作っているのは、社内で利用しているブログです。
書き込む社員が何人かいるので、このようなことを
お聞きしております。

どうぞよろしくお願いします。

6   名前： みるず ： 2007/02/28（水） 06:58  ID:rsGydZ4/ sub-.G
>>5さんの内容からして・・・少しそれぞれのタグやクラスに対する指定の考え方に
思い違いがあるように思われますが、どうでしょうか・・・。

.pict=imgでありimgに対してalign="left"で位置づけを設定してるわけですよね。

<img src="○○○" class="pict" align="center" />＝『イメージはpictという固有の名前を持ち、位置は左に配置します』

と、訳すならばこんな感じですよね？

そして>>5さんは、そのイメージ以降にあるコンテンツは横に続けるのではなく
改行（下段でよかったですか？）に持ってくるような設定にしたいという事ですよね？？

imgタグ以降のものの指令をimg（＝.pict）に対してスタイル指定する発想自体
変な気がするのですが・・・・私が無知なだけでしたら申し訳ないんですけども・・・。

htmlで、

<br clear>も

スタイルで

<br style="clear: both" />

も、全てimgを閉じた以降に対しての解除作業です。

解除は設定があるからこそ生まれるものであり、
同じタグに対して設定と解除を命令するのは・・・うむむ？と思うのが今の私です。

自信満々でないのにレスしている事が不愉快になられるかもしれませんが・・
便乗させてもらって私も勉強させてもらってます。

熟知されてる方のレスを含めて、ご意見聞かせていただきたいと思います。
7   名前： 匿名 ： 2007/02/28（水） 06:58  ID:dNetjyhh sub-kJ
>>5
>>0 に float を試したが『うまくいかなかった』とあるが、普通に以下でいくんじゃないの？少なくとも、Gecko、Opera、Safari では確認した。
.pict { float: none; }


>>6
繰り返すが、br 要素に対する clear 指定には注意。CSS2 適合実装には（そのままでは）無視されるかもしれない。

で、不要なプロパティは上書きしてやれば良いわけで。そして、HTML のプレゼンテーション属性については、「対応する CSS プロパティに置き換え、詳細度 0、かつスタイルシートの冒頭に置かれたものと見なす」とある（CSS2/2.1: 6.4.4）。この場合、<img src="#" alt="*" align="left" /> は、スタイルシートの先頭に
img { float: left; }

と書かれたものと見なされ、その詳細度は（class、id 指定があろうとも）0。したがって、後続するプロパティ宣言ですぐに上書きできる。理屈上は。
8   名前： 匿名 ： 2007/02/28（水） 06:58  ID:dNetjyhh sub-kJ
連投ごめん。いっそ、
img { float: none; }

/* img[align] { float: none; } */

で、全 img 要素の align 属性をキャンセルした方が良いかも。

まあ、「テキストブラウザ・携帯端末では回り込ませたい！」という強い動機が無いのなら、管理者に連絡して align 属性を消してもらった方が良いと思うけど。
9   名前： みるず ： 2007/02/28（水） 06:58  ID:rsGydZ4/ sub-.G
おはようございます！
スレ主さんのレスより前にレスつけて申し訳ないのですが・・・

>7さん、ありがとうございます！！
プレゼンテーション属性なんて、言葉すら今の今までさっぱり知りませんでしたが
色々検索すると仕様書に当たり、読んでちょっと触りが見えてきました！
『上書きとは？？』と最初疑問で、最初はコメントの意味すらわからなかったのですが^^;

本当勉強になります。
スレ主さんも解決に導かれてるといいですね。

br clear については今後ちょっと気をつけていきます。

ではでは、なんだかんだと横レス失礼しました。



一覧へ戻る