HOME

楽しい消防団

自転車に乗ろう

私がせんむ

パソコンレスキュー隊

せんむのQ&A

PC改造部屋

宮中囃子連

掲示板

リンク集

パソコン レスキュー隊

ホームページの初歩の初歩

PCレスキュー隊目次

HPの初歩の初歩目次 

 

 画像がでないトラブル
 
HTMLファイルと画像ファイルの位置関係

画像がでないトラブル

1.HTMLファイルと画像ファイルが同じ位置関係にある場合のトラブル

2.画像ファイルがimagesフォルダに入れてある場合のトラブル

3.HTMLファイル、画像ファイルとも別のフォルダに入れてある場合のトラブル

4 .HTMLファイル、画像ファイルがまったく別のサイトにある場合のトラブル

  

 画像がでないトラブル

 
 「HPを見る」ということは「ブラウザがHTMLを読みこんでいる」ということです。HTMLファイルには画像が糊付けされているわけではありません。HTMLファイルに書かれたタグの命令に沿って、別にある画像ファイルを読み込んで表示しているだけです。タグには画像のファイル名と保存されている場所(URL)が書かれています。

 そのため、HTMLファイルと画像ファイルの保存場所の関係が重要になってきます。

 HP作成ソフトを使って画像を貼り付けると、自動的にタグを作成してくれますが、たまにソフトがまちがうこともあるようです。その場合、たいがいタグが下のようになっています。

<IMG SRC="C:MyDocument¥○○gif">

 これだと、画像ファイルを自分のPCのCドライブのMyDocumentの中の○○gifと指定しているため、自分のPCでは普通に見えます。そのため気が付きにくいのですが、このままこのHTMLファイルをアップロードすると、そのHPを見にきた人のブラウザは「Cドライブの中のMyDocumentの中の○○gif」を表示しろ、という意味に解釈してしまいます。しかし、その人のPCには○○gifファイルはありませんので、画像の部分が×印になってしまいます。このようなときはHTMLソースを開いて手動で直接HTMLを編集したほうが早い場合もあります。
 このようなエラーは、HP作成ソフトを使っていてインターネットからダウンロードした画像やアイコンをHPに貼り付ける場合が多いようです。

失敗を防ぐには・・・・・・・
まず最初に、必要な画像ファイルを、すでに使っている画像ファイルを保存してある場所(フォルダ)に保存(コピーまたは移動)してから、その画像の貼り付けを行うようにすると、いいようです。

修正したHTMLファイルを上書き保存し、画像ファイルといっしょに再度アップロードしましょう。

修正前の例 <IMG SRC="C:MyDocument¥○○gif">

修正後の例 <IMG SRC="○○gif"> <IMG SRC="images/○○gif">など


 HTMLファイルと画像ファイルの位置関係を次に説明します。PCの中のHPデータの保存場所を「私のHP」フォルダ、サーバでのHPファイルの保存場所(ディレクトリ)を「iamsenmu」とします。

TOP

  

1.HTMLファイルと画像ファイルが同じ位置関係にある場合

 
「index.html」で画像を表示するタグは下のようにファイル名だけでOKです。

<IMG SRC="gazou.gif">

 

HDDの中  「私のHP」フォルダ

index.html

gazou.gif

syashin.jpg

 

これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードすると下のような位置関係になります。「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じです。アップロードする場合は原則的にこのようにする必要があります。

サーバの中 「iamsenmu」ディレクトリ

index.html

gazou.gif

syashin.jpg

 

TOP

 

2.画像ファイルがimagesフォルダに入れてある場合

 
「index.html」で画像を表示するタグは下のように
「フォルダ名」+「/(スラッシュ)」+ファイル名を書く必要があります。

<IMG SRC="images/gazou.gif">

「index.html」と「imagesフォルダ」が同じ位置関係(階層)になっています。

HDDの中 「私のHP」フォルダ

index.html

imagesフォルダ

gazou.gif

syashin.jpg

 

これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードすると下のような位置関係になります。「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じ、「index.html」と「imagesフォルダ」が同じ位置関係(階層)です。アップロードする場合は原則的にこのようにする必要があります。

サーバの中 「iamsenmu」ディレクトリ

index.html

imagesフォルダ

gazou.gif

syashin.jpg

 

TOP

 

3.HTMLファイル、画像ファイルとも別のフォルダに入れてある場合

 
HTMLファイルは
pcsyohoフォルダ、画像フォルダはimagesフォルダに入れてある状態で「index.html」で画像を表示するタグは下のように
「../」+「フォルダ名」+「/」+ファイル名と書く必要があります。
「../」は「ひとつ上の階層(この例の場合は私のHPフォルダ)」と言う意味です。
<IMG SRC="../images/gazou.gif">

ひとつ上の階層(私のHPフォルダ)から見ると、「pcsyohoフォルダ」と「imagesフォルダ」が同じ位置関係(階層)になっています。
 

HDDの中 「私のHP」フォルダ

pcsyohoフォルダ

index.html

imagesフォルダ

gazou.gif

syashin.jpg


これをサーバでのHPファイルの保存場所の「iamsenmu」ディレクトリにアップロードするときは「私のHP」フォルダが「iamsenmu」ディレクトリになっただけで、中身はまったく同じになるように「pcsyohoフォルダ」と「imagesフォルダ」をつくって、その中にそれぞれ「index.html」、「gazou.gif」をアップロードする必要があります。
 

サーバの中 「iamsenmu」ディレクトリ

pcsyohoフォルダ

index.html

imagesフォルダ

gazou.gif

syashin.jpg

TOP

 

4 .HTMLファイル、画像ファイルがまったく別のサイトにある場合

 
タグの使える掲示板や日記帳に画像を貼ったりする場合は、まったく別のサイトにある画像を表示することになります。その場合のタグはフルパスで書かなければいけません。

他のHTMLファイルと同じ場所に画像ファイルがある場合は、例えば・・・・・
<IMG SRC="http://iamsenmu.easter.ne.jp/gazou.gif">

imagesフォルダに画像ファイルが入れてある場合は、例えば・・・・・
<IMG SRC="http://iamsenmu.easter.ne.jp/images/gazou.gif">

となります。

TOP

目次へ

 

おまけのページTOPへ

質問は掲示板へ

HPのトラブルはURLを書いてください

 

 


女の子お絵かき掲示板ナスカiPhone修理池袋 ブラジリアンワックス