［ブログ］CSSで画像の回り込み解除をしたい

質問

libedoorで画像中心のブログを作りました。
以前は、画像の下にテキストが流れていたんですが、デザインを変更したところ、テキストが画像の右側に来るようになってしまいました。
色々見て回り、CSSをいじってためしてみたのですが(初心者です)全く解決せず、どこをどうすれば良いのかこんがらがってしまいました。

ちなみに以前(画像の下にテキストが流れていた時に)下記の記述で、回り込みが解除されていたのかと思い、追加してみましたが、ただ足せば良いと言うものじゃないんですね。
HTMLの方もいじらなくてはいけないんじゃないかと思いつつ、どこをいじれば良いのかさっぱり分からず・・・知恵お貸し頂けたら幸いです。
----------------------------------------
#content:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
----------------------------------------
CSSで、と書きましたが、画像の回り込みを解除できれば、HTMLでも構いません。
理解しないままで、まとまらず分かりにくい質問かと思いますが、どうぞよろしくお願いいたします。

回答No.4

hetare560 · ベストアンサー

ANo.1、ANo.3です。

--------------------------------------------------------------------------------
<div class="article-body entry-content">

<div class="article-body-inner">

<a href="ttp://image.blog.livedoor.jp/***/imgs/7/3/****.jpg" target="_blank"><img src="ttp://image.blog.livedoor.jp/***/imgs/7/3/****-s.jpg" width="550" height="768" border="0" alt="***" hspace="5" class="pict" align="left" /></a><br>

<br>
CSSノヤイトイ鬚ヌ、ケ<br>
ハクサ憘ノ、゜、ヒ、ッ、、、ホ、鯀皃ットセ、キ、ソ、、
</div>
--------------------------------------------------------------------------------

この部分を見る限り<$ArticleBody$>には特別なタグが挿入されておらず
画像＝<h3></h3>、その下の文字＝<p></p>ともされていないので、
clearを指定するなら<br>ですね。

.article-body-inner br {
clear:both;
}

をcssに記述してみてください。

ちょっと文法的な話しをさせてもらうと、今のタグの記述方法だと<$ArticleBody$>（＝記事の部分）がわかりにくいタグの記述になっているので、
画像は<h3></h3>で囲みその記事の小見出しにし、画像の下に記述する解説は<p></p>で囲んで段落の意味を持たせるなどとした方がいいと思いますよ。

例えば

<div class="article-body-inner">

<h3><a href="ttp://image.blog.livedoor.jp/***/imgs/7/3/****.jpg" target="_blank"><img src="ttp://image.blog.livedoor.jp/***/imgs/7/3/****-s.jpg" width="550" height="768" border="0" alt="***" hspace="5" class="pict" align="left" /></a></h3><br>

<br>
<p>CSSノヤイトイ鬚ヌ、ケ<br>
ハクサ憘ノ、゜、ヒ、ッ、、、ホ、鯀皃ットセ、キ、ソ、、</p>
</div>

ただし、タグの記述を変えるとそれに伴ってcssも書き換える必要が出てくるので、
一概におススメはできませんけど。

後はあまり<br>は連発しないほうがよいかと・・。

お礼

で、できました！

.article-body-inner br {
clear:both;
}

を記述したところ見事に画像の下に文字が流れるようになりました。

こんな理解力で解決できる自信もないまま質問させて頂きましたが、こんなに親切丁寧に教えて頂けるとは思ってもみませんでした。
後ほどじっくりhetare560様の回答を読み、少しでも理解を深めていきたいと思います。

何度もご足労をかけてしまい申し訳ありません。本当に感謝しています。
三度ものご回答、また、解決まで導いて下さりありがとうございました!
レイアウトが決まった画面を見たときは感激しました。

回答No.3

noname#66720

imgに対してfloatが指定されているのなら、それを消すだけで良いのではないのでしょうか？

たいていの場合、

div#MAIN img {
float:right;
}

のような感じで、全体を囲むdivに対してidやclassが振られ、その中にあるimg要素に対してのみfloatが効くような指定がされていると思うので、その記述を消してみてください。

お礼

明快なお答えをありがとうございます!

