◆◆◆ ファイル構造 ◆◆◆

ホームページを作ろうなどというサイトに行っても、

ファイル構造をどうするかなんて、教えてくれている所は少ないですよね。

みなさん、グチャグチャなはずです。

そんで、あちこち引っ越して、リンク切れ大発生などということになります。

アタシもそうでしたから。

初めから、スッキリいきましょう。

とりあえず、アタシのホームページの構造を見てみてください。

ダンウロードしたhpファイルを見てみてください。

こうなってますよね。

これでいいんです。

indexファイル、

ギャラリーaのフォルダー

ギャラリーbのフォルダー

ギャラリーcのフォルダー

otherフォルダー

***********

とりあえず、シンプルっす。

ギャラリーデータは、部屋ごとにフォルダを作ります。

今回は、ギャラリー用の画像はabcのフォルダーそれぞれ11枚なので、

全てそれぞれのimgフォルダーにダミー画像を格納しています。

 

もし、必要であれば、フォルダごとコピーして、フォルダーを追加して、

d,eなどというようにファイル名を変更します。

 

●トップページ画像、●背景画像など、●バナーなどは、各フォルダーのimgフォルダーに入れる設計にしてあります。

そうすることで、フォルダーごとコピーしても、htmlファイルが壊れないからです。

***********

それ以外の情報、例えば、プロフィールとか、画歴、コンタクトの情報などは、otherフォルダーに格納しましょう。

もし、連載や、他のまとまったコンテンツをつくるのであれば、

フォルダーごとコピーして、

e、f、g、のフォルダーを追加するとか、

hoby,pet,kodomoなど、aと同じように、フォルダーをコピーして、作品の画材やカテゴリー名をファイル名にして管理します。

フォルダー名は、アルファベット順に自動的に並びますので、その辺、理解して整理しておくと、フォルダが増えたときに便利です。

次に、ギャラリーaフォルダを開いてみます。

imgフォルダーの中

こうなっています。

基本的には、フォルダーの直下には、HTMLファイルを入れ、

画像は、全て、フォルダー直下に、【imgフォルダー】を作成し格納します。

(今の所、imgフォルダー内には、「展示用画像10枚」、「右へ・左への矢印バナー」

画像作成用台紙、【トップページや、SNSに表示する時の画像 top.jpg】、

画像の作り方メモ をimgフォルダーに入れています。)

**************

otherフォルダの中は、こうなっています。

 

すごく、シンプルでしょう。

--- コンタクト

--- index

--- pro (プロフィール)

---- works(画歴等)

*********

一応、この4つのファイルを準備してあります。

それぞれのFILEには、トップページからのみリンクを張ってあります。

ギャラリーページなどからは、こちらのページに移動できませんが、

そういう細かい話は、将来、もっと、スキルが向上したら、

ご自分でカスタマイズしてみてくださいね。

*************

この、ファイル構造は、私の基本的なHPの構造です。

index.html(カテゴリーのトップページ)

000.html (目次)

の2つが、それぞれのフォルダーに共存しています。

まあ、10ページ位であれば、index.htmlだけでも

管理できますけど、アタシのように、日記が5000ページ越えとか

いう世界だと、目次(000.html)は、必ず必要になってきます。

 

**********

【000.htmlファイル 目次ページについて】

あとから、目次を追加する作業は、目次を省略する作業と比較すると、

初心者のアナタにはとても大変な作業なので、

目次アリの構造で配布をすることに決めました。

 

アタシも、今後のHPは、全部この構造で作ろうと思っています。

楽だからね。

ただ、画像が、既に500枚越えが決定のシリーズなんかは、新しく配布した

もう一つのファイル構造で作ります。

*ファイル構造は、展示する画像数によって、若干変えています。

効率重視なんで、初心者の人は、まず、この、

30枚の画像を展示するギャラリーで基本的な操作をマスターしてから、

500枚のギャラリーにも、挑戦してみてくださいね。

**********

とりあえず、基本のファイル構造が、この先、ずっと、

あなたのHPの中心となって行きますので、シッカリマスターしてください。

***********

 

HOME TOP INDEX というリンクは、私のHPでは

バナー画像にサイトマップを使って、リンクを張っていますが、

こちらの公開HPでは、テキストリンクで作り込んでいます。

その方が、操作が簡単なのでそうしました。

*************

BACK NEXTボタンの画像については、

スマホでも画像が閲覧できるように、左右にピンクの矢印バナーを作っています。

 

色々試しましたが、この方法が、一番更新がカンタンで、

少ないプロセスでページを追加できるのです。

私は、サイト構築のプロではありませんので、

自分の力量で、なるべく少ない労力で、

大量の画像を増やしていくような設計になっています。

 

INDEX以外のコンテンツは、フォルダー、もしくは、OTHERフォルダーに

入れるようにしています。

まあ、好き好きですけど、アタシは、部屋が多くて、フォルダーの数も、メチャクチャ多いもんで、

INDEX以外は、全て、どこかのフォルダに格納するってことで、ルールを作っています。

ギャラリー以外のコンテンツは、全てOTHERフォルダに入れると決めれば、こういう風になるという例です。

***********

他に、いいアイディアが思い浮かばない人は、アタシのをコピーして、そのまま利用しましょう。

そんじゃ、この内容に変更を加えてゆきましょう。

************

まとめ

************

◆◆◆ まず、画像10枚*3種類(30枚)を準備します。 ◆◆◆

(1)画像のサイズ

w768*h1024ピクセル 解像度は75dpiで作成します。

全ての画像を、このサイズに統一してください。

横長の作品画像の場合、90度左側に回転する。

もしくは、基本サイズの台紙に貼り付けて、

横向きの小さい画像を作成保存して、それを使います。

(daishi.jpg に、基本の大きさの台紙を入れていますので、この上に横向きの画像を貼り付けて、長い辺を768pix にして保存します)

→ Windowsのピクチャーマネージャーで

全ての画像を表示させ(左上の□が複数あるアイコンを押す)

全ての画像を選択してから、

画像の編集→サイズ変更→定義済みのファイル

(ドキュメント大 768*1024ピクセル)を選択すると、

一発でこのサイズに修正できます。(*゜▽゜*)ノ

画像が沢山ある方は、とても便利なので、

活用してみてくださいね。

**********

(2)ファイル名・フォルダー名全てのファイルは

必ず半角英数小文字で統一して作る。

ピクチャーマネージャーとであれば、

名前の変更もカンタンにできます。

(編集 → 名前の変更)

拡張子も半角英数小文字にしてくださいね。

(拡張子が大文字・小文字というのは、デジタルカメラが勝手に大文字に設定している場合もあります。それは、小文字に直してください。もしくは、HTMLファイルを大文字の拡張子に修正しないと、サーバーに転送したファイルの画像が表示されないです。)

 

画像の名前に意味を持たせない

よく、作品のタイトルなんかを画像名にしたりする人が多いです。

これが失敗のもとなんです。

画像は、必ず、001.jpg

002.jpg

003.jpg

・・・・・

010.jpg

011.jpg

・・・・・・

というように3ケタの番号を附番。

999まで行ったら、次のフォルダーを作成する。

***********

という風に、001番からはじめて、jpgで作り、

先ほどのa,b,cフォルダーのimgフォルダーの画像に上書きします。

 

ここだけ、シッカリ、覚えておいて、画像加工に入りましょう。

 

 

(3)トップページ名は、必ず、index.htmlにする

(4)ギャラリーごとにフォルダーを作る(a,b,c)

 

(5)画像は、全てjpg形式で統一

●画像は、各フォルダーにimgフォルダーを作り、全てその中に格納する。

 

●背景は、bg.jpgとして、それぞれのimgフォルダに格納する。

●左右三角→のピンクバナーも、それぞれのimgフォルダに格納する。

 

 

*************

