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

前へ 次へ
このQ&Aのポイント
  • HP作成初心者の方が、Windows7とメモ帳を使用してHTMLを作成し、エクスプローラで確認した時には画像が表示されていました。しかし、サーバーにアップロードした後、HPの画像の一部が表示されない状態です。画像は30枚程度で、ロリポップのサーバーにalphaEditでアップロードしました。HTMLは文字化けせず、サーバー上でも画像は正常に確認できます。ファイル名や記述名に間違いはなく、同じJPGの画像でも表示されるものとされないものがあります。また、PNGの画像は一枚も表示されません。画像ファイルの再アップロードも試しましたが、解決しませんでした。自身で記述したHTMLではなく、フリー素材を利用しています。
  • 画像が表示されない問題について、HP作成初心者の方が質問しています。Windows7とメモ帳を使用してHTMLを作成し、エクスプローラで画像が表示されていたのですが、サーバーにアップロードした後、HPの画像の一部が表示されない状態です。画像は30枚程度で、ロリポップのサーバーにalphaEditでアップロードしました。HTMLは文字化けせず、サーバー上でも画像は正常に確認できます。ファイル名や記述名に間違いはなく、同じJPGの画像でも表示されるものとされないものがあります。また、PNGの画像は一枚も表示されません。画像ファイルの再アップロードも試しましたが、解決しませんでした。フリー素材を使用しているため、自身で記述ミスを見つけるのが難しい状況です。
  • HP作成初心者の方が質問しています。Windows7とメモ帳を使用してHTMLを作成し、エクスプローラで画像は正常に表示されていましたが、サーバーにアップロードした後、HPの画像の一部が表示されなくなっています。画像は30枚程度で、ロリポップのサーバーにalphaEditでアップロードしました。HTMLは文字化けしておらず、サーバー上でも画像は確認できます。ファイル名や記述名に間違いはありません。同じJPG画像でも表示されるものとされないものがあり、PNGの画像は一枚も表示されません。画像ファイルの再アップロードも試しましたが、解決しませんでした。フリー素材を利用しているため、自身で記述のミスを見つけるのが難しいです。解決策をお教えください。
回答を見る
  • ベストアンサー

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

ＨＰ作成初心者です。 windows7、メモ帳でHTMLを作成し エクスプローラで確認した時点では画像はすべて見られます。 サーバーにアップロード後 HPの画像のほとんどが表示されない状態です。 全12ページ、画像は30枚程度ですが 全部が見られないわけではなく、数枚は見られます。 サーバーはロリポップで、フォルダごとアップロードはできないため alphaEditでフォルダごとアップロードしました。 ・アップロード後にhtmlは文字化けしていない ・サーバー上で画像はすべて正常に確認できる ・大文字、小文字を含めたファイル名と記述名に間違いはない ・画像はすべて同一ファイルにある ・同じJPG、同じような名前の画像でも表示されるものと、されないものがある ・ＰＮＧの画像は一枚も表示されない ・画像ファイルのみ、htmlファイルをそれぞれ再アップロードしても同じ というところまで確認できたのですが あとはhtmlの記述ミスを探すしかないのでしょうか。 数枚ではありますが、表示されている画像もあるので フォルダの指定間違いではないとは思います。 htmlは自分ですべて記述したものではなく フリーの素材を使い、画像を挿入したり内容を記入したりしたため これ以上記述のミスを探すのも難しい状態です。 他になにか解決の糸口はありますでしょうか。 お知恵を貸してください！

  • ya333
  • お礼率100% (15/15)

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

  • ベストアンサー
  • toraccha
  • ベストアンサー率52% (50/96)
回答No.5

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

ya333
質問者

お礼

2度目のご回答ありがとうございます！ 無事解決しました！ Ｘ印から右クリックでプロパティを表示させる方法を試した結果、 最初がhttp://で間違いはなく、画像の名前も間違いはなかったのですが 画像名の後ろに「％20」という文字化けが入っており 次の文の　id　=　まで含まれたURLになっていました。 表示されない画像にはimg src= の後に、 表示される画像にはついていない　id　=　という文がくっついていたことに気づきました。 フリー素材のHPの、画像だけ差替えのつもりだったので 画像フォルダ名／ファイル名だけ変更し id = の部分は意味もわからないので触らないようにしていたのですが （タグの解説を読んでもいまいち理解できず、未だにわかりません）よく見ると <img src = "画像名.jpg id = id名"> という書き方になっていたので、 <img src = "画像名.jpg" id = "id名">　に変更したら 無事画像が表示されるようになりました。 基本的な書き方がまったく分かっていなかった為のミスでした。 不勉強すぎて申し訳ありません・・・ お騒がせしましたが、丁寧にご回答いただきとても勉強になりました。 ありがとうございます。

