困っています！＞＜ HP作成について

質問

お世話になります。

先日からホームページをつくっていて
いったんできあがったのでアップしてみたのですが
画像が全く表示されないというトラブルがありました＞＜
(サーバーはfreespaceです)

そこでアップするときにこちらのパソコン側のファイルでは
htmlファイルが入っているフォルダの中に、
更に画像のためのimageフォルダをつくっていたことに気がつき、
そのフォルダをとっぱらって画像も全てhtmlファイルと同じ次元(?)
に置いておき、各画像ファイルの/imageというソースを
とることで、画像は表示されるようになったのですが

今度はホームページ全体のデザインが少しおかしくなってしまいました＞＜
(ヘッダーなどが表示されない状態になっています)

http://fun.poosan.net/wyts_01/aboutwyts.html

こちらなのですが・・・
開催のねらいなどを書いているところはもともと白く、
上にヘッダーが見えていたのに、なぜか緑一色になってしまっています。

このフォルダをとっぱらう作業しかしていないので、
ここに原因があるとしか考えられないのですが
どうしてもその原因がわからず、困ってしまっています＞＜

助けていただけるととても助かります！
宜しくお願いいたします＞＜

回答No.3

abril

No.2です。

> 「ディレクトリ構造を保ったまま」というのはどのようにしたら出来るのでしょうか？＞＜

読んで字のごとく、です。何も難しく考える事はないのですが。

ローカル（質問者様がWebコンテンツを作成する作業をしているPC上のどこか。）の保存場所（ディレクトリ）を仮に、web_contentsという名称であると仮定します。
それが、例えば以下の様な構造になっているとします。

web_contents※この親ディレクトリを【A】とします
├ inex.html…トップページ
├ image
│ ├ img01.gif
│ ├ img02.jpg
│ └ img03.gif
├ css
│ ├ common.css
│ ├ category_a.css
│ └ category_b.css
├ category_a
│ ├ hoge01.html
│ ├ hoge02.html
│ └ hoge03.html

一方、質問者様のサイトのURLが仮に、http://www.hogehoge.com/　であったとします。
この場合、Webサーバ上にコンテンツをアップするディレクトリの名称は、利用しているホスティング・サービスなどによって違いますが、所謂「Webコンテンツをアップするエリア」としてFTPでアクセスするディレクトリ名が、public_html（※この親ディレクトリを【B】とします）となっていると仮定します。

であれば、単純に【A】＝【B】の図式ができます。つまり、【A】に入っている中味を【B】にそっくりコピーするだけで、ローカル上で作業・閲覧していた【A】がWebサーバ上で公開される【B】となる、というだけの事なのです。至極簡単な事です。
従って当然、【A】をコピーした後の【B】は以下の様になります。

public_html
├ inex.html…トップページ（http://www.hogehoge.com/index.html のURLで公開される）
├ image
│ ├ img01.gif
│ ├ img02.jpg
│ └ img03.gif
├ css
│ ├ common.css
│ ├ category_a.css
│ └ category_b.css
├ category_a
│ ├ hoge01.html
│ ├ hoge02.html
│ └ hoge03.html

【A】と【B】はそれが置かれている大元の場所が違うだけで、内容的には同一でなければなりません。
＃動的なコンテンツがある場合はその限りではありませんが、今は無視しておいて結構です。

> バックアップファイルはのこしてあるので、imageフォルダを残したままのファイルもあります！

この「バックアップファイル」というのは、各HTMLファイル内から画像を参照する部分の記述を書き換える前の状態のもの（「各画像ファイルの/imageというソースを」取っていない）がそっくり残っている、という事ですか？もしそうなら、その状態のバックアップを【A2】とします。
【A2】がローカル上に残っているなら話は早いです。Webサーバ上にアップしたコンテンツを一度丸ごと削除（【B】ディレクトリの中味を全て空にする）して、【A2】の中味を【B】ディレクトリ以下にアップするだけです。

念の為ですが、No.1様の対処は”現状の【B】の構造に合わせて”スタイルシートやJavaScriptの記述を書き換えてしまうという事ですから、No.1様の方法とこちらの方法は並び立ちませんので、対処する場合はどちらか一方の方法を選択して下さい。

回答No.2

abril

No.1様のご指摘の通りなんですが。

ローカル（ご自分のPC上）で作成したWebコンテンツをWebサーバ上にアップする際には、必ずローカルでの「ディレクトリ構造を保ったまま」アップロードする事です。HTMLファイル内から外部ファイルである画像やCSSやJavaScript参照しているわけですから、その位置関係がWebサーバ上でも同一に保たれていなければ当然参照先が行方不明となり、表示・動作に不具合が出る事になります。

> 更に画像のためのimageフォルダをつくっていたことに気がつき、そのフォルダをとっぱらって画像も全てhtmlファイルと同じ次元(?)に置いておき

元の方（画像ファイルをimageフォルダにまとめる）が今後の管理もしやすいのですが…コンテンツが増えてくるにつれ、画像もHTMLファイルも同じ階層にだーっとぶち込まれている状態は煩雑で大変です。
ただ、

> 各画像ファイルの/imageというソースをとることで、画像は表示されるようになった

ということは、各HTMLファイル内の<img src="～">の記述部分を既に書き換えてしまったという事ですよね。
書き換え前のコンテンツが残っているなら、ローカルのコンテンツのフォルダごと、再度全部アップし直すのが一番手っ取り早い方法だったのですが。

今後の事を考えたら、CSSやJavaScriptのパスの記述を書き直すよりも、HTMLファイル内の<img src="～">の記述部分を元に戻す方をお奨めしますが…
一括置換ツールなどを上手く使えば、一箇所一箇所手作業で修正しなくても済みますし。

お礼

ありがとうございます！
私も極力imageフォルダはくずしたくなかったのですが・・・
どうしても分からずこの方法をとってしまいました＞＜

「ディレクトリ構造を保ったまま」というのは
どのようにしたら出来るのでしょうか？＞＜

バックアップファイルはのこしてあるので、
imageフォルダを残したままのファイルもあります！
なのでこちらでアップ出来るなら極力したいのですが・・・

回答No.1

Kirishima

images
っていうフォルダをサーバーにアップロードするだけで良かったハズなのですが、
大変な方にしてしまいましたね。

スタイルシート（style.css）と、
bodyタグのロールオーバーの記述の中に、
images/
がついている部分が残っています。

お礼

迅速な回答有り難うございます！
わたしも一回はimageフォルダごとアップしたのですが
なぜか表示されず・・・

それでこんなややこしい方法をとってしまいました＾＾；

スタイルシートの記述は見逃していました＞＜
チェックしてみます！
有り難うございました。