ホムペ作成中。画像をアップしても表示されない。。。

質問

初めてのホームページを作成しています。

ワードアートで作ったロゴ（gif）をアップしたのですが、×印になってしまいちゃんと表示されません。全ての画像が表示されないのではないので原因が分からず困っています。

ちなみに、メモ帳を使ってhtmlで作成しているのですが、作っている段階ではちゃんと表示されるのに、アップしたものをネット上で見ると×になるのです。

どなたか分かる方がいれば教えていただけないでしょうか。よろしくお願いします。

回答No.7

Muller3 · ベストアンサー

No.4です。
HTMLに絶対URLを使って表示されるのなら、そのまま絶対URLで表示しても特に問題はないと思います（例えばブログでは、TOPページの階層と、カテゴリページや個々の記事ページの階層が違うことが多いので、画像に絶対URLを使うことが多いです）
ただその場合、ローカルでHTMLを作る際あらかじめ画像をアップしておかないと、画像が入った状態を確認することができませんが。

どうしても相対パスを使いたいなら、以下一応確認ですが、
デスクトップ上で作成している時とサーバーにアップされた時の階層構造（フォルダ・ファイルの構成）は同じになっていますか？この構造が同じでないと、デスクトップ上で表示されたのにブラウザでは×印になってしまう（パスが切れてしまう）ことが起こります。

あとはレアですが、HTMLのパスの中、もしくは画像のファイル名に余計な半角スペースが入りこんでいて表示されない、ということもあります。
（超基本的なことですが、ファイル名には半角英数を使ってますよね）

お礼

こんばんわ、確認したところサーバーにアップされたときの階層構造が変わっていました！それでちゃんと表示される画像が増えました！・・・が、やっぱりワードアートで作ったロゴだけが表示されないのです。原因は他にあるのでしょうか。。。

回答No.6

tomisuke99

もしかして画像を直リンクされていませんか？
きちんと自分のパソコンに取り込んで画像をupしているのではなくもともとの素材ページからURLを指定して画像表示する方法です。

1.通常ならば使用する素材の上にカーソルを置いて右クリック→素材を保存するために、コンテキストメニューにある「名前を付けて画像を保存(S)」を選択し、マイドキュメントなどに保存をしてそれから自分のhpスペースにupすることになると思います。

2.ところが直リンクの場合は違います。
<img src="コピーした画像のアドレス">
画像を表示させるタグの「コピーした画像のアドレスという部分」に、先ほどコピーした素材の画像アドレスを貼り付けます。
（つまり素材屋さんが表示してあるほかの人のhpアドレス）

たとえばhttp://www.×××.comというhpで配布している○○.gifという素材が気に入ったとして。

例 : <img rc="http://www.×××.com/img/○○.gif">
もしくは、画像アドレスを入れる箇所（下のようなテキストボックス）にコピーした画像アドレスを貼り付けられてはいないでしょうか。

もしこういったアドレスで指定されているとすると相手先のhp上で画像が消えてしまうと当然こちらでの画像も消えてしまいます。
相手のhpの画像に直リンクしているからです。
きちんと自分のパソコンに画像は入っていますか？そしてそれをきちんとupされていますか？
もう一度確認されてみてください。

私の拙い説明では説明しきれないので直リンクあたりで検索してみると分かりやすい支援サイト様がたくさんヒットするかと思います。
一度チェックしてみてください。

お礼

こんにちは、考え得る可能性をいろいろ考えていただきありがとうございます。直リンクということはありません。自分のHPスペースに保存してやっているのですが。。

回答No.5

k4y1a8m0

経験上、もしかすると例えば「gif」ではなく「GIF」
または、「jpg」ではなく「JPEG」かも知れませんね～

一度チェックしてみてください♪

お礼

拡張子は問題ないようでした。ありがとうございます。

回答No.4

Muller3

＞作っている段階ではちゃんと表示される
デスクトップ上のHTMLファイルをブラウザで開いて確認している、ということですよね？
画像パスの指定が間違っているか、該当の画像をアップしていないか、どちらかのような。

私なら以下のような感じで原因を探ります。
まず、ブラウザで、サーバー上の画像に直接アクセスできるかどうか確認してみます。
http://サイトのURL/画像が入っているディレクトリ名（なければ省略）/ファイル名.gif
この絶対URLにアクセスして画像だけがブラウザに表示されれば、画像はちゃんとアップロードされていることになります。（表示されなかったら、ちゃんとアップしたか、それとも意図と違う場所に入ってないか確認）

次に、imgタグに入れている画像の相対パスを、絶対URLに置き換えてみます。
<img src="http://サイトのURL/画像を入れたディレクトリ名（なければ省略）/ファイル名.gif" width="**" height="**" ・・・・・>みたいな感じ
これで表示されれば、最初のパスの指定が間違っていたということになるかと。

お礼

ありがとうございます。二つのチェック、両方試してみました。どちらの場合もちゃんと表示された・・・ということは、パスの指定が間違っていたということ？ですかね。何が違うのか。。。

回答No.3

tomisuke99

ちなみにどんな画像が表示されて、どんな画像が表示されないかを書いていただけるとより原因が分かりやすくなると思います。

例
背景画像は大丈夫ボタン類の画像も大丈夫とか

自分で作ったワードアートのみ駄目なのですか？

ワードアートでなく簡単なボタン類ならば支援サイトで簡単に作れるものもありますが、どういう画像が駄目なのかどういう画像がｕｐできているのかそれが分かれば、より他の方々からもアドバイスを受けやすいのでは？

お礼

ありがとうございます。背景画像は大丈夫です。ワードアートのほかに、auto logoという支援サイトで作ったタイトルロゴとミニバナーがあるのですが、タイトルロゴは駄目でミニバナーは大丈夫のようです。あと、携帯で撮った写真をjpegに変換したものが以前はちゃんと表示されていたのにいつの間にか表示されなくなってしまっています。。どうでしょうか。。。

回答No.2

tomisuke99

私もあまり詳しくはないのですがメモ帳を使ってhtmlで作成しているのは同じなのでお力になれれば。
タグで画像を貼り付けてあるのですよね？

たとえば
<IMG SRC="img/○○○.gif">
としましょう。
1.画像のほうはアップデートしてありますか？画像も同じくアップしていないと自分のパソコン内で表示はされてもネット上にはアップされないと思います。

2.画像の拡張子(gifとかjpgとか）はあっていますか。
もう一度見直してみてください。画像自身をupしている拡張子とhtmlに書き込んだ拡張子が違う場合もあります。

3.<IMG SRC="img/○○○.gif">
このimgというのはちなみにupした画像のファイル名です。
つまりimgというファイルの中に○○○.gifという画像がないときちんと表示されないと思います。

前に私も同じ間違いをしていたので参考になればと思います。
頑張ってください。

お礼

１～３のどれも問題がないようでした。丁寧な助言をありがとうございます。

回答No.1

reni0920

サイズが大きすぎるとかそういうことはないですかね？

お礼

それはないかと思います。ありがとうございます。