記事内容に画像(置き換え要素)を含む場合の処置

up:

問題点

画像に限らず、iframeobjectやフォーム部品のような置換要素、tablepreなど基本的に折り返しのされない要素でも同様ですが、記事幅よりそれらの幅が大きいと、記事ブロックを飛び出して表示したり、ブラウザによっては記事ブロックの幅を引き伸ばしてしまったりします。

サンプル1:IE7以上やIE以外
画像が記事枠から飛び出て表示される。 IE7の場合は画像がメニューのfloatの下に行くことで上部に余白ができたりする
サンプル2:IE6以下
記事幅が画像幅に合わせて伸び、枠画像が崩れたり、floatが下にずれる

見た目の悪さはともかくとして、なにより二カラムもしくはそれ以上の多カラムのとき、右側のカラムの内容が飛び出た要素の下に隠れるということになる可能性があります。

対処法

親要素(div#KIZIやdiv.text)にoverflow:auto;overflow:hiddenを指定する
overflow:auto;を指定すると幅以上の内容が含まれているとたいていの環境の場合随時スクロールバーが出ます。全体の把握ができなくなって見づらい面があります。ちょっと扱いづらい感じがします。
overflow:hiddenを指定すると幅以上の内容は含まれているとはみ出た部分は表示しません。全体の把握はできなくなりますが、見切れてもいい場合ならばありです。
該当要素(画像)に対してmax-width:100%;(もしくは100%以下)を指定する
max-widthは横幅の最大値を指定できます。記事ブロックの横幅以上ある該当要素は記事ブロックの領域の横幅まで縮小されます。 けれど、特に画像の場合、縮小しないで指定したpx幅で見て欲しいケースもあるので全解決とはいかないかもしれません。
極端に横幅の大きな画像を直接挿入しない
一番確実ではないでしょうか。画像を参照したい場合は、記事内では文字やサムネイルリンクのみにして、大きな画像は別途表示します。
目的幅以上のテンプレートだけを選択して使う
最初から目的の横幅以上を確実に確保できるテンプレートのみを使います。CDPの特徴である選択の広さが狭まるのがちょっと残念です。また、あとで追加する画像がある場合、今度は画像の横幅の最大値が決めうちになってしまいます。
使うテンプレートの横幅をカスタマイズして目的以上の幅を確保する
カスタマイズ可のテンプレートを使う場合は、随時編集することもできますが、多少慣れが必要です。
px固定幅のテンプレートをカスタマイズする場合
div#KIZIもしくはdiv.textの横幅(width)の指定を探して、サイトに存在する画像の最大幅以上にします。
テンプレートによってはdiv#KIZIdiv.textの横幅は明示されておらず、【div#PAGETOPの横幅】や、【div#PAGETOPの横幅からdiv#KIZIと横並びになるブロックの横幅とを引いた数値】なんていうのが記事ブロックの領域分であったり、場合によっては余白分についても考慮しなければいけませんし、細かい調整が必要な場合もあるので、テンプレート作成者がカスタマイズを考慮していたりCSSを読むのに慣れてないと少し難しいかもしれません。また、枠に画像を用いていてがっちり幅固定のテンプレートの場合は画像の編集も必要かもしれませんです。
%幅のテンプレートををカスタマイズする場合
%幅をある程度活かしたい場合は、min-widthの指定が効果的です。min-widthで指定するとその横幅より小さい幅にはなりません。div.textmin-widthにサイトに存在する画像の最大横幅以上を指定します。
指定例
div.text{ min-width: 700px; }
  • IE6はmax-widthmin-widthに対応していません。IE6を対応に含めるならば、JavaScriptのライブラリを用いる・IE6だけ固定幅にする・といった対処法が考えられます。ただ、IE6の場合は記事自体の幅が広がるので、floatを用いたカラムレイアウトならブロックが隠れることはありません。見栄えが悪くなったりカラム落ちしたりしますが……