サポート » 使い方全般 » IEで画像添付ファイルの画像が表示されない

  • 解決済 studiooak

    (@studiooak)


    記事内画像をクリックすると大きめの画像が表示されるように、画像添付ファイル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 -->
5件の返信を表示中 - 1 - 5件目 (全5件中)
  • スタイルに指定の仕方で、IEで画像がが表示できない事があります

    http://d.hatena.ne.jp/tenman/20110225/p1

    サンプルへのリンクもあるので、確認してみてください

    トピック投稿者 studiooak

    (@studiooak)

    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ファイルも、一度取っ払うといいかもしれないです。

    元に戻せるように準備してから作業してください :)

    トピック投稿者 studiooak

    (@studiooak)

    早速のお返事、ありがとうございました。
    ご指摘いただいた.attachmentのドットは投稿するためにコピーした時に抜けてしまったようです。この.attachmentのクラスは、bodyのクラスです。他のテンプレートでも#mainというセレクタを使い回していますので、このテンプレートに限定させるために使用しています。
    widthとheightを!importantでと教えて頂きました。縦位置の画像だけなら、widthとheightを指定してしまえばいいのでしょうが、横位置の画像の場合もあります。そうすると、幅は同じ580pxでも高さが変わってきます。なので、heightの限定が出来ないのです。テーマは自作で、javascriptは使っていません。もう少し、CSSを確認してみますね。
    本当にご親切にありがとうございました。

    トピック投稿者 studiooak

    (@studiooak)

    解決しました。私のCSS知識不足でした。width:580px height:autoにすればよかったのですね。お騒がせしました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「IEで画像添付ファイルの画像が表示されない」には新たに返信することはできません。