サイトを運営するにあたり、避けて通れないタグの一つがリンクタグです。こちらのチュートリアルではこのタグについて説明していきます。これが理解できれば、同じ方法である画像タグやスクリプト呼び出しタグも理解したことになります。
1) タグとは先ほど紹介した、<と>に囲まれている
<br>
や
<div class="○○">
のことです。ブラウザに『ここはこうするよ』と命令を伝えるものです。タグは種類が様々ですが、今はリンクタグに集中しましょう。リンクタグで相互サイトや小説ページへのリンクを貼ります。主にリンクタグは新たな窓を開かない
<a href="○○">□□</a>
か、新たな窓を開く
<a href="○○" target="_blank">□□</a>
と表示します。ですので、それと似たような箇所を探します。右の画像ではリンクタグが3箇所ありました。
2) デフォルトで用意されているリンクタグは、要らなければ削除してしまって構いません。削除する際は
<a href="○○">□□</a>
ごと削除します。
3) もっとリンクを貼りたい場合。これは相手側のリンクを貼るのか、あなたのサイト内のリンクを貼るのかで異なってきます。相手側のリンクを貼るのは単純です。左の図のように増やしていきます。例として、今回はGoogleさんをリンクしてみました。
<a href="http://google.com" target="_blank">Google</a>
相手のリンクを貼るとき、大抵はtarget="_blank"を入れますが、これは好みで構いません。相互リンクを貼る場合、こちらが基本となります。
4) あなたのサイト内のリンクを貼る場合。こちらは、Googleのhttp://google.comのようにhttp://から始まるURLアドレスを入力する必要はありません。代わりに、サイト内のフォルダ名とファイル名を使用していきます。少々複雑ですが、これを知っておけば引っ越しのとき、初心者が陥りやすい『リンク編集の手間』を味わず、ワンステップで終了します。必ず覚えておきましょう。それでは、いま一度。ダウンロードしたテンプレートにどんなファイルがあるか確認します。
5) 確認したら、リンクを貼るファイルを決めます。例の一つとして、index.htmlにdream.htmlへのサイト内リンクを貼る場合は
<a href="dream.html">夢小説</a>
となります。このとき、index.htmlとdream.htmlは同じ場所（1層）にあります。
6) index.htmlからフォルダの中に入っているファイルにリンクしたい場合は、『フォルダ名/ファイル名』でリンクを貼ります。例として、longフォルダの中にある2sou.htmlファイルにリンクする場合は
<a href="long/2sou.html">2層</a>
となります。同じく、index.htmlから3sou.htmlにリンクしたい場合は、
<a href="long/rensaititle/3sou.html">3層</a>
になります。
7) ここが少々ややこしいのですが、反対に、2sou.htmlからindex.htmlをリンクしたい場合は、2層から1層へ
上がる（1フォルダ挟む）という意味で、フォルダ名の代わりに『../』を1回入れます。
<a href="../index.html">トップ</a>
3sou.htmlからindex.htmlをリンクする場合は、3層から1層へ上がるので（2フォルダ挟むので）、『../』を2回。
<a href="../../index.html">トップ</a>
まとめると。
上から下の層に行くときは『フォルダ名』を使い。
<a href="long/2sou.html">2層</a>
下から上の層に行くときは挟んだフォルダ分『../』を入れる。
<a href="../index.html">トップ</a>
同じ層内のリンクの時はどちらも使わないで、dream.htmlなどのファイル名のみを使う。
<a href="index.html">トップ</a>
8) なお、3sou.htmlからimgフォルダの中のimg2sou.htmlへリンクしたい場合は、一度、3層から1層へ戻ってから、目的のフォルダ名とファイル名を入れます。ですので、
<a href="../../img/img2sou.html">img2層</a>
になります。
リンクタグが終了したら、次は画像を表示する、画像タグのチュートリアルへと進みます。こちらはリンクタグと全く同じ作業で、今回の応用編となります。同時にページ内リンクのチュートリアルも進めていきます。
