超超初心者向け漫画サイトのつくり方【フォルダの整理と相対パス】

漫画サイトをつくると、画像を大量に扱うことになるので整理の方法をしっかり把握しておきましょう。

ついでに、フォルダ＝ディレクトリです。超超初心者向けなので、馴染み深いフォルダで呼びます。

フォルダの整理

まず、定位置に置かなければならないものと、自由な場所に置いて良いものを紹介します。

index.htmlは、借りたサーバーの指定する場所に置かなければ、せっかくアップしても、ホームページが存在しない。などのエラーが出て悲しくなっちゃいます。

index.htmlに関しては、名前の変更NG、指定場所以外の設置NGという特別な存在です。これは確実に覚えてください。

次に、ファビコンです。

ファビコンをimageフォルダに入れたくなりますが、NGです。ファビコンは、必ずindex.htmlと同じ階層（階層ってなんぞ？は、後ほど説明します）に置かなければ、ファビコンとして認識してくれません。反対に、適切な場所に置くだけでファビコンだと認識してくれる賢いブラウザも存在します。

基本的に、index.htmlとファビコン以外は好きな場所に置いても大丈夫です。でも、index.htmlと同じ階層か、下の階層に置いてください。

次に、階層について説明しますね

index.htmlを配置している場所を、仮に１階だとします。

index.htmlと同じ階にいる「imege」フォルダ。フォルダ自体は１階ですが、その中身の画像は地下１階。という事になります。

この階層は、いくらでも深くしてOKです。ただ、自分が迷子になるので出来るだけシンプルにしましょう。

正直、好き好き…って話ではあるのですが。超超初心者のうちは「自分の好きなやり方」が分からないですよね。

わたしの個人的好みで言うと、漫画以外の「image」フォルダと、漫画の「comic-image」フォルダの２種類をつくるのが良いと思います。

さらに、複数の漫画を置くなら漫画数分のフォルダ、巻数もの？なら、１話に１フォルダつくっても良いかも。

これには良し悪しがあって、漫画置場の管理は楽なのですが、htmlに漫画の場所を指定するのが面倒になります。わたしは、置場管理の楽を取りましたが…。どっちがいいのか正直分かりません。

シンプルなフォルダ構成なら苦労しません。が、複雑なフォルダ構成の時に混乱するので、２通りの話をします。

フォルダ構成は、以下のとおりとした場合です。

comic-imageフォルダ内は、以下のとおり

comic.htmlの記述は、以下のとおりとなります。

<img src="comic-image/comic01.png">

漫画種類でフォルダを分けたとしても、/（スラッシュ）で区切っていけば指定が可能です。

<img src="comic-image/漫画タイトル/comic01.png">

話数でフォルダを分けても、です。

<img src="comic-image/漫画タイトル/episode1/comic01.png">

このタイプの構造だと、パスの書き方は分かりやすいと思います。

例えば、フォルダ構成が以下の場合

「image」フォルダの中に「comic01.png」、「comic」フォルダの中に「comic.html」。

comic.htmlの記述は、こうなります。

<img src="../image/comic01.png">

「../」が、１階上に上がる。という記述です。

comic.html（地下１階）から../（１階に上る）image（１階）からcomic01.png（地下１階）の画像を取ってくる。

comic01.pngとcomic.htmlは、同じ地下１階ですが連絡通路が存在しないため直通NG。そのため、一回上にあがってからまた地下１階に降りて取ってくる。というルートになります。

地下２階から１階に上がるのは、../../です。１つ階を上がるのに１つ「../」が必要。と覚えれば簡単です。

この記述ルールを知っていたら、どんなに複雑なフォルダ構成にしても記述は簡単です。

が、

超超初心者のころは、大体迷子になって、画像を取ってきたと思ったのに表示されない。という罠にはまってしまいます。

画像が表示されないときは、パス（相対パス）の記述が間違っている事がほとんどです。

相対パスの内容が？？？となったひとでも大丈夫。

漫画サイト作成に相対パスはついて回ります。いま？？？でも、嫌でも覚えます。画像をいっぱい扱うので、フォルダの多用が避けて通れないからです。

お疲れさまでした。