その他の回答 (5)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

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 )を調べてみる。要素やプロパティも索引があるので調べやすいです。 　結局この方法が一番早く身につけられるでしょう。

ya333
質問者

お礼

2度目のご回答ありがとうございます！ 無事解決しました！ 他の方のお礼欄でも書かせていただいたのですが、 <img src = "画像名.jpg id = id名">　となっていたので アドバイスをいただいた、 alt="[なんたらかんたらの画像]"　を .jpg の後ろに挿入してみたのですが ＩＥではＸ印のとなりに[なんたらかんたらの画像]と表示されるようになり firefoxでは相変わらずＸ印も[なんたらかんたらの画像」の表示もでない状態でした。 これ以上どうしようと悩んでしまったのですが、一日頭を冷やしてみたら "　と　"　で画像名を括ってない！　というところにやっと気づきました。 "　と　"　はあまり意識しておらず ご指摘の　alt=　の文ももちろん"　"を付けずに書いてしまいました。 初歩的なミスで大変お騒がせしました。 基本からやり直してきます！ 教えていただいた「はじめてのWEBドキュメントづくり」が良さそうだったので少しずつ読み始めています。 丁寧なご回答ありがとうございました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

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を目前にした今では、必須です。

ya333
質問者

お礼

ご回答ありがとうございます。 文法チェックのサイトも、firefoxのアドオンも初めて知りました。 試してみたのですが、減点９がたくさんあり 初心者にはエラーの意味さえわからないという状態です。 文法がめちゃくちゃだと、ＳＥＯ対策的に問題があるらしい、と思うのですが 初心者としては、多少変でも、とりあえずはＨＰが存在していればよし （たとえ画像が表示されなくても...）と割り切って 勉強がてら気長に修正しようと思います。 画像のalt属性の件は、やはり勉強不足で知りませんでした。 画像が多いので全部のページでは試していないのですが 画像が表示されない不具合はあいかわらずです。 ORUKA1951さんのアドバイスは、専門的で非常に難しかったのですが これから勉強していく上での良い手がかりとなりました。ありがとうございます。

  • toraccha
  • ベストアンサー率52% (50/96)
回答No.3

解決の手がかりとして ・ブラウザのキャッシュを消して再度試みる。 ・別なブラウザを使ってどうなるかを見る。 ・表示されない画像のURLを直接入力してどうなるかを確認する。 このあたりはすでに試されたでしょうか？

ya333
質問者

お礼

ご回答ありがとうございます。 ・ブラウザのキャッシュを消してみましたが、変化なしでした。 ・別なブラウザは、普段から使用しているのIE9以外使ったことがなかったので 　アドバイスを受けて、取り急ぎfirefoxをダウンロードして確認しました。 　やはり画像は表示されないので、htmlの内容に問題がありそうです。 ・URLを直接入力する方法が分からなかったので、こちらはまだ試していません。 　少し時間がかかりそうですが、調べてやってみます。　 別なブラウザで見るなど、必ずやるべきことのようですね。 完成を急ぐあまり基本を無視しすぎて失敗しているような気がします。 もう少し勉強をがんばります。　　 　

回答No.2

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

ya333
質問者

お礼

ご回答ありがとうございます。 ファイル名の大文字小文字はあまり意識していませんでした。 特に拡張子は普段表示させていなかったので表示させる設定に変更してみました。 その結果、画像ファイルの中で数点、拡張子が大文字のものがありましたので Htmlに書いたファイル名も点検したのですが 書くときには大文字ファイル名は大文字で書いていて、大きなミスはなさそうです。 ※ファイル名を確認するときには画像のプロパティを開いて確認するという 　まわりくどい確認方法をしていたためです。 　初心者すぎて、拡張子を表示させたほうが便利だとは思い付かなかったのです。 ただ、紛らわしいのですべて小文字に統一して今後のミスを防ぐようにします。 ありがとうございます。

  • dragon-man
  • ベストアンサー率19% (2700/13647)
回答No.1

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

ya333
質問者

お礼

ご回答ありがとうございます。 alphaEditはＨＰ編集のフリーソフトです。 転送機能も付属しているので使っていましたが ミラーリングアップロードというのができているかよくわかりません。 探してみたら、FFFTPは定番のソフトのようですね。早速ダウンロードしてみました。 HTMLの記述間違いなど、内容の再確認をした後にこれを使ってみる予定です。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • HPの画像が表示されない

    alphaEDITでホームページで作成して ffftpでアップロードしています。 トップからリンクを貼り リンク1は全ての画像が表示されるのですが リンク2は全て×がついてしまい、表示されません。 一応ファイル名や、画像の保存場所を確認してみたのですが リンク2の方は表示されません。（全て同じフォルダにありました） 最初はファイル名が半角じゃないのが原因だと思ったのですが リンク1は全角ですが表示されていました。 リンク2は半角にしてもだめでした。 alphaEDITでプレビューにすると画像は表示されるのですが 何が問題なのでしょうか？ ご教授よろしくお願いいたします

  • アップロードしたら画像が表示されない

    Dreamweaver4でHPを作ってアップロードしたのですが画像が表示されません。 リンクミスかと思ってソースを見てみると<img～>のタグがきれいさっぱり消えていて、 Dreamweaverで確認するときちんと記述されてました。 4年ぐらいDreamweaverを使ってるのですがこんなことが初めてで困ってます。 一応Dreamweaverのアップロード時のミスかな？と思ってFFFTPを使ってやってみたのですが結果は同じでした。 アップロードする量が多いかなと思って1個ずつ試しましたけどこれも結果は同じでした。

  • ＨＰ開設について（今日で３日目・・・・）

    教えて下さい。 今、ＦＣ２の無料ホームページで必要なアドレスやパスワードをもらいました。 alphaEDITで作成してＦＴＰアップロードをしているんですが、 ブラウザでアドレスを入力したらなんとか表示されるのですが、 画像が表示されません。 alphaEDITで作成したのは、３つあります。 ひとつに残り２つをリンクさせるために作成しました。 外部ブラウザを押して確認するとちゃんとリンク先にも表示され、 ちゃんと画像も入ります。 この画像も別々のファイルを作成して各フォルダ別にいれて アップロードをしています。 （１）alphaEDITで３つ作成 （２）この３つを各alphaEDITにリンクさせた （３）全部画像も別々のフォルダを作成した （４）ＦＴＰアップロードをした （５）ファイルを右側に転送できた （６）ブラウザにアドレスを入力 （７）表示されたが、画像が表示されない、リンク先にも転送されない （８）お手上げです。 説明不足で申し訳ございません。今回初めてなんで わかりません。 誰か詳しい方教えて下さい。いろいろなサイトを見て そのとおりにしているはずなんですが、 今日で３日目・・・できないんです。 ノイローゼになりそうです。 宜しくお願いします。

  • HPをアップロードする際に

    PC・HP作成初心者なんですが、ビルダーでHPを簡単に作ってみたんですが、自分のHPアドレスをひょうじさせても写りませんでした そこで、質問板で聞いてみたんですが 【弊社より、質問者様のホームページを確認させて頂きました。 恐れ入りますが現状では、「“index.html というディレクトリ（フォルダ）”と、その他のファイル」がアップロードされておりましたが、 そのディレクトリ内も含めサーバー上には、htmlファイルが存在しないように見受けられます。 "htmlファイル”を作成して頂き、アップロードして頂ければと存じます。】 自分の理解力が乏しいせいか、いまいちよくわかりませんでした。 つまり、htmlファイルを作ってアップロードしろという事ですか？ 回答があり次第この質問は下げるのでなるべく早期回答お願いします。

  • アップロードした画像の表示について

    アップロードした画像の表示について アップロードした画像を、サーバーに保存する前(move_uploaded_fileする前)に確認のため 表示させ、その後保存したいのですが可能ですか？

    • ベストアンサー
    • PHP
  • HPのアップロード

    2ページのHPをHPビルダーで作りました。 ロリポップのレンタルサーバーを借り、1ページ目までのアップロードは なんとか成功しました。 画像などのアップロードもしっかりできています。 しかし、2ページ目のリンクがうまく表示されていません。 ネット上ではなく、オフラインのPC上で操作してみると、リンクは しっかりできており、移動もするので設定ミスはないと思います。 画像とcssファイルとhtml(2ページ分)は、同じフォルダに入っている状態です。 どうすれば、うまくアップロードできるでしょうか？ ロリポップからドメインを貰い、仮「http://www.kkkkk」に1ページ目を アップしました。2ページ目のアドレスはアップロードする事で勝手に獲得 できるのでしょうか？2ページ目のファイル名が「ppp」だった場合に 「http://www.kkkkk.ppp」になるのでしょうか？ １日中、試行錯誤してみましたが、よく理解できませんでした。 解決方法を知っている方がいましたら、解答をよろしくお願いします

  • JPEG画像が表示されません

    知人に頼まれ見よう見まねで初めてホームページを作成してみました。 無料のテンプレートを利用、alphaEDITで編集したのですが、完成したHTMLファイルをいざFTP転送するとJPEG画像が表示されません。 alphaEDITのプレビュー画面やHTMLファイルを直接ブラウザーで確認すると画像は全て表示されるのですが、FC2のサーバーにアップロードすると表示されなくなってしまうのです。 いろいろググってみて試行錯誤したのですが、ファイル名の間違いやアップロード先の間違い、転送モードの間違いも無く、タグ自体が間違っているのでは？という結論に達したのですがいかがでしょうか？（ならば何故、alphaEDITやブラウザーではきちんと表示されるのかは不明ですが．．．） 以下のタグをご覧頂き、間違いをご指摘いただければ幸いです。 <img class="head_photo" border="0" alt="" src="img/head_img.jpg" > <img border="0" alt="" src="img/top_banner.jpg" > <img class="picture" border="0" alt="写真" src="img/mama.jpg" > <img class="head_photo" border="0" alt="" src="img/head_img_slim.jpg" >

  • HPに表示される画像と，表示されない画像があります。どぉすれば？

    質問）「HPに表示される画像（icon）と，表示されない画像(icon)があります。全て表示するようにするにはどぉすればいいですか？」 [使っているもの] ・Yahoo!ジオシティーズ（アップロードはファイルマネージャー） ・FrontPage Express使用 [現在状況] ・表示されないもの７点（数多くあるなかのこの７つだけが×） ・バナー画像一点，動くicon一点以外のiconは全てハイパーリンクをしています （私はこのせいだとおもったんですが，他の画像でハイパーリンクもできていて画像も表示されたものがあったので・・・） ・現在表示されない画像は→赤い×印で表示されています ・画像は表示されないが，ハイパーリンクはできていて次のページには飛べる ・いずれもgifがついている（これも気になって自分のHPのほかの画像を調べてみましたが，他のものもすべてgifで表示されていました）　　　　　　 ・一応ファイルマネージャーで表示されない画像を再アップロードしてみましたが同じ結果でした ・すべて小文字（確認済み） 説明が下手で本当にごめんなさい； この説明で原因が分かった方がいらっしゃいましたらお返事ください。　　　　　　

  • HPビルダーでFC2にアップロードした画像について

    たくさんググりましたが分からないので質問させてください。 HPビルダー7でFC2にサイトをアップロードしたんですが、 画像が×となって表示されません。 サイト内のhtmlファイルのリンクは大丈夫です。 FC2のファイルマネージャーを見ると、 Rootディレクトリには複数のhtmlファイルしかありません。 もちろんindex.htmlファイルはあります。 アップロードは、 HPビルダー7のサイト転送（転送先フォルダは空白です）で行いました。 HPビルダー7のサイト素材ビューのフォルダのところでは、 ▷サイト名　 　▷トップフォルダ（abc.htmlファイル、def.htmlファイル、２枚の画像ファイル）　　　 　　▷abc.htmlファイルの素材（画像）フォルダ（ここには画像ファイルのみ） 　　▷def.htmlファイルの素材（画像）フォルダ（ここには画像ファイルのみ） となっています。 最初のサイト作成、ローカルフォルダ設定のところがまずかったんでしょうか？ それとも各ファイル（abc.htmlなど）ごとにそれぞれ画像フォルダを つくったのがまずいのか… どうぞアドバイスをよろしくお願いします。

  • アップロードしたのに表示されません。

    FC2やSitemixといったサーバにFlashや画像を含んだWebサイトをアップロードしたのに、ブラウザで確認するとそれらが表示できなくなってしまいます。 PC上ではすべて正常に表示（リンク）されているのですがどのようにすれば問題を解決できるのでしょうか？ ※必要なファイルは全てアップロードしてあり、画像ファイルの場所も変えていません。 教えてください。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する