ホームページ制作の流れ

貼ってあるはずの画像が表示されない!そんなときは・・・・・

ページ編集では画像が貼れているのに、プレビューやブラウザで×が表示され画像が出ない時は、いくつかの原因が考えられます。
次の症状に当てはまる場合は、それぞれの対処方法を使って画像を表示させましょう。

原因 対策
画像のファイル名に日本語や全角文字が使われている ホームページビルダー上で画像のファイル名を変更
【確認方法】
・ブラウザ上で確認するには
ブラウザの×のついている画像を右クリック→プロパティ
ファイル名を確認。ひらがなや漢字、全角英数字が含まれていないか確認しましょう。
・ページ編集上で確認するには
画像を右クリック→属性の変更 または 画像を選択→Alt+Enter
画像のファイル名を確認。
ビジュアルサイトビューまたは右側サイトタブの【フォルダ】をクリックし、その中で全角文字の使われているファイルの名前を変更します。
ファイル名を右クリック→半角でファイル名を入力。
このとき、画像の拡張子を消さないように注意しましょう。
(.gif .jpg .jpeg .htmなど)これを消してしまうとファイルが使えなくなります。
転送した後で画像のファイル名を変更した ホームページビルダー上で画像を再度呼び出し転送
転送後にホームページビルダーでファイル名を変更したり、保存場所を変更すると、文書ファイルと画像ファイルの位置関係が変わってしまうために画像が表示されない場合があります。 編集中のフォルダの中身と転送先のプロバイダのフォルダの中身は、各部品の位置関係を同じにしておく必要があります。
ページ編集で画像を張り直し、上書き保存してもう一度転送しましょう。
Web用に使えないファイル形式の画像が貼ってある ウェブアートデザイナーでWeb用に保存する
Webページで標準で使える画像のファイル形式は次の通り。
・GIF(ジフ)
・JPEG(ジェイペグ)
・PNG(ピーエヌジー・ピング)
なお、BMP(ビットマップ)は最近では表示できるブラウザも増えましたが、まだまだ表示できないバージョンの古いブラウザで見ている人もいます。できるだけ使わないほうが無難でしょう。
ウェブアートデザイナーにいったん画像を呼び出し、右クリック→Web用に画像を保存 で保存しなおし、ホームページビルダーのページ編集で画像を貼りなおし、再度転送します。

※ウェブアートデザイナーで作る画像は、すべてWeb用で保存されるように作られています。
ファイルの種類 GIF JPEG PING BMP EPS
Web用 ×
印刷用 ×
詳細な表現 ×
アニメーション × × × ×
背景透明 × ×
カラーモード インデックス
カラー
RGB RGB RGB CMYK
ファイルサイズ
使用できる色数 256色 1800色~
ファイルデータが壊れている場合 ファイルを作り直す
まれに、作ったアニメーションや画像ファイルが壊れていて、正しく貼ってあっても表示できない場合があります。 画像やアニメーションGIF画像を作り直して新たに保存し、ページ編集で貼って転送しなおしましょう。
ページのHTML文書内に余分なタグがある場合 タグを削除する
ページ設定であることをしたために、作ったパソコンを起動している間はどこからでも画像が見れるけど、そのパソコンをシャットダウンするとどこからも見られない。そんなことがあります。
原因は、[HTMLソース]画面内の上の方に表示されるタグにあります。
【確認方法】
1.[編集]メニューの[ページの属性]-[ページ情報]-[ベースURL]欄にアドレスなど何か書き込んでないかどうか確認

          



1.ベースURLのテキストボックス内を空にします。何か書き込んであったら削除しましょう。特に、C\で始まる文字の場合はプロバイダに転送した文書ファイルから、あなたのパソコンの中身を探して開く設定になっています。この場所でC¥~を見かけたら削除しましょう。
画像がこんな状態↓になっている場合も同様です。

同じ手順でベースを削除し、上書き保存します。
解決しない場合は画像を貼りなおして下さい。


2.または、HTMLソースを直接編集することもできます。
ページ編集画面からHTMLソース画面に切り替えて、最初のほうを表示します。
2.『<BASE ...>ではじまるタグを見かけたら、「<」から「>」までの1行を全て削除し、上書き保存しましょう。
画像は表示されるが背景が白くなる場合 背景を塗りなおす・ファイル形式を変える
基本的にJPEG画像は背景が透明になりません。どうしても白場を出さないようにするには、背景をページの背景色で塗りつぶすか、透過GIFで保存しなおします。(ウェブアートデザイナーで編集)ページの背景色を確認するには次の手順で行ってください。
1.[編集]-背景/文字色の設定→背景/文字色タブを開く





以上がページの背景色のRGBの値を確認する方法です。
1.画像の背景色をページの背景色で塗りつぶすには
・ウェブアートデザイナーでその画像を呼び出し、ツールボックスの色をダブルクリック。

色を先ほどメモしたものに変更します。

OKをクリックすると、ツールバーの色がページの背景色になります。

次に塗りつぶしツールをクリックして、画像の背景をクリックします。
 →
→Web用に保存しましょう。

※このとき、背景を透明色で塗りつぶすツールを使って塗りつぶし、Web用に保存すると、ページに貼ったときに背景が透けて見えるようになります。
2.ページ編集上で背景を透明に塗りつぶす方法もあります。 2.ホームページビルダーに貼った状態から画像の背景色を変更するには
・画像を右クリック→「画像を編集」→「ウェブアートデザイナーで編集」
 これで画像が送られますので、上記と同じ手順で色を変更し上書き保存します。その時点でホームページビルダー上の画像情報も更新されます。表示が更新されない場合はページをいったん閉じてから再度開いてみましょう。
画像ファイルが転送されていない場合 全てのファイルを転送しなおす
まれに、転送したにもかかわらず画像ファイルや一部の文書ファイルが、プロバイダのサーバーに転送されていない場合があります。回線の混雑やホームページビルダーの不具合が主な原因ですが、一度転送しただけでは表示されないことがありますので、上記のいくつかの項目をチェックした上で、再度転送を試みましょう。 【サイト】-【サイト転送】画面を表示し、
『転送対象』を「全てのファイル」に変更してから転送しましょう。

※JAVAスクリプト・CSSなどで呼び出す画像ファイルは、この方法では転送されません。FTPツールを開いて左のローカルからホスト側へ転送しましょう。
(※教室では、複数の受講生さんのデータを取り扱いますので、受講中の方はここは触らないようにお願いします。)

▲ページトップへ