Webサイトを作ろう! 【 9 】複数ページを作る

    icon-clock-o読了時間:約13分5秒

前回 【 8 】HTMLソースコードの解説② までの記事で、
どうにかこうにかトップページを作るところまでのご説明ができたかと思います。
(たぶん。不足していたら申し訳ないです・・・!)
今回からはトップページ以外のページを作ってリンクで繋げていきます。

 目次 

新しいテキストファイルを作る

更新情報 news.html
  ∟一つずつ更新の度に文書として追加する方法
  ∟更新プログラムを設置する方法

文書 text.html book.html
  ∟CSS装飾なしの場合
  ∟CSS装飾ありの場合

画像 photo.html
  ∟CSS装飾なしの場合
  ∟CSS装飾ありの場合

問い合わせ mail.html
  ∟メーラー起動のリンク
  ∟メールフォームのプログラムを設置

リンク link.html

新しいテキストファイルを作る

これまで、トップページを 『 index.html 』 として作成・保存・アップロードしてきました。
今度はトップページ以外のページを作りましょう。

最終的にはこんな感じのサイトを目指すことにします。
トップINDEXページ

ここで必要となるファイルは最低6つ。
上図のindex.htmlとの繋がりをファイル名だけで示すとこんな感じです。
index.html
  ∟news.html
  ∟text.html
     ∟book.html
  ∟photo.html
  ∟mail.html
  ∟link.html

それぞれのページを簡単に解説します。
『 ○○.html 』というファイル名は一例に過ぎませんので、
実際には皆さんの作りたいサイトの構成に添ってお好みで変更してくださいね d(・∀・*)

更新情報 news.html

頻繁に更新され、しかもページ数も多いサイトなどであれば、訪問者にとって更新情報のページは便利なものです。
訪問者の使い勝手が良くなることはもちろんですが、運営側にとっても
更新したことを知って貰い、新しいページを見に来てくれる人が増えるかもしれないというメリットがあります。
また、短いお知らせを頻繁に更新するようであれば、別のページとして用意しなくても
トップページの1コーナーとして表示しても良いですね。

一つずつ更新の度に文書として追加する方法

地道にその都度、文章を追加していく方法です。
一番簡単といえば簡単ですが、いちいちファイルを修正してアップロードし直さないといけないのが面倒です。
更新情報01
この場合は見出しタグで『 更新情報 』というタイトルを書き、
リストタグで更新情報を並べていっています。

更新プログラムを設置する方法

専用のプログラムをサイト内に設置して、Web上で情報の書き換えを行う方法です。
自分のサイトからすぐに編集・反映させることができて便利です。
更新情報02
例えば弊社の更新情報CGIプログラムCGI-design様よりお借りしています。

GI-design様が扱っているプログラムの中にはライセンス契約が有料のものもありますが、
基本的には無料で様々なプログラムを提供してくださっていますし、
CGIプログラムの設置方法も丁寧に記載されているので、サイト作成の参考になることも多いかと思います。

CGIプログラムの設置についてご注意

CGIについて詳しくなくても、色々なサイトさんで設置方法や解説を見ていただくと
設置・運営する程度であれば問題ないと思います。
ただ、適当に設置しようとして設定を間違えたり、改造しようと思って記述を間違えたりすると
サーバー側に負荷をかけてダウンさせてしまう可能性もあります。
サーバーをダウンさせると、自分と同じサーバーを借りている人達のサイトもアクセスできなくなり、
多くのひとにとんでもない迷惑をかけてしまうことになります。
逆になかなかそこまでの大きな失敗をしてしまうことも無いとは思うのですが、
その可能性もゼロではないとご留意いただいて、じっくり説明を読んでから慎重に設定を行うようにしましょう。

また、パーミッション設定について等の情報はサーバー管理会社の『 よくある質問 』に記載があると思います。
他にも不安な部分があれば事前にサーバー管理会社のサポートに尋ねるなどしましょう。

頑張ってみたけどムリっぽい、でもどうしてもこのプログラムを使いたい、という場合には
作成者さんが有料で設置依頼を受けてくれていることもあるのでご検討ください。

文書 text.html book.html

文書、もしくは文章。英語で言えばテキスト。
これがメインのサイトさんも多いのではないでしょうか。

ブログサイト、ニュースサイト、企業サイトなどなど。
様々なサイトで情報を伝えるために一番使われる手段がテキストですね。
企業情報であっても、個人の趣味ブログであっても、どうせなら来てくれたひとに
読みやすい、面白いと思ってもらえるサイトになりたいところです。
見出し、段落、改行、下線、太字などの装飾も使いつつ、出来るだけ誤字脱字の無いサイトを目指しましょう。

CSS装飾なしの場合

例えばこちらは弊社サイトの パソコン修理関連用語について の文章を抜き出したものですが、
例としてCSSスタイルシートによる装飾を一切せず、デフォルトのままで
見出しタグ<h>と段落タグ<p>のみを使用した状態です。
テキスト装飾前

CSS装飾ありの場合

今度はタグに加えてCSSも適用してみました。
上の装飾なしのものと見比べてみてください。
テキスト装飾後
・見出しタグ<h1> の文字フォントをメイリオに変更、文字サイズ変更
・見出しタグ<h2> の配色変更、サイズ変更
・段落タグ<p> の文字間を調整、行高さを設定、インデントを設定、幅を90%に設定
・太字タグを適用
・一部文字カラーを青に設定、など。
少し手を加えただけでかなり見た目が変わったのがお分かりいただけると思います。
別記事にてCSSの設定についても詳しくご説明しますので、お好みで色々試してみてくださいね。
 ⇒ 【 12 】スタイルシート(CSS)の解説

