こんにちは、
私も、画像サイズの件で質問中なのですが、私の環境でIE6で閲覧してみたのですが、ほかのブラウザで閲覧したときと同じサイズで表示されました。
私の場合は、width height属性が、適用されない症状なので、スタイルは有効でした。
すべてのイメージソースが6ミリ角程度なら、スタイルシートに何らかの原因があるかもしれません。
header.phpから
<link rel="stylesheet"
type="text/css"
media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
をいったん削除して、画像サイズが6ミリのままなのかどうかをチェックする必要があると思います。
スタイル指定が、ヘッダ内にある場合も同様に、
また、
wp_head();
に、ほかのプラグインからのスタイル指定が挿入されることがありますので、ソースを確認の上、影響を確認する必要もあると思います。
その結果、6ミリのまま維持されるようでしたら
jQuery等の、javascriptによるスタイル操作がないかどうかを、同様にチェックする
という流れで
チェックされてみてはいかがでしょうか
また、IE6は、互換モードで動作しているために発生している可能性もあります。
かなり古いので、現在のjQueryなどのスクリプトを、きちんと読み込めているかどうかも怪しいので、労多く幸少ないと思うかもしれません
原因がわかれば、
<!--[if IE 6 ]>
<p>この表示はIE6だけで見えます。</p>
<![endif]-->
等で、対処が可能かもしれませんね
TwentyTenは基本的にIE6はサポート外なんじゃないでしょうか。私も試しにIE6で閲覧してみると、akito2362さんと同じ症状が出ました。
そしてTwentyTenをIE6に対応させるプラグインを見つけましたので使ってみると、一瞬だけ画像が小さく表示されますが、すぐに正しいサイズで表示されるようになりました。一度試してみてください。
http://wordpress.org/extend/plugins/ie6-support-for-2010-theme/
こんにちわ。
皆さん、ありがとうございます。
早速いまから教えて頂いた方法を試していこうと思います。
アドレスを幾つか取得して試してみたのですが、
どうやらIE6で画像のサイズが狂う原因は、TwentyTenのバージョンにあるようです。
バージョン1.0ではIE6で見ると、メニューバーの右端が写真よりも少し飛び出ていて、
バージョン1.1ではそれが解消されたのですが、代わりに上記のバグが発生する、と・・・。
＞nobitaさん
header.phpから
<link rel="stylesheet"
type="text/css"
media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
を削除すると、6mm角に表示される事はなくなったので
1.0から1.1に変更されたに当たって、スタイルシートに何か原因があるのかもですね。
無垢の状態から1.1にアップデートしただけなので、wp_head();内には何も入ってなかったです。
＞Heihachiroさん
教えて頂いた、
http://wordpress.org/extend/plugins/ie6-support-for-2010-theme/
ですが、TwentyTenのバージョン1.1にインストールすると、
Firefoxに比べて大きかった、文字のサイズは改善されたものの
画像のサイズのバグに関しては、私の環境では治らないみたいです。
しかし、バージョン1.0にインストールすると、
メニューバーが画像より少し飛び出ていた問題や
文字のサイズなどが改善されたので、かなり良い感じです。
私のスキルでは直接、問題個所をいじって治せないと思うので、これでいこうと思います。
ありがとうございます。
まだ実際に作ろうと思っているサイトの方で試していないのと、
1.0と1.1のスタイルシートの違いも一度比べてみたいのとで
もう少し、未解決の状態のままにさせて下さい。(一日～二日くらい)
良いお知恵をお持ちの方がいらっしゃいましたら、引き続きよろしくお願いします。
1.0 の改善
/* =Menu
————————————————————– */
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px; ← 追加 (メニューバーのでっぱり解消)
1.1の改善
/* =Images
————————————————————– */
#content img {
margin: 0;
height: auto; ← 消す
max-width: 640px;
width: auto; ← 消す
こうすると、IE6で見ると6mm角に画像が縮まってしまう事はなくなったものの
今度はfirefoxで見ると横幅を越える大きさのフルサイズの画像が縦長になってしまってますね。
autoが入っていると、縦横のサイズがレイアウトに合わせて適切な大きさになるみたいです。
そんなに大きい画像を使わなければ済む事ですが。。
あと、<!–[if IE 6 ]>はスタイルシート内に入れてはダメなのですか？
IEだけに見えるタグとかIE以外に見えるタグとか試しに使ってみたのですが
Firefoxのレイアウトが崩れてしまうみたいです。
それともスタイルシートをIE6専用のものを作って、
他のテンプレートにIEの場合はそっちを読み込むように記述をすれば良いのでしょうか？
ここを参考に
http://allabout.co.jp/gm/gc/23921/3/
例えば、分岐をpage.phpに適用させようとしても、
<link rel=”stylesheet” type=”text/css” href=”●●.css”>に該当するようなものが見当たらないのですが
どこをいじれば良いのでしょうか？
こんにちは、
今度はfirefoxで見ると横幅を越える大きさのフルサイズの画像が縦長になってしまってますね。
画像のスタイルをセットする為のプロパティは、他にも、max-heightやmin-width clip等といったプロパティを使うことができます。
また、詳細度というスタイルの適用順の規則もありますので、工夫をしていくことになると思います。
あと、<!–[if IE 6 ]>はスタイルシート内に入れてはダメなのですか？
html内で使います
例えば、分岐をpage.phpに適用させようとしても、
<link rel=”stylesheet” type=”text/css” href=”●●.css”>に該当するようなものが見当たらないのですが
どこをいじれば良いのでしょうか？
●●.cssは自分で作ってください。
スタイルの指定は、エラーを出さないのでちゃんとやろうとするととても大変です
wordPressを使いこなすための基本知識なので、お互いがんばりましょう
あと、<!--[if IE 6 ]>はスタイルシート内に入れてはダメなのですか？
もしWEB標準などの絡みで、html内に<!--[if IE 6 ]>を書きたくないという意味なら、Heihachiroさんが示してくれたプラグインに含まれる.htcファイルや、
PHP、ｊQueryでも、ブラウザ判定はできるので、<!--[if IE 6 ]>を無理に使う必要はないです
わたしは、<!--[if IE 6 ]>を使って、「アップグレードしてください」と表示するようにしています。
nobitaさん、ありがとうございます。
知らない事が多すぎますね。勉強になります。
一通りサイトの作成が済んで余暇が出来たら
IE6とFirefoxの対応を両立させられるようにがんばってみようと思います。
