Anchor Link

[Back to: Compositin Home]

1 Anchor Link を使ったホームページの例:

 Anchor Link を使ったホームページの例として、二つ紹介します。このホームページ内にあるリンク集The Life of Bernard Malamudのページです。前者は[Top] [Search Engines] [Literary Resources] [ESL Resources] [End] のいずれかをクリックするとその項目に飛ぶことができます。後者は[1st 7yrs(1914-)] [2nd 7yrs(1922-)] [3rd 7yrs(1929-)] [4th 7yrs(1936-)] [ 5th 7yrs(1943-)]...のアンダーライン部分をクリックすると同じページにあるその年代の年譜に飛ぶことができ、そこの"7 years"をクリックすると冒頭部分に戻るよう設計されています。

2 Anchor Link をBookmark1に使ってみる:

  1. anchor link は上下にスクロールしなければならない長いホームページで威力を発揮しますから、Bookmark1を長いホームページにします。bookmark.htmを秀丸で開いて、最初の方の<div align="center"><center>の行から最後の方の</center></div>の行まで反転させます。キーボードの一番上にあるF8キーを一度押してコピーできるようにし、次に、右隣のF9キーを数回(5回くらい?)押して、貼り付けます。上書き保存をして、エクスプローラーでbookmark.htmをダブルクリックして、ネットスケープで開いてみてください。上下にスクロールしなければならない長いホームページになっているはずです。
  2. 長いホームページになっていることが確認できたら、bookmark.htmを秀丸で編集します。まず、ページの日付の下に、アンカー<a name="???"></a>とアンカーリンク<a href="#???">???</a>を貼っていきます。ページの最上部にある、以下の部分を探します。

         <p align="center"><font color="#C0C0C0" size="4">Last updated on October 1, 2000.</font></p>
         <div align="center"><center>


    その下に、以下のようにアンカー<a name="???"></a>とアンカーリンク<a href="#???">???</a>を貼っていきます。

         <p align="center"><font color="#C0C0C0" size="4">Last updated on October 1, 2000.</font></p>
         <div align="center"><center>
         <a name="top">top</a>
         <a href="#top">top</a>
         <a href="#a1">a1</a>
         <a href="#a2">a2</a>
         <a href="#a3">a3</a>
         <a href="#a4">a4</a>
         <a href="#a5">a5</a>
         <a href="#a6">a6</a>


    最初の<a name="top">top</a>は、これからページの下に作っていくアンカーリンク(次の行と同じ)の"top"というリンクをクリックしたときに、この行に画面が戻るようにするために作りました。次の行の<a href="#top">top</a>は、前行のアンカーにもどるためのアンカーリンクですから、本当はここでは必要ありませんが、この次の作業をするとき便利ですので、一応入れておきます。その下以下の行は、これから作るアンカーにジャンプするためのアンカーリンクです。例えば、"al"をクリックするとこれから作る"a1"のアンカーにジャンプするようになります。ここでは6つのアンカーを作ることを想定しています。"???"の部分は1番目のアンカーという意味で"a1"と記入しておきました(任意の文字列でも構いません)。

  3. 次に、最初に以下の2行がかかれている部分(元のbookmark.htmと1で最初に貼り付けたbookmark.htmの中身の境目)を探します。

         </center></div>
         <div align="center"><center>


    そこに2で作ったアンカーとアンカーリンクを以下のように貼り付けます。

         </center></div>
         <div align="center"><center>
         <a name="top">top</a>
         <a href="#top">top</a>
         <a href="#a1">a1</a>
         <a href="#a2">a2</a>
         <a href="#a3">a3</a>
         <a href="#a4">a4</a>
         <a href="#a5">a5</a>
         <a href="#a6">a6</a>


    ここは最初のアンカーとなりますから、3行目の<a name="top">top</a><a name="a1">a1</a>と書き換えます。上書き保存して、Netscapeでalのアンカーリンクが機能するか確認してください。

  4. 同様に2番目の以下の2行がかかれている部分(元のbookmark.htmと1で2番目に貼り付けたbookmark.htmの中身の境目)を探します。

         </center></div>
         <div align="center"><center>


    そこに2で作ったアンカーとアンカーリンクを以下のように貼り付けます。

         </center></div>
         <div align="center"><center>
         <a name="top">top</a>
         <a href="#top">top</a>
         <a href="#a1">a1</a>
         <a href="#a2">a2</a>
         <a href="#a3">a3</a>
         <a href="#a4">a4</a>
         <a href="#a5">a5</a>
         <a href="#a6">a6</a>


    ここは2番目のアンカーとなりますから、3行目の<a name="top">top</a><a name="a2">a2</a>と書き換えます。3と同じく、やはり、上書き保存して、Netscapeでa2のアンカーリンクが機能するか確認してください。

  5. 同様に、3番目、4番目・・・のアンカーを貼る箇所を見つけて、同じ作業を繰り返します。3行目の<a name="top">top</a>だけは、アンカーとして機能させるため、"top"を"a3", "a4"...のように書き換える必要があります。ただし、この部分は<a name="top"></a>のように、2番目のtopは省いても構いません。
    また、<a name="top">US Film</a>のように任意の文字列を入れられます。同様に、4行目以降のアンカーリンク<a href="#a1">a1</a>でも、2番目のalは<a href="#a1">US Culture in General</a>のように任意の文字列を入れられます。要するに<a name="film"></a>というアンカーを作り、そこにジャンプさせようとするには、<a href="#film">US Film</a>のようにアンカーの文字列とアンカーリンクの#のあとの文字列が一致していれば良いのです。

3 Anchor LinkとHyper Linkを組み合わせる:

Anchor LinkとHyper Linkを組み合わせることにより、別のホームページのアンカーを貼ったところにジャンプさせる裏技?もあります。「例えば、ここをクリックしてみてください。」別なページの下の方にジャンプするはずです。これは"schlml1.htm"というページに<a name="nude"></a>というアンカーが貼ってあるので、そこにジャンプしたのです。このタグは簡単で、以下のように普通のハイパーリンクのファイル名のあとにシャープを付けてアンカー名を入力すればよいのです:

     例えば、<a href="../schlml1.htm#nude" target="pic">ここをクリック</a>してみてください。

このテクニックをふんだんに使ったページがありますので、参考にしてください。