anchor link

Anchor Link

１　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"をクリックすると冒頭部分に戻るよう設計されています。

２　Anchor Link をBookmark1に使ってみる：

anchor link は上下にスクロールしなければならない長いホームページで威力を発揮しますから、Bookmark1を長いホームページにします。bookmark.htmを秀丸で開いて、最初の方の<div align="center"><center>の行から最後の方の</center></div>の行まで反転させます。キーボードの一番上にあるF8キーを一度押してコピーできるようにし、次に、右隣のF9キーを数回（５回くらい？）押して、貼り付けます。上書き保存をして、エクスプローラーでbookmark.htmをダブルクリックして、ネットスケープで開いてみてください。上下にスクロールしなければならない長いホームページになっているはずです。
長いホームページになっていることが確認できたら、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"のアンカーにジャンプするようになります。ここでは６つのアンカーを作ることを想定しています。"???"の部分は１番目のアンカーという意味で"a1"と記入しておきました（任意の文字列でも構いません）。
次に、最初に以下の２行がかかれている部分（元のbookmark.htmと１で最初に貼り付けたbookmark.htmの中身の境目）を探します。

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

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

     </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>

ここは最初のアンカーとなりますから、３行目の<a name="top">top</a>を<a name="a1">a1</a>と書き換えます。上書き保存して、Netscapeでalのアンカーリンクが機能するか確認してください。
同様に２番目の以下の２行がかかれている部分（元のbookmark.htmと１で２番目に貼り付けたbookmark.htmの中身の境目）を探します。

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

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

     </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>

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

３　Anchor LinkとHyper Linkを組み合わせる：

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

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

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