階層とかファイル転送とか

さて、またまたインターネット老人会のお話です。
自分でHPを作成していた頃、WordPressなんていう便利なものはもちろんありません。
作ったhtmlファイルは「ファイル転送ソフト」で「サーバーにファイル転送」するのが当たり前でした。

ファイル転送のお話

ファイルを自分のパソコンの中に入れておくだけでは、自分のパソコン環境では表示できても、ほかの人に見てもらうことができません。

なので、作ったものをほかの人に見てもらうために「サーバー」と契約して自分用のスペースを借り、そこに自分だけのホームページを作成しファイルをアップロードしていました。

もちろん、今でもWordPressを利用するときなど、まずはサーバーと契約します。

サーバー料金のこと

利用料金は安いところで月500円程度～ですが、この「月500円」は毎月500円払いではなく「3年契約一括払いだと、月で割って500円になる計算」の場合があるので要注意です。月額払いだと高くなったり、安くてもホームページ用の容量が少なかったりもするので、お支払金額と自分がやりたいことの折り合いがつくサーバーを選ぶことが大事です。

ファイル転送ソフト

さて、サーバーが決まって、自分の作成したhtmlファイルとCSSファイルがそろったら、サーバーにアップロードです！

と、いきなり言ってもわからないと思います。
だって、最近のネットって本当に便利で、ブログはブログサイトに行ってエディタに文章を打ち込んでボタンを押せばそのまま文章が公開されるし、Twitter（現X）やインスタ、Youtubeだって、携帯からボタン一つでファイルをアップロードすることが可能です。

じゃあ、自分が作ったホームページのデータはどうするの・・・？

はーい、ちゃんとソフトがあります。

窓の杜

↑
FFFTPという、ド定番のソフトです。
「FTPクライアント」の「FTP」は「ファイル転送プロトコル」といいます。
ファイル転送するときのお約束ってことです。

これ、チラ見できてる画像で見てもらうと、Windowsのエクスプローラー（フォルダマークのやつです）に似てますよね。詳細な設定は窓の杜とかその他で見ていただきたいんですが、設定が済んだら普通に「ドラッグ＆ドロップ」でサーバーにファイルをアップできるというソフトです。

これでサーバーにファイルを転送して、さー、HP公開だぜ！！
というときに、要注意。

階層大丈夫？

そう、階層。
htmlとcssと画像系のファイル。

階層分けてますか？

ってことです。
「どうせそんなにページも増やさないから大丈夫(^^♪」
と思ってテキトーに作成していると、後々面倒になる未来しか見えません。

例えば、こんな感じ。
【同じ階層の中に】
・index.html
・style.css
・画像ファイル1.jpg
・画像ファイル2.jpg

【htmlの中の記述】
〈!DOCTYPE html〉
〈html lang="ja"〉

〈head〉
〈meta charset="UTF-8"〉
〈meta name="viewport" content="width=device-width, initial-scale=1.0"〉
〈title〉テスト作成〈/title〉
〈link rel="stylesheet" href="style.css"〉
〈/head〉

〈body id="top"〉
〈img src="画像ファイル1.jpg"〉〈br〉
〈img src="画像ファイル2.jpg"〉

以下略

---

の、場合。

画像が増えなければ、これでもいいと思います。
スタイルシートも、インデックスも、画像も、ぜーんぶ同じフォルダにあるなら。

でも、たぶん、整理したくなるでしょ？

FFFTPのフォルダを眺めているうちに、「あれ？これはフォルダを分けたほうが良さそうだ」と、FFFTP上でサーバー内に新たなフォルダを作成してファイルを移動すると・・・

【フォルダ変更】
・index.html
・cssフォルダ
　Lstyle.css
・imagesフォルダ
　L画像ファイル1.jpg
　L画像ファイル2.jpg

スッキリしたじゃん！！ってなると思う。
でも・・・

それじゃ動かなくなっちゃったよね？

【htmlの中の記述】
〈!DOCTYPE html〉
〈html lang="ja"〉

〈head〉
〈meta charset="UTF-8"〉
〈meta name="viewport" content="width=device-width, initial-scale=1.0"〉
〈title〉テスト作成〈/title〉
〈link rel="stylesheet" href="style.css"〉
〈/head〉

〈body id="top"〉
〈img src="画像ファイル1.jpg"〉〈br〉
〈img src="画像ファイル2.jpg"〉

---

太字の部分、階層ずれちゃったよね？
cssファイルやら画像ファイルやらを探しに行ったのに所定の場所にないからちゃんと動かないインデックスのみが放置されたページになっちゃいます。

〈link rel="stylesheet" href="css/style.css"〉

〈img src="images/画像ファイル1.jpg"〉〈br〉
〈img src="images/画像ファイル2.jpg"〉

上記に変更しないといけないんですけど、結構忘れがち。
そして、「画像が表示されない！」とかなりがち。

階層の設定は計画的に！

・・・と、いうことを、かなり失敗しながら学びました。
imagesの中でも、画像が増えてきたら「猫画像」とか「風景画像」とかジャンル分けしたくなるものなのよね・・・そうしたら、どこのページに何をリンクしていたのか・・・全部書き換え・・・とか・・・

それに比べたらWordPressって楽よね・・・自由度は劣るかもしれないけど・・・と、思います。

では、思ったより長くなったけどこの辺で。
まったね～ノシ←古のバイバイAA