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

WEBサイト作り方

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

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

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

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

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

ファイルの構成
index.html
  ∟news.html
  ∟text.html
     ∟book.html
  ∟photo.html
  ∟mail.html
  ∟link.html

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

更新情報 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

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

メーラー起動のリンク

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

メールリンク
<a href=”mailto:メールアドレス”>表示する文字</a>
<!– 例えばこんな感じ –>
<a href=”mailto:info2@pc-pier.com”>メールを送る</a>
ネット上の実際の表示はこうなります。
メールを送る

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

メールリンク②
<a href=”mailto:メールアドレス?subject=件名&body=本文”>表示する文字</a>
<!– 例えばこんな感じ –>
<a href=”mailto:info2@pc-pier.com?subject=ブログについてお問合せ&body=お問い合わせ内容を記載してください。”>メールを送る</a>
実際の表示はこんな感じです。
メールを送る
表示されている文字は上のリンクと変わりませんが、実際に起動すると件名や本文メッセージが入った状態でメールソフトが起動します。

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

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

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

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

FC2メールフォーム

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

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

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

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

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

リンク link.html

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

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

また、リンク先ではリンク先の規約に従うように注意書きも添えておくといいかと思います。
 ⇒ インターネット・リテラシーを大切に

Webサイトを作ろう!:シリーズ記事

【1】レンタルサーバーとドメイン
【2】必要なソフトを準備する
【3】ページの構成を考える
【4】テーマカラーを決める
【5】トップページと画像を用意
【6】トップページの一例
【7】HTMLソースコードの解説①
【8】HTMLソースコードの解説②
【9】複数ページを作る(この記事です)
【10】横並びメニューをCSSで作る
【11】縦並びメニューをCSSで作る
【12】スタイルシート(CSS)の解説
【 番外編1 】画像編集ソフト・素材サイト
【 番外編2 】商用利用OKな無料素材
「Webサイトはこうしてもらえると嬉しい」という個人的な希望

タイトルとURLをコピーしました