◆◆◆ ファイル構造 ◆◆◆
ホームページを作ろうなどというサイトに行っても、
ファイル構造をどうするかなんて、教えてくれている所は少ないですよね。
みなさん、グチャグチャなはずです。
そんで、あちこち引っ越して、リンク切れ大発生などということになります。
アタシもそうでしたから。
初めから、スッキリいきましょう。
とりあえず、アタシのホームページの構造を見てみてください。
ダンウロードした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が、ある程度、形になっていることです。
********
画像と、前へ、後ろへボタンのリンクが間違っていなければ、
苦情は来ませんので。
以上。