問題点
画像に限らず、iframe
やobject
やフォーム部品のような置換要素、table
・pre
など基本的に折り返しのされない要素でも同様ですが、記事幅よりそれらの幅が大きいと、記事ブロックを飛び出して表示したり、ブラウザによっては記事ブロックの幅を引き伸ばしてしまったりします。
見た目の悪さはともかくとして、なにより二カラムもしくはそれ以上の多カラムのとき、右側のカラムの内容が飛び出た要素の下に隠れるということになる可能性があります。
対処法
- 親要素(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#KIZI
・div.text
の横幅は明示されておらず、【div#PAGETOP
の横幅】や、【div#PAGETOP
の横幅からdiv#KIZI
と横並びになるブロックの横幅とを引いた数値】なんていうのが記事ブロックの領域分であったり、場合によっては余白分についても考慮しなければいけませんし、細かい調整が必要な場合もあるので、テンプレート作成者がカスタマイズを考慮していたりCSSを読むのに慣れてないと少し難しいかもしれません。また、枠に画像を用いていてがっちり幅固定のテンプレートの場合は画像の編集も必要かもしれませんです。- テンプレートによっては
- %幅のテンプレートををカスタマイズする場合
- %幅をある程度活かしたい場合は、
min-width
の指定が効果的です。min-width
で指定するとその横幅より小さい幅にはなりません。div.text
のmin-width
にサイトに存在する画像の最大横幅以上を指定します。
- IE6は
max-width
やmin-width
に対応していません。IE6を対応に含めるならば、JavaScriptのライブラリを用いる・IE6だけ固定幅にする・といった対処法が考えられます。ただ、IE6の場合は記事自体の幅が広がるので、floatを用いたカラムレイアウトならブロックが隠れることはありません。見栄えが悪くなったりカラム落ちしたりしますが……