質問・画像がうまく参照できない。

トップページに戻る

ホームページビルダーは、世界標準のホームページ製作ソフトです

質問者

　かすみさま

質問概要

画像がうまく参照できない。

質問

コバヤシ様

こんばんは　お久しぶりです。
代理店のかすみです。
HP作成で質問があります。
実はこのセミナー代理店活動の傍らもう1つのビジネスをしておりましてそのHPを現在作成中です。
もしよければ相談に乗ってもらっていいですか？

じつは、画像の表示がうまくいかないんです。

ビルダーから壁紙をチョイスし、
無料素材で頂いたイラストを使おうと思い、
それらを一緒にアップロードしたんですが、壁紙も、画像も表示されず、、、
、、困ってます。

HP上は×印（なぜか　チューリップの絵がでてました）
画像はgif　で保存になってます。

その×印のHPをおみせしたほうがいいとは思うのですが、
応急処置で壁紙を白、画像抜きでアップしてありますので
お見せできません。

HPはレンタルサーバーのロリポップを使っています。

他ビジネスのHP作成なので　お聞きしようか　だいぶ悩みましたが、
お聞きできるのはやはり小林様しかいない　と思って　
思い切ってメールしてみました。
よろしければ教えてください。宜しくお願いします

回　　答

先ほど、頂戴した情報を元に、かすみさんのサーバーにFFFTPでアクセスしてみました。
幸い、下図のように、

バックアップファイルがありましたので、コレを開いてみましたが、なるほど、確かに画像が×マークになっていますね。

通常、画像が表示されずに×マークが出てくる原因は、
・画像のファイルが正しい半角英数の名称になっていない。
・画像のファイルの保存先が、アップしたサイトファイルに入っていない。
・参照しているつもりの画像の名称と、その画像につけている名称が違っている。

上記のようなことが原因で×マークで参照ミスになります。

そしてソースを見てみました。
画像部分の参照を見てみると、
<IMG src="kumapon.gif" width="36" height="79" border="0">
というような記述になっているので、
もし、正しく、kumapon.gif　と云うようなファイルがちゃんとアップされていれば、表示されていなければなりません。

そこで、再度、ソースを見てみますと、、、以下、↓↓　冒頭部分です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<BASE href="file:///C:/Documents and Settings/bessou.k/My Documents/edc1/edc1.index.html">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 Trial for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<TITLE></TITLE>

コレを見ると、
<BASE href="file:///C:/Documents and Settings/bessou.k/My Documents/edc1/edc1.index.html">
という表記があります。
コレが原因です。
リンク先として、このサイトの基本的参照として、自分のパソコン内が指定されています。

この赤い部分をソースから削除すればOKですが、
なぜ、この<BASE>が出てくるか?
ですが、「ビルダーの基本設定」に問題があると思います。

設定を見てみましょう。

ツールから、オプションに行きます。

表示で、上記、赤丸の部分にチェックが入っていませんか?
入っていたら、「外して」適用ボタンを押して下さい。

更に、ソースを見ると、文字化けしています。
html構文は半角英数なのでちゃんと見えますが、日本語コードが
もじばけしています。下記のようなソースになっています。
=======================================
<B><FONT color="#000000" size="3">
縺昴�轤ｺ縲∫ｧ�＃驕ｸ縺ｶ蛛ｴ繧よ悽
迚ｩ縺ｮ繝薙ず繝阪せ繧定ｦ区栢縺丞鴨
縺悟ｿ�ｦ√↓縺ｪ繧翫∪縺吶�<BR>
</FONT></B><BR>
遘√�莉翫∪縺ｧ縺�￥縺､縺九�繝薙
ず繝阪せ縺ｫ繝√Ε繝ｬ繝ｳ繧ｸ縺励※縺
阪∪縺励◆縺檎ｵ先棡縲�哩骼悶↑縺ｩ
髟ｷ邯壹″縺励↑縺�ｂ縺ｮ縲�<BR>
=======================================

これも、オプションの基本を見てください。、

想像ですが、上記の出力・入力漢字コードが、Unicode(UTF8)　に成っている可能性があります。
上記のように無変換、自動判別にするか、もしくは、「JIS」に指定した方すれば、正しく日本語がソースに反映すると思います。

また、今回は、たまたま、バックアップファイルが生成されていて、
「index.bak.htm」がサーバーにアップされていましたので、「前の状態」がわかりましたが、普段、このバックアップファイルを使う事はほとんどありませんし、煩雑になって逆に「ミステイクの元」に成りかねません。

また、サーバーに使っていない余計なバックアップファイルを入れると、サーバー容量をムダに使う事になるので、上記の保存オプションも、チェックを外した方がいいです。

更に・・、
かすみさんは、セミナーの「標準モード」ではなく、「どこでも配置モード」で作っていますが、そのために、インターネット上で見ると、「文字が重なって」見えています。

「どこでも配置モード」は、初心者の人にはレイアウトしやすいですが、「レイヤー」という枠でレイアウトする特殊な手法で、逆に、後々修正するのに苦労しますから、「どこでも」は使わないようにしたほうがいいです。

基本は、「標準モード」です。

まぐまぐ

『まぐまぐ！』から発行しています。
当セミナーでは、IBMのHPビルダーを使っています。