アップロード後にHPの画像が表示されない

質問

ＨＰ作成初心者です。

windows7、メモ帳でHTMLを作成し
エクスプローラで確認した時点では画像はすべて見られます。

サーバーにアップロード後
HPの画像のほとんどが表示されない状態です。
全12ページ、画像は30枚程度ですが
全部が見られないわけではなく、数枚は見られます。

サーバーはロリポップで、フォルダごとアップロードはできないため
alphaEditでフォルダごとアップロードしました。

・アップロード後にhtmlは文字化けしていない
・サーバー上で画像はすべて正常に確認できる
・大文字、小文字を含めたファイル名と記述名に間違いはない
・画像はすべて同一ファイルにある
・同じJPG、同じような名前の画像でも表示されるものと、されないものがある
・ＰＮＧの画像は一枚も表示されない
・画像ファイルのみ、htmlファイルをそれぞれ再アップロードしても同じ

というところまで確認できたのですが
あとはhtmlの記述ミスを探すしかないのでしょうか。

数枚ではありますが、表示されている画像もあるので
フォルダの指定間違いではないとは思います。

htmlは自分ですべて記述したものではなく
フリーの素材を使い、画像を挿入したり内容を記入したりしたため
これ以上記述のミスを探すのも難しい状態です。

他になにか解決の糸口はありますでしょうか。
お知恵を貸してください！

回答No.5

toraccha · ベストアンサー

No,3です。

最初の2項目で解決しないということは。画像ファイルが，期待通りの場所に存在していない可能性が大きいですね。

>・URLを直接入力する方法が分からなかったので、こちらはまだ試していません。
そうですか。では次の点を確認してみましょう。
IEだと，図が表示されるべき位置に×印のようなものが表示されていることと思います。
その上で右ボタンをクリックして，プロパティを表示させてみて下さい。
これで表示される「アドレス(URL)」が，想定通りのアドレスになっているでしょうか。
a)最初が http:// ではじまっているか。(例えば file://　ではない)
b)画像の名前が，パスを含めて想定通りに表示されているか。
　(大文字/小文字，全角/半角など要注意)

お礼

2度目のご回答ありがとうございます！
無事解決しました！

Ｘ印から右クリックでプロパティを表示させる方法を試した結果、
最初がhttp://で間違いはなく、画像の名前も間違いはなかったのですが
画像名の後ろに「％20」という文字化けが入っており
次の文の　id　=　まで含まれたURLになっていました。

表示されない画像にはimg src= の後に、
表示される画像にはついていない　id　=　という文がくっついていたことに気づきました。

フリー素材のHPの、画像だけ差替えのつもりだったので
画像フォルダ名／ファイル名だけ変更し
id = の部分は意味もわからないので触らないようにしていたのですが
（タグの解説を読んでもいまいち理解できず、未だにわかりません）よく見ると

<img src = "画像名.jpg id = id名"> という書き方になっていたので、

<img src = "画像名.jpg" id = "id名">　に変更したら

無事画像が表示されるようになりました。

基本的な書き方がまったく分かっていなかった為のミスでした。
不勉強すぎて申し訳ありません・・・
お騒がせしましたが、丁寧にご回答いただきとても勉強になりました。
ありがとうございます。

回答No.6

ORUKA1951

No.4です。
　ちょっと難しかったかも・・申し訳ありません。

　とりあえず画像が表示されないページの画像だけでもaltを付けて見ましょう。
alt="[なんたらかんたらの画像]"
　とか、そしてページを表示するとHTMLさえ形になっていたら、画像が本来あるべきところに[なんたらかんたらの画像]と出てくるので、それを右クリックしてメニューから画像だけを表示にしてみてください。
・画像がないと表示されれば
　アップロードした場所が異なる。
　パスに日本語が含まれている。
　パス指定が間違っている。
　大文字小文字が間違っている。
　　★windowsでは大文字小文字を区別しませんが、他のOSは区別します。画像はすべて小文字でとか［hogehoge.jpg]、単語の先頭は大文字[hogeHoge.jpg]とか決めておくと良いでしょう。

　なお、簡単なHTMLからはじめたほうが結局早道です。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
　などを最初から復習してHTMLを書き、Anothe HTML lintでチェックして、指摘されたエラーを修正する。--Another HTML lintは、その説明がとても充実しているので、とても良い勉強になります。
　それを繰り返していくと自然に覚えてしまいます。
　わからないときは仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html )を調べてみる。要素やプロパティも索引があるので調べやすいです。

　結局この方法が一番早く身につけられるでしょう。

お礼

2度目のご回答ありがとうございます！
無事解決しました！

他の方のお礼欄でも書かせていただいたのですが、

<img src = "画像名.jpg id = id名">　となっていたので

アドバイスをいただいた、 alt="[なんたらかんたらの画像]"　を
.jpg の後ろに挿入してみたのですが
ＩＥではＸ印のとなりに[なんたらかんたらの画像]と表示されるようになり
firefoxでは相変わらずＸ印も[なんたらかんたらの画像」の表示もでない状態でした。

これ以上どうしようと悩んでしまったのですが、一日頭を冷やしてみたら

"　と　"　で画像名を括ってない！　というところにやっと気づきました。

"　と　"　はあまり意識しておらず
ご指摘の　alt=　の文ももちろん"　"を付けずに書いてしまいました。

初歩的なミスで大変お騒がせしました。

基本からやり直してきます！
教えていただいた「はじめてのWEBドキュメントづくり」が良さそうだったので少しずつ読み始めています。

丁寧なご回答ありがとうございました。

回答No.4

ORUKA1951

HTMLの文法チェックをしてください。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　減点数が０でないものを減点数の大きなものから指示に従って修正

　ウェブ開発にはfirefoxが便利でしょう。開発者向けアドオン( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )がたくさんあります。
・Firebug
・Html Validator
は最低でも・・

★必ず画像にはalt属性の値を書きましょう。具体的に画像が表示されなくてもその画像の変りに表示するテキストです。--どの画像が表示されないかわかります。
　その画像を右クリックして「画像を表示」すれば、その画像だけが開けるはずです。再読み込みをすれば、たとえキャッシュの問題でもそれは書き換えられるはずです。

※HTMLは、strictで作成しましょう。
HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )
　HTML4.01の仕様が勧告になった1999年当時なら兎も角、HTML5を目前にした今では、必須です。

お礼

ご回答ありがとうございます。

文法チェックのサイトも、firefoxのアドオンも初めて知りました。
試してみたのですが、減点９がたくさんあり
初心者にはエラーの意味さえわからないという状態です。

文法がめちゃくちゃだと、ＳＥＯ対策的に問題があるらしい、と思うのですが
初心者としては、多少変でも、とりあえずはＨＰが存在していればよし
（たとえ画像が表示されなくても...）と割り切って
勉強がてら気長に修正しようと思います。

画像のalt属性の件は、やはり勉強不足で知りませんでした。
画像が多いので全部のページでは試していないのですが
画像が表示されない不具合はあいかわらずです。

ORUKA1951さんのアドバイスは、専門的で非常に難しかったのですが
これから勉強していく上での良い手がかりとなりました。ありがとうございます。

回答No.3

toraccha

解決の手がかりとして

・ブラウザのキャッシュを消して再度試みる。
・別なブラウザを使ってどうなるかを見る。
・表示されない画像のURLを直接入力してどうなるかを確認する。

このあたりはすでに試されたでしょうか？

お礼

ご回答ありがとうございます。

・ブラウザのキャッシュを消してみましたが、変化なしでした。

・別なブラウザは、普段から使用しているのIE9以外使ったことがなかったので
　アドバイスを受けて、取り急ぎfirefoxをダウンロードして確認しました。

　やはり画像は表示されないので、htmlの内容に問題がありそうです。

・URLを直接入力する方法が分からなかったので、こちらはまだ試していません。
　少し時間がかかりそうですが、調べてやってみます。　

別なブラウザで見るなど、必ずやるべきことのようですね。
完成を急ぐあまり基本を無視しすぎて失敗しているような気がします。
もう少し勉強をがんばります。

回答No.2

Calm Trip（@CalmTrip）

殆どの場合、Html に書かれている ファイル名＜拡張子を含め＞と、実際のファイル名とが、異なる事が原因です、
　pc上＜Windows＞では、　ABC.JPG、　Abc.Jpg、　abc.JPG、abc.jpg 全て 同じ ファイルと見做され、1つしか存在できませんが、Server＜Unix＞へ送ると、全て異なるものと見做され、別のものとして存在します。
※ Html 作成ては、ファイル名は全て小文字＜拡張子も＞で書く習慣をつけられる事です。

お礼

ご回答ありがとうございます。

ファイル名の大文字小文字はあまり意識していませんでした。
特に拡張子は普段表示させていなかったので表示させる設定に変更してみました。

その結果、画像ファイルの中で数点、拡張子が大文字のものがありましたので
Htmlに書いたファイル名も点検したのですが
書くときには大文字ファイル名は大文字で書いていて、大きなミスはなさそうです。

※ファイル名を確認するときには画像のプロパティを開いて確認するという
　まわりくどい確認方法をしていたためです。
　初心者すぎて、拡張子を表示させたほうが便利だとは思い付かなかったのです。

ただ、紛らわしいのですべて小文字に統一して今後のミスを防ぐようにします。
ありがとうございます。

回答No.1

dragon-man

index.htmlをブラウザでローカル表示すれば正しく表示されるのですか？
そうだとするとｈｔｍｌの記述ミスではなく、アップロードがどこかで間違っているのです。
alphaEditのことはよく知りませんが、「フォルダごとアップロードしました。」とありますが、部分ごとにアップロードするのは間違いを犯しやすいですね。うっかり間違いを防ぐには、ローカルのホームページ記述を丸ごとミラーリングアップロードすべきです。私が使っているFFFTPでしたらそう言うことが可能です。

お礼

ご回答ありがとうございます。

alphaEditはＨＰ編集のフリーソフトです。
転送機能も付属しているので使っていましたが
ミラーリングアップロードというのができているかよくわかりません。

探してみたら、FFFTPは定番のソフトのようですね。早速ダウンロードしてみました。
HTMLの記述間違いなど、内容の再確認をした後にこれを使ってみる予定です。