Kissy21.info > Main Contents >


ホームページを作ってみよう!【初級編】

めるまがの連載に加筆・修正


水泳に関するメールマガジンのはずなのに…どうして?と思われるかもしれませんが、Kissy21.info チャットルームの中で、あるいはプールでレッスン後の会話の中でよくホームページを創ってみたいけどよくわからない…って方が多いのできっしーのページ〜Kissy21.netの歴史を交えながら、そしてここの趣旨に反しない範囲で書いていこうと思います。

kissy がホームページを作り出したのが1997年もう3年も経とうとしています。当時と今とではかなり環境も違うのですが…アクセスアップに燃えてみたり、HP休眠状態になってみたり、なんだかんだといいながらもうすぐ30000アクセス!少し経験っぽいところや、失敗談なども少しずつ書いていこうと思います。と書いているうちに今回はここまで…連載第1回はHPの内容について考えよう!です。お楽しみに。


ーMENUー

1.【HPの内容について考えよう!】

2.【html形式で保存してみよう】

3.【画像ファイルの形式と保存先】

4.【サーバー選び】

5.【さあ、みんなに見てもらおう!】


―――【HPの内容について考えよう!】――――
個人のホームページがブームといわれて久しいですが、検索サイトからたどり着いたページがLastUpdateded 98/ …なんかだと寂しくなるのですよね。何でこんなことを書くかと言うとHPの作り方なんていうのはテクニックよりもまず内容なのですよね。HPの内容なんて、難しく考えることはありません。自分の得意な分野で「人に伝えたい!」って思うこと、別に伝わらなくてもいいから「これだけは負けないぞ」っていうものをまず題材にしてみましょう。

Kissy は最初自分の担当するアピアイルカクラブ(中学生コース)の紹介をしたくてHP作成に取りかかりました。ただ、多分これだけでは誰も見てくれはないだろうとの思いから、アピアスポーツクラブの(自分の担当する)競技会の競技成績や、記録会の記録をUPしてみたのでした。

大体1997年冬の頃ですね。この頃はまだ個人のホームページもそれほど多くなくyahoo にも割と簡単に掲載されました。(最近は厳しいらしいですね。Yahooの登録 )情報系のページだと多分いろいろ調べてコンテンツ(ページの内容です)をかくことも必要かもしれませんが、好きな話でないと長続きしないでしょうね。まずは

「得意分野のサイトを作ろう!」

そして慣れてきたら、どんどん大きなサイトを構築していきましょう!




<連載企画>ホームページを作ってみよう!第2回
―――――――【ファイルつくり】―――――――
ホームページの内容が決まったら実際のファイル作りです。内容さえ決まっていれば、ワープロが使えればそんなに難しくはないと思います。多くのWindows パソコンにインストールされているWordでも作れます。要はみんなに伝えたい内容をまずはどんどん書き綴ってみたください。順番はあとから並べ替えることもできます。ある程度書き綴ったら、見やすいようにレイアウトし、htmlファイルで保存するだけです。Excel で作った表もhtmlで保存できますね。
kissy も最初のころはWordで作っていました。ただ初期のころのkissy のページはほとんどテキストデータのみでした。デジカメ等の画像入力装置をもっていなかったからなのですが、アイコン等は最近ではフリーの素材集のHPや雑誌もあるので利用したらきれいにまとめることができます。ただ著作権には注意してください。

ie(インターネットエクスプローラー)を使っている人ならFrontPage Express っていう簡易Web 作成ソフトもありますし、ホームページビルダーなど最近はいろいろホームページ作成ソフトもあるので規模が大きくなってくると検討してみましょう。

書きなれてくると細かいところにも気を使いたくなってきますね。そうなってくるとhtmlタグを覚えたほうがより細かい設定とかできそうです。別に覚えなくても結構きれいなページはかけるのですが…タグを覚えるとWindows に標準でついてくるNotepad でも書けちゃいます。HPを作るのは特別なソフトはいりません。要はhtmlファイルで保存するだけです。

まずは表紙を作ってみましょう。たいがいのプロバイダは、トップページ(そのページにいったときに最初に表示されるページ)のファイル名は、index.htm またはindex.htmlが指定されていると思います。index はそのページの顔です。インパクトのあるページを狙って、マーキー(文字が流れる)をつい使いたくなるのですが、多すぎると逆にごちゃごちゃしてしまいかえって見にくくなったりします。テクニックについてはまた別の機会に紹介しますね。

今回のまとめ
        −ページ編集は難しくない ふつうのワープロで大丈夫!−


<連載企画>ホームページを作ってみよう!第3回
―――【画像ファイルの形式と保存先】―――――
まず、画像といえば写真ですが、結論から言えば、ホームページに使うのであったらそんなにいいデジカメは必要ありません。それこそ1万円しないようなおもちゃのデジカメで充分です。たとえば、 300万画素とかのデジカメだとデータ量は膨大なものになります。ホームページに使うのでホームページ自体の容量、ダウンロードする時間の関係からあればあまり大きなファイルサイズは使えませんね。おもちゃのデジカメ(といったら失礼かもしれないけど)の30万画素くらいで充分です。

