Dreamweaverでh3に使った画像が表示されない理由と解決方法

このQ&Aのポイント
  • Dreamweaver MX2004を使用して、h3要素に背景画像を設定しましたが、アップロードすると画像が表示されません。
  • 画像の表示ができない原因はデフォルト設定によるものかと思われますが、CSSの中身を確認しても解決策が見つかりません。
  • 画像のフォーマットやサイズの設定がGIFで32×32ピクセルになってしまっている可能性があります。設定を修正することで問題が解決するかもしれません。
回答を見る
  • ベストアンサー

Dreamweaverのh3に使った画像がみえません

Dreamweaver MX2004を使用しています。 サンプルページから作り始め、見出し3を編集して背景画像に images/banner.jpg を設定しました。 ところが、プレビューでは意図通りなのに、アップロードすると画像が表示されません。 じかに画像にアクセスしてみると、タイトルが「banner.jpg(GIF画像、32×32ピクセル)」となっていて、画像タイプも大きさも別物になっています。 これはデフォルト設定でこうなっていたと想像できますが、CSSの中身を見てもどこが変なのかわかりません。 h3{ font: normal 24px "MS Pゴシック", Osaka; color: #003DF0; text-align: center; height: 30px; width: 450px; background-image: url(images/banner.jpg); } 画像がGIFで32×32、という情報はどこに設定されていて、どう直せばいいのでしょうか。

noname#183584
noname#183584

質問者が選んだベストアンサー

  • ベストアンサー
  • tsubaki39
  • ベストアンサー率61% (77/125)
回答No.1

>じかに画像にアクセスしてみると、タイトルが「banner.jpg(GIF画像、32×32ピクセル)」と >なっていて、画像タイプも大きさも別物になっています。 ということは、CSSではなくて、アップロードした画像の問題では? もう一度アップロードし直してみてはどうでしょう? もしアスキーモードとバイナリモードを選択できるなら、アスキーモードにしておくとか…。 画像ソフトで編集してjpgに書き出しているなら、書き出しからやり直してみるとか…。

noname#183584
質問者

お礼

アドバイスありがとうございます。 もう一度書き出して、ファイル名も変えてみたらできました。 banner.jpgという名前だとだめみたいでした。 どうもありがとうございました。

関連するQ&A

  • アップしたはずのGIF画像が見当たらない

    ホームページ初心者です。 今までは出来ていたのですが今日バナー用の画像をUPしました。 それが確認できません。 私のHPのURL http://www○○○/images/banner.gif を表示させると白紙です。 ページがひょうじされません等とは出ません 反転させると四角があります。 プロパティを見ると banner.gif サイズ881バイト 大きさ32×32ピクセルとあります。 PictureGearで見ると他のgif画像と一緒にそこにあるし プロパティを見ると C:\HomePage\images ファイル名 banner.gif ファイルの種類GIFフォーマット ファイルサイズ 2 となっています。 88×31ピクセルです。 <img src="images/banner.gif" border=0 height=31 width=88 alt="バナー"> これでC:\HomePage\~~.htmlではちゃんと表示されるので 字の間違いはないと思います。 何がいけないのでしょう。 アップに失敗しているのでしょうか。 W98SE、IE、FFFTPを使っています。

  • HTML(画像の幅や高さの設定について)

    HTMLで画像の幅(width)や高さ(height)を設定する際、 次のようにピクセル「px」は省略してもよろしいのでしょうか? 【例】<img src="images/logo.gif" width="200" height="300">

  • 拡張子monoファイルとDreamweaverで作業された画像を開く方法?

    aaa.gif.monoという画像があるのですが、どうやったらひらけますでしょうか。おそらく、Dreamweaverで作成されたものだと思います。また、gif、jpgファイルがまったく見れないのですが、同様にDreamweaverで作業されたもののようですが、どうやっても「ファイル形式モジュールでファイルの形式を解析できません」などのエラーが出てしまいます。拡張子はgif、jpgなのですが、どうも分かりません。どなたか教えてください。お願いします。

    • 締切済み
    • CSS
  • 画像を縦にそろえて表示させたいのです。

    画像を縦にそろえて表示させたいのです。 リストボックスの中身を「△」(1up.gif)「▽」(1down.gif)で入れ替える。 そんな画面を作ろうとしています。(今は画像を並べているだけです。) 「△」(1up.gif) 「▽」(1down.gif) の2っのボタンはリストボックス脇の上端と下端にタテに並べたい所ですが どうしても添付の画像のようになってしまい悩んでおります。 ※の行で何かしらやればよいのかと align="left" や BR Clear=ALL などを試したのですが「▽」ボタンだけがリストボックスの下の行に配置されてしまいます。 皆様のお知恵を拝借したく思います。 宜しくお願いします。 htmlソース <body> <hr align="left" width="100%" SIZE="5"> <select size="15" name="Listbox1" style="WIDTH:200px" multiple> </select> <IMG src="../images/1up.gif" align="top"> ※ <IMG src="../images/1down.gif"> <hr align="left" width="100%" SIZE="5"> <div align="left"> <IMG src="../images/Set.gif" </body>

    • ベストアンサー
    • HTML
  • 【CSS】h1を画像にしたいのですが、Dreamweaver上では表示されてもプレビューで消えてしまいます!

    h1にテキストをいれていますが、それを背景画像で見せたいため、display:none;で見えなくしています。 背景画像logo.pngは表示させたいのですが、Dreamweaver上では表示されてもプレビューでどのブラウザでも消えてしまいます! どなたかよろしくおねがいします! 【CSS】 #logo{ margin:40px 50px 0px 0px; padding:0px; background:url(images/logo.png) no-repeat; } h1{margin:0px;   padding;0px;} h1 span{display:none;} h2{margin:0px 50px 0px 0px;   padding:0px; } h2 span{display:none;} --- 【HTML】 <h1 id="logo"><span>Ethiopa</span></h1> <h2><span>Ethiopa Blog</span></h2>

    • ベストアンサー
    • HTML
  • IE6,7で画像の上に載せた文字がずれる

    HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>

    • ベストアンサー
    • CSS
  • 見出し<h3>にリンクを追加すると背景画像が表示されない

    h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。

  • サイドナビの配置が上手くいきません。

    初心者なので指導宜しくおねがいします。 サイドナビエリアの中でタイトル画像、ボタン画像をセンターにしたいのですがfirefox、IEで確認すると別々の配置になります何か良い解決策を教えて下さい。 私が書いたタグ、cssで変だなと言う点がありましたら指摘宜しくお願いします。 <!--サイドナビエリア--> <div id="sidenavi"> <ul> <li id="sidetop">back namber</li>    <li><a href="work2010.html" title="2010" id="w10">2010</a></li> <li><a href="work2009.html" title="2009" id="w09">2009</a></li> <li><a href="work2008.html" title="2008" id="w08">2008</a></li> <li><a href="work2007.html" title="2007" id="w07">2007</a></li> </ul> </div> <!--ここまでサイドナビエリア--> /*---------------------------------------------- サイドナビエリア ----------------------------------------------*/ #sidenavi { float:left; height:auto; width: 300px; margin: 30px auto 0; } #sidenavi ul{ height: 30px; width: 60px; list-style: none; padding: 0 ; margin: 0 ; } #sidenavi ul li { text-align:center; } #sidenavi ul li a { background: #FFFFFF; text-indent: -9999px; display: block; height: 30px; width:60px; overflow: hidden; } #sidenavi #sidetop{ height: 30px; width: 150px; text-indent: -9999px; margin: 0 auto 0; background:url(../images_banner/sidemenu/back_namber.jpg) no-repeat; } #sidenavi #w10 { width:60px; background:url(../images_banner/sidemenu/2010.jpg) no-repeat; } #sidenavi #w10:hover { width:60px; background:url(../images_banner/sidemenu/2010over.jpg) no-repeat; } #sidenavi #w09 { width:60px; background:url(../images_banner/sidemenu/2009.jpg) no-repeat; } #sidenavi #w09:hover { width:60px; background:url(../images_banner/sidemenu/2009over.jpg) no-repeat; } #sidenavi #w08 { width:60px; background:url(../images_banner/sidemenu/2008.jpg) no-repeat; } #sidenavi #w08:hover { width:60px; background:url(../images_banner/sidemenu/2008over.jpg) no-repeat; } #sidenavi #w07 { width:60px; background:url(../images_banner/sidemenu/2007.jpg) no-repeat; } #sidenavi #w07:hover { width:60px; background:url(../images_banner/sidemenu/2007over.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • [携帯]divで指定した背景色から画像がはみ出す。

    携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは       <div clear="all" style="clear:both;">          <img src="./images/space.gif">       </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。

  • Dreamweaverで背景に画像を取り込む方法

    Dreamweaver3Jで、背景に自分で作ったGIF画像を取り込みたいのですが、取り込んだ際にGIF画像が何度もリピートしてしまい、うまく配置出来ません。リピートさせたくないのですが、どうすればよいのでしょうか?ページプロパティで設定できるような所は見当たりません。どうか宜しくお願いいたします。環境はWin98で800x600の画面です。

専門家に質問してみよう