(6)トップページ用画像

ファイル名は、必ず【top.jpg】として、他の画像の縦長とは別に作成する。

【top.jpg】は500*500ピクセル前後で正方形に作る

トップページの画像はね、アタシは、自分で撮影した写真や絵なんかを使うことが多いっすけど、

まあ、ある程度、明るくて、迫力ある作品、次を見たいなと思わせる作品を1枚選びましょう。

表紙で利用する、作品の写真は(top.jpg)という名前で作ります。

画像の名前は、半角英数で、必ずこの名前で作ります。

ホームページのトップ画像は、otherフォルダーの中に格納。

a,b,cそれぞれのフォルダーのimgフォルダーにも、

それぞれのtop画像を作成して保存します。

(今ある画像ファイルは、私が撮影した写真の、サンプル画像なんで、アナタの画像で上書きして完全に消去してしまってください。)

まず、短時間で、ホームページを形にしてみるというのが大事なんです。

その他に、必要な知識は、ボチボチ身勉強すれば良いですからね。

今の段階では、まず、ギャラリーaを完全に完成(titleや、その他のメタタグなども完成)させて、その後、htmlファイルだけ、

b、cにコピーし、まず、全てのHTMLファイルを完成させましょう。

その後、今度は、準備した画像と、私のショボイ写真を置き換えてください。

とりあえず、3室のギャラリー、作品画像30枚の展示を目標に作り進めましょう。

**********

 

(7)作品の情報を追加してゆきます。

htmlファイルを開きましょう。

のテキスト情報(絵のタイトルや制作年、画材等)を修正しましょう。

もし、作り進めたいときには、HTMLファイルを

名前を付けて保存して、

左矢印・右矢印のリンク先を修正します。

画像と、下にある、作品番号を、HTMLファイルと同じ数字に

置き換えます。

どんどんと、追加してゆくことができます。

 

ギャラリーの数だけ、フォルダを作ってゆく形で、作業を進めます。

たとえば、suisai,oil,sketch,draw,photo

など、画材ごとに名前をつけてもいいですし、

(私は、画材名のフォルダーに、年代フォルダーを作り、そこにHTMLファイルと、画像を格納しています。)

サンプルと同じように、フォル名をa,b,c,などとしても構いません。

でも、まず、ギャラリーaを完成させましょう。そこからです。

*************

(8)フォルダを追加したい場合には、フォルダーごとコピーし、最後に、画像のみを差し替えます。

次に、トップページのindex.html ファイルに、新しく作ったフォルダーへの

リンクを追加します。

***********

(9)画像10枚に5枚追加して、15枚にしたい。

htmlファイルを開いて、名前をつけて保存。

011.html を追加します。

このときに、htmlファイルを修正する箇所は、基本的に4か所です。

●まず、010.htmlファイルを【名前をつけて保存】し、

011.htmlという名前をつけます。

そうすると、011.htmlというファイルが新規にできます。

修正する部分は、基本的に4か所です。

赤い丸をつけています。

左右の三角ピンクバナーは、

011.html

というファイルの前後のファイル名に変更します。

左側→010.html

右側→012.html

************

次に、画像の情報を修正します。

まず、画像をクリックします。

そうすると、下の丸印の画像の「ソース」という場所に、

前の画像情報が残っていますので、

これを、【011.jpg】

という名前に変更します。

 

それから、その下の画像番号、

◆◆◆ 010 ◆◆◆

を【011】に変更します。

この、画像と、画像番号は、htmlファイルと同じ番号にするのがポイントです。

あとは、時間があるときに、その下の、タイトルとか、サイズ、画材、

作成年なども追加します。

**********

完璧にやろうとすると疲れるので、とりあえず、最低限必要な4か所だけ修正して、先にすすんでもオケです。(*゜▽゜*)ノ

大切なことは、HPが、ある程度、形になっていることです。

********

画像と、前へ、後ろへボタンのリンクが間違っていなければ、

苦情は来ませんので。

以上。