サポート » テーマ » DIV内に背景画像が表示されない?

  • 解決済 mminami

    (@mminami)


    いつも当フォーラムで勉強させて頂いています。
    オリジナルテーマを作っているのですが、単純なところでつまづき、困っています。
    DIVタグ内に背景画像を挿入しようと、style.cssに
    background-image:url(‘menu_bg.jpg’);を記述して、ブラウザで表示させるのですが、
    Fifefox5.0では表示されるのに、IE8.0では表示されません!?
    色々と試してみました。さくらレンタルサーバーにwordpress3.2の環境を構築していますが、
    このwordpress3.2(www/wordpress/)を抜けて、トップ(www)にファイル群(index.php,style.css,menu_bg.jpg)を移動して表示させると、両方のブラウザで考え通りに表示されます。従って、wordpressでの使用間違いなのか、IE8との・・・
    ちなみに、最小化したコーディングを下記に記します!
    1.index.php
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”ja” lang=”ja”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />
    <title></title>
    <link rel=”stylesheet” type=”text/css” href=”style.css” />
    </head>

    <body>

    <div ID=”navi”>あああああああ</div>

    いいいいいい

    </body>
    </html>

    2.style.css
    /*
    テーマの記述
    */
    #navi {
    background-color: #fff000;
    background-image:url(‘menu_bg.jpg’);
    width:820px;
    height:100px;
    }
    3.menu_bg.jpg 同じディレクトリに配置

    以上です。単純なところなのですが、どなたか宜しくお願い致します!!

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • モデレーター jim912

    (@jim912)

    mminamiさん、こんにちは。

    index.phpのコードが呈示されたもののままであれば、style.cssへのパスが合わないことになるはずです。

    デフォルトテーマのheader.phpなどを参考にstyle.cssへのパスが正しくなるようにしてみてください。

    トピック投稿者 mminami

    (@mminami)

    jim912さん、有難うございます。そうですね!先に、具体的コードはwww/ディレクトリで検証したコードをコピ・ペしていました。ゴメンナサイ!!
    wordpress内のオリジナルテーマフォルダの簡易検証版のindex.phpには、実際、
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />
    をコーディングしています。現実に、FifefoxやIEでもbackground-colorは指定したとおり、表示されています。

    すみませんが、もう少しお付き合い下さいませ。

    トピック投稿者 mminami

    (@mminami)

     その後、色々検証した結果、ローカルでのwordpress3.0の環境では
    見えました。
    この結果から、現在構築中のレンタルサーバーでのwordpress3.2の環境で問題が起っていると
    考えられますが、ただ、同サーバーに3.0をインストールして実際に試してみないといけないですが・・・・
     wordpressのバージョンの問題と推察してよいものか!?

    モデレーター jim912

    (@jim912)

    mminamiさん

    なにをしたら、ローカルで見えるようになりましたか?
    WordPressが表示に関与するのは、htmlのソースレベルまでで、実際にブラウザの種類やバージョンによる差違は、cssに因ることがほとんどです。

    WordPressから出力されているhtmlのソースをhtmlファイルとして保存し、表示させてみれば、少なくともWordPressが原因であるか否かの切り分けは可能です。

    トピック投稿者 mminami

    (@mminami)

    jim912さん、有難うございます。返信遅くなり、すみません!!
    ローカルで見えるようになったのは、何もしていません!!
    レンタルサーバーで見えていないテーマフォルダごと、コピーしてローカルでブラウザしただけなのです。

    おっしゃられる通り、WordPressから出力されているhtmlのソースをhtmlファイルとして保存(
    index.htmlとして)し、WordPressのトップにアップさせてみたのですが、やはり同じ症状なのです。ということは、CSSの問題なのでしょうかね!?
    ちなみに、ソースの内容(index.html)は
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
    <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>test</title>
    <link rel=”stylesheet” href=”http://ltechno.jp/wordpress/wp-content/themes/theme2/style.css&#8221; type=”text/css” />
    </head>
    <body>
    <div ID=”navi”>aaaaaaaa܂</div>

    <br clear=”all”>

    bbbbb
    </body>
    </html>

    そして、スタイルシート(style.css)も簡略化して
    /*
    Theme Name: Theme2
    Theme URI: http://ltechno.jp/wordpress/
    Description: new theme
    Author: ltecno Ltd.
    Author URI:
    Template:
    Version:
    */

    #navi {
    float:left;
    background-color: #fff000;
    background: url(images/menu_bg.jpg);
    width:820px;
    }

    背景画像も ./images/menu_bg.jpg にアップされています。
    繰り返しますが、Fifefox5.0では表示されます。・・・・

    モデレーター jim912

    (@jim912)

    mminamiさん

    なにもしていないのに状況が改善されることはあり得ません。
    ブラウザのキャッシュなどで、以前の表示が維持されることもありますので、その点の検証は厳密に行う必要があります。

    htmlファイルで同様の状況であれば、cssの問題だと思われます。

    トピック投稿者 mminami

    (@mminami)

    jim912さん、解決しました!!
    お手数おかけしましたが、本当に初歩的なミスだと思いますが、
    実は、これまで、テーマフォルダをFTPでアップしていたのです。
    wordpressの管理画面のテーマ編集において、「テーマのインストール」が気になり、
    一旦削除してから、管理画面よりテーマをインストールしたのです。そうすると、ばっちり
    スタイルシートが機能して、予定通りのDIVタグ内に背景画像が表示できました!!
    長い間、お手数かけました。

    これまで、プラグインもFTP転送してから使用していたので、かなりはまりました(冷汗!!)
    これって、wordpressのマニュアルに記述されているんですかね!(常識ですか!?・・・)
    有難うございました!!

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「DIV内に背景画像が表示されない?」には新たに返信することはできません。