助太刀忍者(質問掲示板)

助太刀忍者

No.49167    画像が表示されません アップロード済
アップロードはできていますが画像関係は全く表示されません。何か方法はありますか?
アップロードせずindex画面で見るときちんと表示されますが ホームページ上だと表示されません
試した操作手順
アップローダーにてアップロード
投稿者:No Name Ninja 投稿時間:2011-07-18 21:02:49
投稿者 : No Name Ninja
投稿時間:2011-07-29 21:13:50
>TOPのロゴ以外は画像がうまくアップできました。
>(残るはヘッダー部分です)
拝見しましたが、「マーク○○社会保険労務士事務所」の画像も、ビル群の画像も、ヘッダと言える場所の画像は表示されていますよ。

もしも、本当は違う画像が表示されるはずだ、という場合は、本来の画像がどういう画像か説明ください。

また、上記の画像であっているが、自分のPCからは確認できない、という場合は、ブラウザのキャッシュを削除して強制読み込み(Ctrl+F5)を行ってみて下さい。
投稿者 : No Name Ninja
投稿時間:2011-07-25 15:49:54
URLの提示ありがとうございます。提示URL拝見しました。
結果、原因は、前の回答の例で言うところの、

画像ファイルのアップロード場所と、CSSに記述している画像ファイルURLが、食い違っている。

・・・これです。
CSSコードを見てみましょう。例えば、#headerですと、

background-image:url(images/header_backsr_4.gif);

・・・のようになっていますよね?
これは、「images」という名前のフォルダ(ディレクトリ)内にある、「header_backsr_4.gif」という画像ファイルを表示させる、という指定です。ですから、勿論、「images」という名前のディレクトリに画像が入っていないと表示されません。

今現在、各画像ファイルはRootにアップロードされています。ですので、

Root上に、「images」という名前のディレクトリを作って、その中へ各画像ファイルを移動させてください。全て「アップローダー」の機能で可能な操作です。

※アップローダーでは、フォルダ丸ごとのアップロードができないので、アップロードする際には階層関係に注意する必要があります。今後の参考にしてください。
質問者からのコメント 2011-07-28 20:37:21
ありがとうございました。TOPのロゴ以外は画像がうまくアップできました。
(残るはヘッダー部分です)
投稿者 : No Name Ninja
投稿時間:2011-07-18 21:17:55
>アップロードはできていますが
サーバ上に画像ファイルがアップロードできていることは確認したのですよね?

では、
>アップロードせずindex画面で見るときちんと表示されますが
>ホームページ上だと表示されません
ということを踏まえて考えられるのは、

・アップロード場所と、イメージタグに記述している画像ファイルURLが、食い違っている。
・画像ファイル名に、全角文字、日本語、空白、使用できない記号を含んでいる。
・イメージタグに記述した画像ファイルURLがローカルパスになっている。
・適していないファイル形式(.bmp)の画像を使用している。
・その他何らかの記述ミス。

以下、装飾的画像について。
・アップロード場所と、CSSに記述している画像ファイルURLが、食い違っている。
・外部CSSファイル(が、あるとして)をアップロードし忘れている。
・外部CSSファイルのアップロード場所が適切でない。

※今すぐに解決したい場合は、実際のサイトURLを提示下さい。
サイトURL提示に抵抗がある場合は、どこか一箇所でも構いませんので、イメージタグ部分のソースを伏字なしで提示下さい。絶対パスで記述している場合は、「アカウント名」部分のみ伏字にして下さい。
質問者からのコメント 2011-07-23 19:26:25
http://watanabejimusyo.okoshi-yasu.com/
間違っていればご指摘ください。

HTML
<!--ヘッダーここから-->
<a name="top" id="top"></a>
<h1>事務所へようこそ</h1>
<div id="header">
<!--タイトルロゴここから-->
<div id="header_left"></div>
<!--タイトルロゴここまで-->
<div id="header_right">
<ul>
<li><a href="#">サイトマップ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!--ヘッダーここまで-->

<!--ヘッダーメニューここから-->
<div id="menu">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li><a href="#2">事務所概要</a></li>

<!--ヘッダーメニューここから-->
<div id="menu">
<ul>
<li class="home"><a href="index.html">ホーム</a></li>
<li><a href="#2">事務所概要</a></li>

<!--プルダウンメニューここから-->
<ul>
<li><a href="#2">概要</a></li>
<li><a href="#2">先生からのメッセージ</a></li>
<li><a href="#2">沿革</a></li>
<li><a href="#2">ビジョン</a></li>
</ul>
<!--プルダウンメニューここまで-->

</li>

<li><a href="#3">労働相談</a></li>

<!--プルダウンメニューここから-->
<ul>
<li><a href="#3">サービス01</a></li>
<li><a href="#3">サービス02</a></li>
<li><a href="#3">サービス03</a></li>
<li><a href="#3">サービス04</a></li>
</ul>
<!--プルダウンメニューここまで-->
</li>

<li><a href="#4">手続き代行</a></li>
<li><a href="#5">アクセス</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<!--ヘッダーメニューここまで-->

CSS
/* header ヘッダー
-----------------------------------------------------*/

#header {
height:110px;
color:#FFFFFF;
background-image:url(images/header_backsr_4.gif);
background-repeat:no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:900px;
}

#header_left {
float:left;
}

#header_left2 {
float:left;
font-size:30px;
line-height: 140%;
font-weight:bold;
margin: 30px 0px 0px 10px;
overflow: hidden;
display: inline;
}

#header_right {
font-size:10px;
float:right;
text-align:right;
margin: 87px 10px 0px 0px;
}

#header_right ul {
list-style:none;
display:block;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#header_right li {
float:left;
padding: 0px 0px 0px 30px;
/*background: url(images/header_li.gif) no-repeat 20px 0.7em;*/
background: url(images/header_li.gif) no-repeat left center;
}


#header_right li a, #header_right li a:link, #header_right li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#header_right li a:hover {
text-decoration:underline;
}

h1 {
font-size:10px;
font-weight:normal;
background:#660000;
color:#FFFFFF;
height:15px;
width:890px;
margin: 0px;
padding: 0px 0px 5px 10px;
}

/* menu メニュー
-----------------------------------------------------*/

#menu {
color:#000000;
font-weight:bold;
background:#BFBFBF;
background-image:url(images/menu_back.png);
height:38px;
font-size:12px;
}

#menu ul {
list-style:none;
display:block;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#menu ul ul{
display:none;
position:absolute;
background-image:none;
width:179px;
top:100%;
left:0;
}

#menu li.home {
list-style:none;
float:left;
text-align:center;
width:180px;
border-left:none;
background-image:url(images/menu_li_home.gif);
margin: 0px 0px 0px 0px;
}

#menu li {
list-style:none;
float:left;
text-align:center;
width:179px;
border-left:solid #999999 1px;
background-image:url(images/menu_li.gif);
margin: 0px 0px 0px 0px;
}

#menu a, #menu a:link, #menu a:visited {
color: #333333;
text-decoration: none;
padding: 10px 10px 10px 10px;
display:block;
}

#menu a:hover {
color: #333333;
padding: 10px 10px 10px 10px;
background:#ececec;
text-decoration: none;
}

#menu li li {
clear:both;
background-image:none;
background:#CCCCCC;
border-right:#999999 1px solid;
border-bottom:#999999 1px solid;
width:178px;
}

#menu li:hover {
position:relative;
}

#menu li:hover > ul {
display: block
}

* html #menu li {
behavior: expression(
this.onmouseover=new Function("this.className='column1'"),
this.onmouseout=new Function("this.className=''"),
this.style.behavior = 'none'
);
}

* html #menu li li {
behavior: expression(
this.onmouseover=new Function("this.className='column2'"),
this.onmouseout=new Function("this.className=''"),
this.style.behavior = 'none'
);
}

* html #menu li li li {
behavior: expression(
this.onmouseover=new Function("this.className='column3'"),
this.onmouseout=new Function("this.className=''"),
this.style.behavior = 'none'
);
}

#menu .column1 {position:relative;}
#menu .column1 ul {display:block;}
#menu .column1 * ul {display:none;}

#menu .column2 {position:relative;}
#menu .column2 ul {display:block;}
#menu .column2 * ul {display:none;}

#menu .column3 {position:relative;}
#menu .column3 ul {display:block;}
#menu .column3 * ul {display:none;}