2. Edit Website
2-4.リンク集を作成
index.htmlがなんとなく形になった所で、さっそくコンテンツ制作に とりかかりましょう。一番最初に挑戦したいのは「リンク集」ですね。 これが一番簡単で、一番ホームページ作りの練習になるんです(^-^)リンク集には、貴方のお勧めサイトをリストアップするのが一般的です。 例えば、今回のぷう太郎の「楽しく貧乏！」サイトの場合、訪問者は恐らく 「貧乏」というキーワードに期待して訪問してくれていると思われます。 ですので、ぷう太郎は「貧乏」に関連するお気に入りサイトをいくつか ピックアップして、それをリンク集に載せる事にしました。
先に、コンテンツ専用のフォルダを作る
その前にしておく事がひとつ。コンテンツを作る時になるべく心がけて おきたいのが、あらかじめ、コンテンツ専用のフォルダを作っておく という事です。つまり今回は「リンク集」を作りたいわけですから、 「website」フォルダの中に、リンク集専用の「link」というフォルダ を作成しておく事をお勧めします。これは、後々、リンク専用のページが 2ページ3ページと増えてきた場合に、他のリンク以外のコンテンツと ごちゃまぜにならないための配慮です。そして、肝心のリンク集のファイル は、「mylink.html」というファイル名にでもして、「link」フォルダの 中に入れておきましょう。すると、現在のぷう太郎のフォルダ状況は次のようになります。
website
index.html
link ----- mylink.html※今後も、同じようにしてコンテンツの項目別にフォルダを作って 整理していきます。
リンク集の作り方
準備が出来たところで、早速mylink.htmlを作ってみましょう。ぷう太郎は 貧乏関連のお気に入りサイトを３つ、リンクに載せることにしました。★ 他サイトへのリンク
リンク集に不可欠な「他サイトへのリンク」をしているタグは
<a href="http://URL" target="_top">リンク文字(サイト名)</a> の部分です。A HREFの後にリンク先への正確なURLを記述すればOK。さらに、 リンク文字(クリックできるようになる文字)を忘れずに指定して下さい。 ちなみに、今回の３つのリンク先はダミーではなく本物の貧乏関係の 実在サイトです(^^;)。かなり面白いので時間のある方は是非覗いてみてください。
なお、target="_top"とは何ぞや？と思われた方。この記述は、現時点では あってもなくても関係ないのですが、後に、フレームを用いた時に 役立つことになります。(target="_top"と記述する事によって、フレームの 影響を受けずに新規サイトへジャンプする事が出来るようになるのです。)
★ 自サイトへのリンク
自サイトへのリンクはもっと簡単です。たとえば今回の例では 「トップページ(index.html)へ戻る」というリンクを付けました。 それは<a href="../index.html">トップへ戻る</a> という記述になります。
では、../index.htmlの../とは何か？これは、 「ひとつ上のフォルダの中の」という意味なんです。思い出してみると、 現在見ているmylink.htmlは「link」フォルダの中に入っています。 一方、index.htmlはひとつ上の階層の「website」フォルダの中です。 ですから、../index.htmlの意味は、「今いるフォルダからひとつ上の フォルダの中の、index.htmlを参照せよ」という事になります。 ちなみに、２つ上のフォルダを指す時は../../になります。 このルールは何度も使うので是非覚えておいてください。
ページの見栄えを良くする
さて、とりあえずリンク集が出来たは良いけど、なんかイマイチ見栄えが しないなぁ、と思ったぷう太郎。ページをもうちょっとカッコ良くして 見る事にしました。どうでしょう？だいぶスッキリした感じになったと思いませんか？ これはリンク色の変更と、テーブル機能を使ってみたものです。
★ リンクの色を変更する
リンク文字の色を好きな色に変更できます。場所は<body>タグの中。 link=#FF4444 vlink=#FF8844 alink=#0000FFと記述してある 箇所がそうです。linkは「未訪問時のリンク色」、vlinkは「訪問済みのリンク色」、 alinkは「クリックした時のリンク色」を表わしています。詳しくは 4-B. タグ辞典の<body>項目にも載っています。(お好みの色は 4-A. HTMLの色見本で探してください)
★ TABLEタグでのレイアウト
<table>タグというのは本来は表を作成する為の機能なんですが、 ちょっとした使い方でページをキリっと引き締めてくれる、頼もしい存在です。 tableタグは一見複雑そうに見えますが、内容を理解すれば実にシンプル。 まず<table>～</table>に囲まれた部分が「表」の領域になります。 さらに<tr>～</tr>で囲まれた部分が「表の行」を、 <td>～</td>で囲まれた部分が「表の列」を表わす仕組みに なっています。(詳しい説明は4-B. タグ辞典の<table>項目を ご覧ください)
しかし今回の場合は、ページをキレイに見せるために、いろいろなオプションを つけています。例えば<table border=0 width=70% cellpadding=10> はどういう意味かというと、
・border=0 は「表の境界線を表示しない」です。試しにborder=1とやってみると、境界線が表示されますよ(^^)
・width=70% は「表の幅はブラウザ幅の70%」です。100%や20%なども試してみて下さい。%を付けないとピクセル数指定となります
・cellpadding=10は「表の端から10ピクセルの余白マージンをとる」です。これがないと、文字が表の端にぴったりくっつく事になります。
表の内側の色も変更できます。それをやっているのは<td bgcolor=#FFFFCC> の部分です。<td>タグに<body>タグの時と同じようなbgcolor属性を 使っている訳ですね。
★ コメントを付ける
コメントというのは、ソース中に残したいけどブラウザに表示させたくない 「メモ」の事です。今回の場合は、<!--↓のtable用のセンタリング--> というのがそれです。<!-- ～ -->に囲まれた部分はブラウザには表示 されません。
トップページからリンクさせる
気付いた方も多いと思われますが、今回のサンプルの最大の弱点は、 「トップページまではジャンプできるようになったけど、トップページからは リンク集へジャンプできない」ことです。ということは、トップページ(index.html) からも、リンク集(mylink.html)へのリンクを作らなければならない、という事ですね。 ではindex.html改良版のサンプルを見てみましょう。★ 自サイトへのリンク その２
今回index.htmlからmylink.htmlへのリンクをするにあたり、 <a href="link/mylink.html">5.貧乏リンク集</a> という記述になっています。これは「現在のフォルダの中の linkというフォルダの中のmylink.htmlを参照せよ」という意味になります。 下層のフォルダ内を参照する場合は、フォルダ名を指定するだけで良いんですね。 なんだかURLの書き方に似ていると思いませんか？
★ それ以外のタグは
上記以外のタグについての意味が知りたい方は、これまでの 解説ページに戻って復習するか、 4-B. HTMLタグ辞典を活用して下さい。
いや～、今回は盛りだくさんでした！どうもお疲れ様でした(^o^)/ でもイイトコ取りしてるので実はとっても近道してると思いますょ！ 次からは画像を使う事になります。その前にゆっくり休憩して下さい。