ホームページの基本・スタイルシートを覚えよう♪

3日で作るホームページ・初心者からだれでもわかるホームページの作り方
3日で作るホームページ

- ページを増やそう♪ - 3日目-1時間目

ホームページがひとつのページでは寂しいので、ここではサブページを作っていきます。といっても、簡単です。index.html 右クリックからコピーして、同じフォルダ内に貼り付けます。ファイル名をsub1.html とでも名前をつけておきます。このsub1.html をメモ帳で開いて、不要な部分を消して、新たに書き込んでいけばOK。これだけ^^。スタイルシートは共通に使えます。なので、トップページと同じようなレイアウトになります。 トップページとは違う文字色や背景を使いたい場合は、スタイルシートをコピーして、同じように貼り付けて、名前をmystyle2.css とでもして、スタイルシートの読み込みの設定(htmlソースの上のほうにある )のmystyle のところをmystyle2とすれば新たにスタイルシートを編集できます。 または、classというのを使うと、特定の範囲を指定して、色やサイズなどを指定することもできます。詳しくは「HTMLタグの森」でm(._.*)mペコッ では、同じやり方でもう一つのページを作りましょう。こちらはsub2.html としておきましょう。これで合計3ページができました。見本の完成版ではこのほかに、メールとBBS(掲示板)があります。

■リンクを使ってページ同士をつなげる

これらを、リンクを使ってつなげていきましょう。

まず、index.html をメモ帳で開いてください。上のほうにここからがメニューというところがあります。

その中の <a href=・・・・ というところがあります。 (*^_^*)もう気づいたかと思いますが、このソースには初めから sub1.html などのほかのページへのリンクが書き込んであります。なので、「ページの名前」というところにリンク先のページの名前等を入れてください。(日記とか、写真館など)

それから、メールは「ここにアドレス」というところにアドレスを入れるだけです。ただ、ここに入れるアドレスは公開されます。なので、フリーメール等を使うのをおすすめします。まぁ経験上いたずらはまず来ないけど。気になる場合はメールフォームというサービスを使うといいでしょう。「掲示板等の設置」に説明があります。

それから掲示板ですが、「最初からいらないよ」と言う人はなにか他のページに使っても構いません。てか、メニューは自由に使っていいですよ^^あくまでサンプルですから^^; 掲示板はいろいろなところで借りれますが、fc2 がわかりやすくて、おすすめです。掲示板は、もらったURL にリンクを張るだけです(豆知識参照)。ちなみに、このfc2 にはメールフォームのサービスもあるので、メールはそれを利用するのもいいかもしれません。このサイトでも利用していました。

また、fc2にはFC2ブログ というブログのサービスもあるので、こちらを使うのもいいかもしれません。

リンクの設定はすべてのページでする必要があります。じゃないと、他のページに行った後、戻ってこれなくなりますから(笑)ただ、今回はこのサイトのやり方であれば、リンクは設定済みなので、する必要ありません。一応実際にブラウザ上で、すべてのページにリンクが正しくされているかよく確認しましょう。

また、リンク集を作るのもいいですよ。オススメサイトなど、ほかのサイトへのリンクを集めたページにします。ぜひこのサイトへのリンクもお願いしますヾ(@^▽^@)ノわはは

また、逆にメニューが足りないようであれば、増やすこともできます。増やし方は・・・たぶんもうわかりますよね^^;
念のため、
<a href="ファイル名">ページ名</a>|

これをメニューのところに足せばいいだけです^^

ちなみに現在のフォルダのなかは下のような感じになってると思います。

フォルダー

あとは、それぞれのページに好きなものを書いたり、画像を貼り付けたりすれば完成です。本当はこのほかにもタグやスタイルシートの記述にはまだまだたくさんあります。でも、手をたくさんかけたからといって、すごいものができるとはかぎりません。ここで紹介したもので十分いいものが作れるはずです。

さらにステップアップしたい人は姉妹サイトの 「HTMLタグの森」や、「スタイルシートの森♪」で、ほかのタグを取り入れたり、また、 本を買うなり、いろんなサイトを見て、勉強するのも楽しいかもしれません。ホームページ作りは真似から入ることをおすすめします。きれいなサイトを真似てみる。そうするうちに自分の物になっていきます。とにかくたくさんのサイトを見ることをオススメします。

では、いよいよホームページを公開する手順について♪。

■ホームページのスペースを確保する

ホームページを公開するには、二つのものが必要です。まずは、サーバというホームページを置かせてもらう場所。もう一つはホームページのデータをサーバに送るためのソフトです。

前にも話しましたが、ホームページのスペースを無料で貸してくれるところはたくさんあります。自分が加入しているプロバイダーでもたぶんありますよ。

自分のプロバイダーの場合、広告などがつかないのでおすすめです。ただ、プロパイダーによって、送れるファイルの容量が違いますし、アフィリエイトが禁止のところが多いので、よく確認してからにしましょう。もしよくわからなければ、これから説明するものを利用すればいいと思いますよ。無料ですし^^♪