【float:***】の記述を全て消してみましたが、デザインが崩れただけで、文字は右に回りこんでしまいました。
と言う事は、いくら【clear: both;】の記述をしたところで無駄だったんでしょうか?
【clear】は【float】を打ち消すCSSですよね?
一歩前進した様な気がしますが、また立ち止まってしまいました。
HTMLに回り込む記述があると言うことでしょうか?
それともCSSにfloat以外で回り込ませる方法があるのでしょうか?

?尽くしで申し訳ありません。
他に解決策がありましたら、助言頂けると幸いです。

回答No.2

hetare560

ANo.1です。

ソースを拝見させていただいたのですがかなり抽象的なhtmlの為、
具体的なid classが記載されておらず具体的な事はもうしあげられないのですが、
ソースからの推測でアドバイスさせていただきたいと思います。

<div class="article-body entry-content">

<div class="article-body-inner">

<$ArticleBody$>

<IfArticleBodyMore><span class="article-continue"><a href="<$ArticlePermalink$>" title="この記事の続きを読む">続きを読む</a></span></IfArticleBodyMore>

</div>

<$ArticleTagsListInternal$>

</div><!-- articleBody End -->

たぶん.article-body-inner内のimgにfloat:leftかrightが指定されていると思うので、
その下に記述されるタグ（<p></p>、<div></div>とか）にclear:leftかrightもしくはbothを指定すれば回り込みは解除されます。

<$ArticleBody$>はtokiiro様が利用されているブログサービスの編集画面で表示されているソースだと思いますが、
これはあくまでご利用されているブログサービス独自の変数で、<$ArticleBody$>の部分に自動的に挿入されるソース
（＝確認方法：tokiiro様のブログのトップページを開く→表示→ソース）がわからなければこれ以上具体的な事は申し上げられません。

お礼

再度のアドバイスありがとうございます!
このような素人に親切に教えて頂き感謝しております。

ブログページのソースを確認して参りました。
関係ありそうなのはこのあたりでしょうか?
--------------------------------------------------------------------------------
<div class="article-body entry-content">

<div class="article-body-inner">

<a href="ttp://image.blog.livedoor.jp/***/imgs/7/3/****.jpg" target="_blank"><img src="ttp://image.blog.livedoor.jp/***/imgs/7/3/****-s.jpg" width="550" height="768" border="0" alt="***" hspace="5" class="pict" align="left" /></a><br>

<br>
CSSノヤイトイ鬚ヌ、ケ<br>
ハクサ憘ノ、゜、ヒ、ッ、、、ホ、鯀皃ットセ、キ、ソ、、
</div>
--------------------------------------------------------------------------------

試しに、質問時に記述したCSSの【#content .after】部分を
【div#article-body entry-content.after】【div#article-body-inner.after】【div#pict.after】
と言う様に切り替えてみましたが駄目でした。
(上のお礼欄にありますが、floatを全て消しても駄目でした。)

これ以上hetare560様のお手を煩わすのは心苦しいのですが、一応ブログページのソース全文を載せさせて頂きます。
http://space.geocities.jp/web_up_space/blog-top-html.htm
回り込み解除をしたい画像は【ttp://image.blog.livedoor.jp/***/imgs/7/3/****-s.jpg】です。
【align="left"】テーブルで組まれてるのでしょうか?

hetare560様の助言が大変参考になっておりますので、何かヒントが見つかりましたら、もう少しお付き合い頂けますと助かります。

回答No.1

hetare560

こんにちは。

まず気になったのが、【#content:after】です。
この記述だとスタイルが適用されませんので【#content .after】もしくは
【#content #after】に直してみてください。（たぶん前者だと思いますが）

もしこれで解決しない場合はCSSだけではなく、
htmlのソース（画像とテキスト周辺のもの）も提示していただかないと
答えようがありません。

お礼

アドバイスありがとうございます!
hetare560様の仰る様に【#content .after】と【#content #after】に変更してみましたが変化が見られませんでした。

HTMLのソースとはこちらでよろしいでしょうか?
http://space.geocities.jp/web_up_space/blog.html
トップページのHTMLです。他に【個別記事ページ】【カテゴリアーカイブ】【月別アーカイブ】があります。
どの辺りが必要な部位か分からなかったため、ほぼ丸ごとで恐縮です。

お手数をおかけいたしますが、再度お力添えを頂けますと嬉しいです。