画像 photo.html

自分の用意した画像や写真を展示したい場合。
画像タグでそのまま掲載したり、枠で装飾してみたり、数枚を綺麗に並べてみたりと
テキストと同じく、こだわればキリが無いところでもあります。

CSS装飾なしの場合

画像の大きさがバラけてちょっと不恰好ですね。
それに隙間が無いので見づらくなっています。
装飾前の画像

CSS装飾ありの場合

枠をつけて、大きさと上下左右の余白を設定しました。
写真風になってちょっとオシャレ。
装飾後の画像1

今度は四隅を丸めてみました。
ネットショップの商品カテゴリ画像などにも使えそうな感じです。
装飾後の画像2
このようにCSSのスタイルシートはテキストだけでなく画像についても様々な設定を行うことができます。
 ⇒ 【 12 】スタイルシート(CSS)の解説

問い合わせ mail.html

特に企業のサイトであれば、訪問者の信頼を得るために
問い合わせ先や会社所在地などははっきりと明記しておくべきですね。

個人のサイトであっても、何らかの問題があったときに
すぐに対応するために最低限メールフォームくらいは設置しておきましょう。
例えば知らず知らずの内に著作権侵害を行っていて、メールフォームを置いていなかったために
警告のメールを受け取れず、気づけば訴訟問題、なんてことになったら大変です。
トップページ作成のコーナーで記したように
メールを送るためのリンクのみ記載するという方法もあります。

メーラー起動のリンク

メール送信のリンクタグを設置しておくと、閲覧者がリンクをクリックするだけで、
閲覧者側のメールソフトが起動しメールを送る準備ができます。

ネット上の実際の表示はこうなります。
メールを送る

メールの件名・本文も予め入れたい場合は項目を追加します。

実際の表示はこんな感じです。
メールを送る
表示されている文字は上のリンクと変わりませんが、実際に起動すると
件名や本文メッセージが入った状態でメールソフトが起動します。

上記のいずれのメールリンクも、クリックすると私のメールアドレスが入った状態で新規メール画面が起動します。
もちろん『 送信 』を押さない限りはメール送信されませんし、どなたがリンクをクリックしたかといった
情報がこちらに伝わることもありませんので、試しにご遠慮なくクリックしてみてください。

メールフォームのプログラムを設置

メールのリンクタグだけでなく、細かい設定をしたメールフォームを設置したい場合には
更新情報のCGIプログラムと同じく、専用のプログラムを設定・設置する必要があります。
メールフォームはPHP言語のプログラムか、CGI(Perl言語)のプログラムが主です。
私のイメージだとPHPは動作速度が速く、CGIだと自由度が高いといったそれぞれのメリットがあるように思います。
と言っても体感としてそれほど違いがある訳でもないので、なんとなくお好みのプログラムを選んでいただければ。

以下に個人的におすすめのメールフォームプログラムの提供サイト様をご紹介します。
まずご自分の借りているサーバーがそのプログラム言語に対応しているか、
問題なく設置できそうか等、詳細を確認して、各サイトさんの規約と説明を良く読んでから
慎重に設置を行ってくださいね。

FC2メールフォーム

商用・非商用に関わらず無償で利用できますが、無料のコースでは広告が表示されます。
有料契約を行うと広告非表示、商品注文フォームなどが利用可能になるようです。
予め用意されたテンプレートも豊富で設定も簡単と評判です。
確かに機能と設定しやすさを考えると、広告を我慢できるのであればこれが一番簡単な感じがします。

魔法のメールフォーム Magical Form

商用・非商用に関わらず無償で利用できます。
利用ガイドが編集中なので、ある程度は自力でなんとかできるひと向けかもしれません。

KENT-WEBフォームメール POST-MAIL

商用・非商用に関わらず無償で利用できます。
KENT-WEBさんは有名なフリーソフト配布サイト様で利用者も多いため、
公式の設置説明以外にも一般のサイトさんで使用方法やエラー例を説明してくださっていることがあります。

シンクグラフィカ メールフォームCGI

商用・非商用に関わらず無償で利用できます。
設置マニュアルが丁寧かつ面白いので好きです。
また、なんだかものすごい進化を遂げて機能が追加された メールフォームプロCGI もあります。

リンク link.html

Web上でのサイト同士の繋がりをリンクと呼びます。
企業サイトであれば、提携している企業や取引先へのリンクを貼っていることが多いですね。
個人サイトでのリンク先としては
・相互リンクしている知人のサイト
・素材やプログラムを借りてお世話になっているサイト
・個人的に好きだからリンクを貼っているサイト
・登録しているランキングやリンク集 などでしょうか。

一方的にリンクを貼る場合は、リンクした相手のご迷惑にならないように
相手方の規約を良く読んでからにしましょう。
サイトによっては
・リンクフリーでない(リンクを無断で貼ってはいけない、リンクの一切を禁止している)
・リンクの際には報告が必須
・リンクを貼るURLはトップページで!その他のページはリンク禁止!
といった注意事項を明記している場合があります。
また、リンク先ではリンク先の規約に従うように注意書きも添えておくといいかと思います。
 ⇒ インターネット・リテラシーを大切に(編集中)

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket