いちおう個人サイトのガワだけができた!

昨日、待っていた本が届いて早速作り始めた個人サイト。

いちおうガワだけだけど完成した!

肝心の画像が入っていないけど、内容はすべて自分のものに書き換えたトップページ。

1階層下に創作全般のページ、

さらにもう1階層下にシリーズごとの作品ページを作った。

サーバーにアップして、それぞれのページをちゃんとリンクでつなげてるか確認するところまでできた。

画像も入っていない中途半端なものをアップしてしまっているけど、当分は誰も来ないと確信できるので大丈夫。

苦労したところ

FTPソフトを使ったサーバーへのアップ

メモ帳手打ちでサーバーにアップしない形で、遊びのサイトを作ったことはあったんだけど、サーバーにアップするとなるとやっぱり色々ややこしいね。

本で紹介されていたFFFTPという、サーバーにファイルをアップするためのソフトを使ってアップしたけど、まずサーバーの情報を「ホスト一覧」に登録して、サーバーに接続するのに苦労した。

ホスト名ってなんぞや?とか、そのあたりの情報が全然わからなくて…でもぐぐったら、ちゃんとサーバーの公式サイトに書いてあった。

ロリポップの場合の設定(公式)→各種FTPソフトの設定方法

それでも何度か失敗して、やっとつないでアップすることができた。

1階層下、2階層下へのCSSやJavaScriptの反映

最初、何も考えずに同じ階層にトップページ以外のページも作っていたんだけど、それだとぜったい後々ごちゃついて管理しづらくなるなぁと思ったので、ファイルを作って階層化することにした。

でもこれだと、階層のちがうところからCSSなどの情報をひっぱってくることになっているので、デフォルトの記載では反映されない。

調べたところ、1階層下なら「../」2階層下なら「../../」といった記述を、ひっぱってくるCSSなどの場所を指定しているパスの前につけないといけないらしい。

探してみた所、<head>内にそうった記述が見つかったので、「css/style.css」「css/fuwaimg.css」「js/jquery.js」の前にその記述を加えた所、ちゃんと反映されるようになった。

ただ、モバイル版のメニューがアイコンを押しても開くことができない状態。

ソースをしらみつぶしに見ていたら、<footer>より下にも「js/common.js」「js/fuwaimg.js」のパスを指定している箇所を見つけたので、ここも書き換えたら開くことができるようになった。

といっても、意味とかちゃんとわからず適当だけど…

モバイル版メニューでJavaScriptが使われているということなんだろうけど、なぜ<footer>より下に書くのかとか、そいういの全然理解してない。あんま適当もだめだから、ちょっとずつ勉強していかないとなぁ…でもとりあえず今はすぐにでもサイトを形にしたい~!

なのでひとまず解決してよかった。

完全な初心者の人は結構きついかもだけど

私は一応だけど、htmlとcssについてだけは薄~~~くだけど知識があったからわりとすぐに形にすることはできたけど、完全な初心者の人だとやっぱりちょっと難しいかもなぁ。

どうしても個人サイトが持ちたいとかでないと、投げ出してしまう人もいるかも。

本にも丁寧に書いてあるので、それら全部ちゃんと読んで、わからないことはネットで調べて…と地道にやる忍耐力が必要とされる。

でも一度慣れてしまえば楽にカッコイイデザインのサイトが作れるし、好きにカスタマイズもできるのですごくいいと思った。

自分で手打ちでサイト作ったことあるからわかるけど、ここまで洗練されたデザインのサイトがすぐに作れちゃうなんてめちゃくちゃありがたいこと。作者のガタガタさんに感謝!

…といっても、まだ画像も入ってないので。面倒だけどそのへんの作業もして、サイトをちゃんと形にしないと…。まだまだ先は長いな~。