次に画像の保存形式はbmp (ビットマップ形式)となっている場合はjpg (jpeg圧縮フォーマットフォーマット)に変換しておきましょう。ただし、画像をいろいろ加工する場合はまずbmp で保存しておいてから加工して、jpg に変換したほうが良いと思います。bmp というのは圧縮していない形式で取り込んだときのそのままの状態で保存されます。jpg というのは圧縮形式のひとつで、大概のブラウザで表示することができ実質的インターネット写真画像の標準フォーマットとなっています。しかしこの圧縮形式は不可逆(元に戻せない圧縮)形式なので、加工する場合は元の画像を残しておいたほうが良いでしょ
う。

ページのファイルや写真のファイルが数少ないうちは、同一フォルダで管理していても問題はないのですが、更新を繰り返し数が多くなってくるとファイルを探すのも大変になってきます。(PC上のマイドキュメントなどでも同じですね。)サーバーに送ってからフォルダを移動するのはとても面倒なので、数が少ないうちから画像を保存するフォルダを作っておくと良いでしょう。別に名前の決まりはないのですが、pic とかphoto を使っている人が多いようです。また、画像のハイパーリンクを張るときは相対リンクで張っておくとPC上で管理するときもプレビューできます。

今回の一言『HPにつかうなら性能の良すぎるデジカメは不要!』


<連載企画>ホームページを作ってみよう!第4回
―――――――【サーバー選び】――――――――
さぁ、自分のパソコンの中にホームページのデータは出来上がりましたか?まずはそのファイルをエクスプローラーやナビゲーターなどで見てみましょう。思ったように見えていますか?またリンク、ページ内はもちろん、外部とのリンクを張ったらちゃんとつながるかチェックしましょう。
Windows を使っている方はファイル名の大文字、小文字にも要注意!Windows 上ではファイル名の大文字、小文字は同一に扱われますが、インターネットのサーバーに使われることの多いUNIXなどは、大文字・小文字は別として扱われます。じぶんのPCではちゃんとリンクするのにサーバーに送ったら表示されないっていうのはほとんど、大文字・小文字のミスです。

次にホームページを置く場所の確保です。プロバイダと契約したら、個人の契約ならほぼホームページのエリアが割り当てられます。大概は希望のアドレスを申請すると、アドレスとパスワードが発行されます。 

また、プロバイダのスペースを使わないで無料のホームページエリアを確保するという手もあります。geo cities などが有名ですね。kissy も少し調べてみたのですが、無料のホームページスペース、いろいろあります。メインで作っているページで容量が足りなくなったりしたときに利用を考えるのも1つの方法でしょう。


<連載企画>ホームページを作ってみよう!第5回
―――――【いよいよファイルの転送】―――――
ホームページを作ろうといいつつはや5回、もしこの講座とともに作っている人がいたら公開したくてうずうずしている頃でしょうね(笑)本当にこの講座を見ながら作っている人がいたら mail@Kissy21.info までメールをください!
このコーナーで紹介しちゃいます。そうしたらkissy とこのメールマガジン、50人とあと少しの読者がおとずれるはず…

ホームページのコンテンツ(ファイル等いわゆる内容ですね)が完成し、サーバーのアドレス(ログイン名と言うところもある)とパスワードを取得したらさぁ、いよいよサーバーへの転送(アップロードとも言う)です。Windows を使っていて、Personal Web Server がインストールされているならとっても簡単。Windows のスタートメニューから −プログラム−アクセサリ−インターネットツール− Web発行ウィザード とたどって行けば、自分のPCにあるフォルダ、サーバーのアドレス、(ログイン名)パスワードを指定してあげて、転送したいファイルをしていせて右クリックから 送る−Web 発行ウィザードを
指定するとささっとサーバーに転送してくれます。

自作cgi などを転送するときは、パーミッション(ファイルのサーバー上での属性)を設定しなくてはいけないので、WS_FTPなどのフリーソフトを利用して転送する必要があります。PCの初心者にはWS_FTPの操作はサーバー上のディレクトリの位置等結構厳しい部分もありますので、ここでは割愛させていただきます。転送ソフトはかなりメジャーどころがたくさんあるので、PC中級者なら自分でいろいろ調べてみるのが勉強にもなるかもしれません。


<連載企画>ホームページを作ってみよう!第6回
―――【さあ、みんなに見てもらおう!】――――
うまくサーバーにアップロードできましたか?アップロードしてみたら、まずは自分のブラウザできちんと表示されているかチェックしてみましょう。Windows はファイル名の大文字・小文字は関係ありませんが、多くのサーバーでは違って認識されるようです。リンクがうまくいかない、画像がきちんと表示されないななどは多くはこの点ですね.

ホームページをアップロードしたらみんなに見てもらいたいですね。第一の基本はメールで知人に見てもらう。知人なら固定客をつかんだも同然かな?そして検索エンジンへの登録ですね。検索といえばyahoo ですが、yahoo は最近かなり基準が厳しいらしいので、<工事中>というページは極力なくしてから申請すればいいでしょう。いろんな検索エンジンに一発で登録してくれる、『一発太郎』(http://ippatsu.net/TARO/)みたいなところを利用して、効率よく登録しましょう。


ホームページ講座新企画
―――――――――――
新年からはホームページ講座、アクセスアップ大作戦!として、実際にkissy がKissy21.info のアクセス数をアップさせるためにどんな工夫を行っていくかをメールマガジンでレポートしていきます。これまで行ったことの焼き直しや、新しい作戦、いろいろ考え中です。

また、自分でHPを作ろうと思っているが、実現できていない人への応援をしてこうと思いますので、そういう方はどんどんメールでお知らせください。



Kissy21.info  Main Contents