IEで画像添付ファイルの画像が表示されない
-
記事内画像をクリックすると大きめの画像が表示されるように、画像添付ファイルattachment.phpを追加しました。画像タイトルと拡大画像がヘッダー下に表示されるようにしてあります。Macで制作しており、アップの際にうっかりしてIEでのブラウザ確認を忘れていたのですが、Windowsでは画像が表示されないという投稿メンバーからの指摘があり、Adobe Brouser Labで確認してみると、IE7~9まででは、記事内画像クリックで添付ページには飛ぶのですが、表示されるのは画像タイトルのみで画像自体は表示されません。ChromeとFirefoxのWindows版では表示されます。
WordPress超初心者で初めて作ったサイトです。どこかコードに問題があるのでしょうか?フォーラム、ネットで調べても、わからず、困り果てています。どなたか、対処法を教えて頂けたらと思い、投稿しました。テンプレートのコードは以下の通りです。<?php get_header('2'); ?> <div id="contents"> <div id="main"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><?php the_title(); ?></h2> <?php $att_image = wp_get_attachment_image_src( $attachment_id, "large"); ?> <img src="<?php echo $att_image[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>"> <?php endwhile; endif; ?> </div><!-- end #main -->
-
nobitaさん
お返事ありがとうございました。リンクサイトも拝見しましたが、悲しい事に書いていらっしゃる意味が分からず、どうすればいいのかわかりませんでした。ダッシュボードのメディア設定で指定した画像サイズの大(幅の上限580px 高さの上限1024px) largeをwp_get_attachment_image_srcのパラメータに指定してあります。ラップするdivに幅を明示する必要があるとの事でしたので、div#mainに余裕を持ってwidth:600pxの指定をしてみましたが、変化はありませんでした。
Windowsマシン(IE8)の開発者ツールで画像部分を確認してみたところ、img width=”1″ height=”1″ になっています。(srcは表示されている他のブラウザと同じ)これが表示されない原因かと思い、
attachment #main img{
max-width:580px;
max-height:1024px;
}
と指定してみましたが、Webサービスで確認したIE9とともに変わらずです。困りました!どうやったらIEに表示させられるのでしょうか?追伸:これ大事なので、最初に追加
width=”1″ height=”1″ 他のブラウザでも確認必要です。
phpのコードそのものが、間違ってませんか?$image_attributes
という配列はありますか?
$att_image[1]
ではないですか?<?php $att_image = wp_get_attachment_image_src( $attachment_id, "large"); ?> <img src="<?php echo $att_image[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">
まずは、幅と高さを、正常なコードに修正してください
attachment #main img{ max-width:580px; max-height:1024px; }
は、幅や高さの上限設定ですから、指定が、間違っています。
クラスと、idの並びが、提示されているコードから見て、なんか、ちょっとおかしい感じがします。
#contents #main img{ width:580px!important; height:1024px!important; }
としてみてください。
だめなら、
原因が、cssにあるかどうか、簡単に調べるなら、一度、スタイルを全部取っ払えばいいです。
レイアウトが崩れていても、画像が表示できるようなら、CSSを狙いを定めるという事でいいと思います。
テーマにもよりますが、javascriptでスタイルをいじる事もあるので、jsファイルも、一度取っ払うといいかもしれないです。
元に戻せるように準備してから作業してください :)
早速のお返事、ありがとうございました。
ご指摘いただいた.attachmentのドットは投稿するためにコピーした時に抜けてしまったようです。この.attachmentのクラスは、bodyのクラスです。他のテンプレートでも#mainというセレクタを使い回していますので、このテンプレートに限定させるために使用しています。
widthとheightを!importantでと教えて頂きました。縦位置の画像だけなら、widthとheightを指定してしまえばいいのでしょうが、横位置の画像の場合もあります。そうすると、幅は同じ580pxでも高さが変わってきます。なので、heightの限定が出来ないのです。テーマは自作で、javascriptは使っていません。もう少し、CSSを確認してみますね。
本当にご親切にありがとうございました。
- トピック「IEで画像添付ファイルの画像が表示されない」には新たに返信することはできません。