※追記です。プロパイダーがOCNという方は、サーバー容量が10Mバイト(最低レベル(汗)までと少ないので注意です。それから、申し込んでも実際使えるのは次の日になります・・・。(←どちらも今どきちょっとありえない(笑))

ここでは、fc2とヤフーでのやり方(どちらも無料)を説明します。こちらは即利用可能です。どこでもやり方は基本的に一緒です。yahooの場合、プロバイダーがヤフー以外の人が借りる場合、容量は50Mバイト、また、広告がつきます(結構大きめ)。無料サーバーの多くは広告を張るかわりに無料になるという仕組みです。

なので、広告が気になるのであれば、fc2がおすすめです。無料ですが広告はありません。fc2のロゴが小さく表示されるだけです。また、容量はなんと1G!!(こんなに使わんでしょ^^;)なので、余裕でしょう。ただ、ここは時間帯によってはページの表示が遅い場合があります。もし気になる場合は、yahooのほうにアップロードしてみて実際に表示させてみて比べてみればいいと思いますよ。それでどちらにすればいいか決めればいんです(^^♪。

別に登録したからといって、必ず使わなければいけないわけじゃないので^^ちなみにどちらも複数のID を取得できます。なので、好きなだけホームページの運営ができちゃいます(笑)ここから先はfc2でのやり方を取り上げるので、yahooの場合はこちらを参考にしてください。

また、お金を払って借りるレンタルサーバーていうのもあります。金額はサーバによって、さまざまで、安いところだと、月々200円台からあります。これには当然広告はつきませんし、容量も大きい、商用利用ができたり、表示が速い、CGI などのプログラムが使える、好きなアフィリエイト(※豆知識参照)が行える。などの特徴があります。どちらを選ぶかは、運営していくあなたの状況や、考え方次第なので、どちらがいいとは言えません。サーバーの選択の前に、豆知識の「サーバーの選び方」を一度見てみることをおすすめします。

また、ドメインを取得すれば、好きなURL にすることもできます。
ここでは、無料サーバーを使った説明をしています。(やり方は基本的に有料サーバーも同じです)

写真を使えば当然容量は増えますが、そもそも、あまり大きな写真は表示に時間がかかって、訪問者には迷惑に感じるでしょう。なので、写真もそれなりに加工する必要があります。ウインドウズ標準のペイントを使ってもサイズを縮めることができます。パソコンのモニター解像度は大きくても1280×1024の解像度なので、それ以上大きなものを載せてもあまり意味ないです・・・というか、実際は1024×768が多いので、大きくても幅が500px〜600px位にしましょう。 詳しくは「写真加工」のページを参考にしてください。

話がそれましたね^^;、では、fc2のサイトに行って、まずは無料会員登録をしましょう。
FC2WEB無料ホームページ
(※こういうのって、本当にタダなの?って思ってる方がいるかもしれないので、一応書きますが、
本当に無料です^_^; もし、お金取られたら、私を訴えてください(笑))

下の写真のようなところに行くので、新規登録を押して、必要な手続きをしてください。終わったら、メールが送られてくるので、そこから同じように必要な手続きをしてください。



必要な手続きが終わると下の画像のような画面にいくと思います。
ここで、「無料ホームページ登録」を押します。

下の画面に行くと思うので、必要項目を入力します。「希望アカウント」があなたのホームページのURL(アドレス)になりますので、好きな名前をつけましょう!右側にある「アカウントチェック」で取得できるか確認しましょう。URLは世界にひとつしか存在できませんので。
パスワードは結構ややこしいものを入力しないといけません。「パスワード強度」が「中」以上じゃないと登録できません。
そのほかの部分は適当でOKです^^

すると下の画面に行きますので、「管理画面」を開きましょう!

下の画面に行きます。こちらに大事な大事な(笑)自分のURLがありますので、お気に入りに入れておきましょう♪

また、上の画面上にFTP情報というものがあります。

これが超重要で、アップロードの際に使用するFTP情報というものが記載されています。
ホームページをサーバーにアップするにはこのFTP情報が必ず必要です。
むしろFTP情報さえあればサーバーに接続し、ホームページのデータをアップしたり、ダウンロードしたり、ほとんどすべての作業が行えます。

だから絶対誰にも教えちゃだめですよ^^;
FTP情報は上記の3点セットになります。これだけです^^
ちなみに同時にメールも届き、同じ情報が書いてます。
メールのまん中あたりに、次のようなところがあると思います。

サーバーにアップロードするのに使うのは、上の3ヵ所だけです。
ホスト名、ユーザ名、パスワード。この三つをメモするか、メモ帳にでも貼り付けて保存してください。
暗記できる方は暗記で(笑)

迷子になってよくわからないときは、http://id.fc2.com/ここがログインするためのページです。念のため(^_^.)
※ログイン情報とFTP情報は違いますからね^^注意してください。届いているメールに記載されてます

※2009年7月6日追記(重要)
ちょうど今、このページの作業したよ〜という方は関係ありませんので飛ばしてOKです。
あくまで、6月より前にFC2に登録した方が対象です。

FC2の仕様変更が6月に行われたようです。
それに伴い下記の「ユーザ名」がメールアドレスではなく、@とその後ろの部分を取り除いたものが「ユーザ名」に変更となったようです。(現在登録するとすでにそのようになってます)

順次導入ということで、すべての人に当てはまるかどうかはわかりませんが、つながらないなどの時はこちらを変更してみてください。
参考URL:fc2総合インフォメーション http://blog.fc2.com/info/blog-entry-379.html

では、次はいよいよサーバーにホームページをアップロードしますよ〜♪

Copyright(C)2007 3日で作るホームページ all rights reserved.