Endless Dream!-超〜簡単ＨＰ作り １４．フォルダ分け たくさんのページを整理しよう！

このページではフォルダ分けについて書きます。別にやらなくてもいいのだけど、ページ数が増えるとこれをしないと整理しづらい。慣れれば簡単だから、ぜひ試してみよう！

＜フォルダ分けとは？＞

ページ数が少ないときはサーバーにそのまま送っていても問題無いけど、ページ数が多くなってくるとどれがどれだか分かんなくなってくる。いざリンクをはるときも大変。そこで、フォルダ分けをしてたくさんのページを整理しよう！ 　フォルダとは簡単に言うと入れ物のこと。机の引き出しといった方が分かりやすいかな？一ヶ所にたくさんのページをいれるといざ探すときに大変なので、このページはフォルダ１にいれようとか、このページはフォルダ２にいれようとかページをいろいろな入れ物に分類する。これがフォルダ分け。 　ページを分類するのに便利だからやるだけなので、別にやらなくてもいいよ。ただできたほうが、作るときに楽ちんだから、ＴＲＹしてみよう！

＜分けるときのコツ＞

ＨＰはいくつかのコンテンツに分かれてるはず。だから、そのコンテンツごとにフォルダを作ると分かりやすい。その時、ＨＰの構成図（トーナメントのね）通りにやるといいかも。（つまり、リンクの枝別れごとに、フォルダを作るということ。） 　例えば僕のHPでは主に、"ed"（Endless Dream!）と "jff"（Just for Fun!）と "links"（リンク集）の３つの大きなフォルダを作り、それぞれのフォルダの中にもっと小さいフォルダを作って整理している。（"ed"の中に、"dj"（大学受験のコーナー）"eng"（英語のコーナー）"hp"（ＨＰ作成支援のコーナー）という感じ。）そう、フォルダの中にフォルダを作ることも可能なんだ。（普通は一段階でＯＫだけどね。） 　だいたい分かったかな？作り方は下にあるので、分かんなくてもとりあえず下に進んでみよう！

＜やり方＞

フォルダ分けは自分のＰＣ側と、サーバー側とを同じにすると分かりやすい。（FTPで見ると、左と右が揃うようにするということ。）ここでは、フロッピーディスクを使った方法を紹介するね。（PCのMy Documentなどにデータを入れる場合も、基本的に同じだよ。） 　まずはフロッピーを整理しよう。 　１．フロッピーディスクを起動する。（マイコンピューター→フロッピーディスクとダブルクリックを繰り返す。） 　２．今までに作ったページがたくさん出てくると思うので、見やすくするため「表示」→「一覧」をクリックしよう。 　３．次にフォルダを作る。右クリック→「新規作成」→「フォルダ」をクリックすると新しいフォルダができる。後でサーバー側と合わせるため、名前は英語の小文字にする。（短く略したほうがいいかな。上の僕のを参考にしてね！） 　４．フォルダの中に作ったページを移動する。移動したいページをクリックしたまま、いれたいフォルダに移動するだけ。（ドラッグアンドリリースだっけ？）確認のために新しいフォルダをダブルクリックしてみよう。ちゃんと移動したかな？ 　５．フォルダを複数作るときは、３と４の作業を繰り返すだけ。（ちなみにフォルダの中にフォルダを作るときは、元のフォルダの中を表示してから３と４の作業をするだけ。） 　これでＰＣ側のフォルダ分けは完成。次にサーバー側のフォルダ分けをしよう。FTPソフトを使ってやります。（ここではFTTTPを標準に紹介。） 　１．FTPを起動。サーバーに接続する。 　２．左のＰＣ側をフロッピーにする。 　３．右のサーバー側にマウスを合わせて、右クリック。「フォルダ作成」をし、左と同じ名前のフォルダを作る。（複数あれば複数作ってしまおう！） 　４．フォルダが全部できたら次はページのＵＰ。左のフォルダをダブルクリック、右の対応する同じフォルダもダブルクリック。あとはＵＰしたいページをいつもと同じようにＵＰするだけ。（フォルダ全体を送っちゃうこともできるよ。） 　できたかな？サーバー側のフォルダ分けの前に、最初右のサーバー側にたくさんページが出ていると思うけど、リンクを確認するまではそれをいじらず、もう一度ページをＵＰしたほうがいい。

＜リンクの変更＞

フォルダ分けをすると、リンクが変更になってしまう。例えば、"folder1" というフォルダの中にあるページ "page1.html" のリンク先は、"〜〜/folder1/page1.html" になる。（〜〜には"http://自分のＨＰのアドレス" が入る。） 　わかりにくいかな？とにかく、フォルダの名前の分、リンク先のアドレス（URL）が増えるということ。（フォルダの中にフォルダがある場合は、その分"/"を使ってフォルダの分のアドレスを増やす。） 　そこで、今までのリンクのままではリンクが切れてしまう部分があると思うので、所々リンクの先を変更しよう！足らない部分はフォルダの名前の部分を増やすんだ。 　ここでちょっと難しいのは、リンクのアドレスはフォルダの影響を受けてしまうということ。同じフォルダ内なら問題無いけど、違うフォルダだとよけいなアドレスがついてしまう。例えば、"folder1" の中にあるページから、"folder2" にあるページ "page2.html" にリンクをつなぐときは、<a href="folder2/page2.html">を使うけど、そうすると "〜〜/folder1/folder2/page2.html" になってしまいリンクがおかしくなる。（同じフォルダ内にあるページだと認識されてしまうということ。） 　そこで、フォルダが違うページにリンクをはるときは、フルアドレス（つまり "http://" から全部のアドレスを書く）にしよう。 　またはフルアドレスだと長くていやだって人は、"../" を使う方法もある。このタグは一個上に上がる指令。つまり上の場合なら、"../folder2/page2.html" という風に書けば、フォルダ１の中のページからフォルダ２のページ２にうまくリンクされる。"../" を使えば使うだけ上の階層に飛ぶことになるので、複雑なフォルダ分けにも対応できる。（これは文章で読むと分かりにくいけど、一度原理が分かると簡単だよ。） 　これが特に重要なのは画像のリンク。各フォルダの中にそのページに対応した画像をＵＰしてリンクしてもいいし、"images" などの画像専用のフォルダを作り、フルアドレスでリンクしてもいい。 　リンクの確認が終わったら、今まであったページを削除してもＯＫだよ。でも間違ってＵＰされてないページは消さないようにね！

＜ポイント＞

僕は最初 GEOCIOTIES で作っていたので、このフォルダ分けが難しかった。GEOはすべてのページが同じ階層にあるからね。でもそれだとページが多くなってくると変更の時探すのが大変。だから、このフォルダ分けに挑戦してみよう。なーに、そんなに難しくないから大丈夫だよ。 　一番のポイントは、自分のＰＣ側とサーバー側のフォルダを統一すること。それと、コンテンツごとにフォルダを分けることかな。あと、リンクで迷ったときはフルアドレス！ 　そうそう、トップページ（"index.html"）だけはフォルダにいれず、一番上の階層に置こう！ 　とにかく、このフォルダ分けというのは文章で説明するのは難しいけど、実際やってみるとすぐに分かるから試してみよう！ＵＰして、確認し、リンクが切れてるところを修正すればいいだけだから。がんばってね！