いつもお世話になっております。IEのページレイアウトの崩れについて質問があります。vicuna互換テンプレートを使用しているのですが、IEで表示するとレイアウトが崩れます。これはvicuna互換テンプレートの問題でしょうか??
ご質問ありがとうございます。
Vicuna CMS のテンプレートおよび CSS は、IEでの表示にも配慮して作成されています。
ただ、Vicuna CMS は、一般的なブログシステムを前提としていますので、CMONOS.JP ではスキン CSS 読み込み時にいくつか変更を加えています。
それらの変更がなんらかの悪影響を及ぼしている可能性はあるかもしれません。
IEによる表示の崩れは IE のバージョンによりまちまちです。IE のどのバージョンで、どのページがどのように崩れるのか、スクリーンショットやリンクで例示していただけると問題解決のヒントとなるかもしれません。
IE でカラムがくずれる場合、カラム内にある画像やテーブルが、カラムの幅を超えてしまっていないか確認してください。padding や border の幅にも注意してください。
たしか、IE6あたりでは、内容にあわせてカラムが広がってしまい、その影響でカラムが崩れてしまいます。
以上参考になりましたら幸いです。
早速の対応に感謝いたします。バージョンはIE6で、サイトURLをのせておきました。アイキャッチ画像がずれていたり、文字フォントがおかしいなような?気がします。
よろしくお願い致します。
サイトを拝見しました。
アイキャッチがずれるというよりも、コンテンツエリアの幅が膨らんでいるようです。
原因はツイッターのバナー画像ではないかと思います。
default.css の130-131行目で、画像の幅がカラムを超えないよう max-width が指定されています。このため、IE以外では画像が適度に縮小され表示の崩れが防がれています。
しかし、IE6では max-width が効きませんので、画像本来のサイズで表示され、コンテンツエリアが膨らんでしまっているようです。
body.individual div#main div.section div.textBody div.object img,
div#utilities img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
この問題を解決するには、ツイッターバナーの画像サイズを縮小して、カラムに収まるようにしてください。あと、右カラムの各セクションに不要な ul があるように思います。
フォントについては、どうおかしいのかわかりませんでした。。。
以上参考になりましたら幸いですm(_ _)m。
回答ありがとうございます。ツイッタ−バナーのサイズを小さくしようとしたらCSSが適用されていないような状況になりました。どこが問題でしょうか??
よろしくお願い致します。
タグを消してしまったか、どこかに余分なタグがあるか、どこかでタグを閉じすぎているか、だと思います。
たぶん、テンプレート冒頭が「<div id="content"><div id="main">」でなく、「<div id="main">」となっているせいではないかと思います。
早速の対応に感謝いたします。解決しました〜!IEのページレイアウトのずれもバナーを小さくして対応できそうです。
毎回、丁寧に対応してくださってありがとうございます!
ご報告ありがとうございます。意図した表示となったようでよかったです。また何かありましたらぜひご指摘下さい。お待ちしておりますm(_ _)m。