![[ EP: 科学に佇む心と身体 ]](http://homepage1.nifty.com/NewSphere/transparent.gif)
次の記事
カテゴリ[通知や余談（暫定エントリ）]
2008/08/08
最近、うちのページ宛のリンクで、リンク先が微妙にずれているリンクをお使いになられるケースが多いので、URLの微妙な違いをご存じない方が多くなってきているのかな、と、たまにはこんなHTMLのお話を置いておきます。
チョー初心者向けのお話です。m(__)m
一つのページの中に、
第１章 ピンポイントリンクの実例
第２章 ピンポイントリンクの見分け方
第３章 ピンポイントリンクを設置しよう
第４章 「科学に佇む」のピンポイントリンク各種
という項目が書かれているとして、それぞれの章の位置にピンポイントでリンクする方法があります。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
まず実例。
●NHKクローズアップ現代の放送記録ページをご覧下さい。
クローズアップ現代 2008年7月第３週放送記録
上端に「１４日（月）、１５日（火）、１６日（水）、１７日（木）」と日付ごとのリンクが並んでいます。クリックをすると、同じページ内の該当項目にジャンプします。
ジャンプ先の各項目の右には、ページの上端に戻れる「↑このページトップに戻る」リンクもあります。便利ですね。
... 以下つづき...
『 幸福論リミックス 』
ページ内のリンクをクリックしてみて下さい。あっちゃこっちゃにピンポイントにジャンプします。
このピンポイントリンクは、すごーく基本的なウェブページの機能（HTML）でして、昔からいろんなサイトで使われています。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
普通のリンクなら、ジャンプした先のページは上端が表示されます。
ピンポイントリンクは、ページの途中の該当個所にまで下がった状態で、ジャンプ先ページが表示されます。
何がどう違うリンクの仕組みになっているんでしょう。
●NHKクローズアップ現代の放送記録ページをご覧下さい。
クローズアップ現代 2008年7月第３週放送記録
日付リンクとトップ戻りリンクのURLはどうなっているでしょう。
マウスカーソルをリンクの上にかざすと、ブラウザの下端にリンク先のURLが表示されます。（もしくはリンク先のURLをコピーしてテキストエディタ上で比較してみてもいい）
「2008年7月第３週放送記録」ページ自体のURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html
日付リンクのURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html#tue
トップ戻りリンクのURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html#top
そう。URLのお尻に「#」マークのついた文字列がくっついています。
URLの末尾に「#」マーク＋文字列があると、ピンポイントリンクなんですね。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
ピンポイントリンクは、ジャンプ先の該当箇所にあらかじめ「タグ（アンカーリンクタグ）」を埋め込んでおけば、機能します。
例えば、今ご覧になっているこのページでは 「第２章」に「second」というタグ名をつけてあります。
ジャンプ先のページの該当個所のソースに
<a name="second"></A>
と隠しタグを入れておけば、
<a href="http://ep.blog12.fc2.com/blog-entry-1173.html#second">第２章</A>
と、「#second」を追記したURLでピンポイントジャンプできるようになります。
超初心者向けなので、ページアドレスはいらんやんというツッコミはスルーでお願い
●NHKクローズアップ現代の放送記録ページで言えば、
木曜日の箇所に、 <a name="tue"></A>
ページの上端に、 <a name="top"></A>
それぞれ「タグ（アンカーリンクタグ）」が埋め込んであるんですね。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
うちは、
のアイコンの箇所に「タグ（アンカーリンクタグ）」を埋め込んでいます。アイコンにつけてあるリンクがピンポイントリンク用のURLです。
ほかに、ブログの仕様として、（■にはそれぞれの記事番号が入る）
「続きを読む」 記事の後半から表示する
http://ep.blog12.fc2.com/blog-entry-■.html#more
「コメント」 コメントのカキコに移動する
http://ep.blog12.fc2.com/blog-entry-■.html#commenter
などもあります。
たまに
「治安悪化の百人村現象」
http://ep.blog12.fc2.com/blog-entry-947.html#100
を紹介しようとして
「自分で自分の首を絞める民意の時代」
http://ep.blog12.fc2.com/blog-entry-947.html#min
にリンクしてしまっている人とか、
「偏見が成績を下げる」
http://ep.blog12.fc2.com/blog-entry-1077.html#stereotype
を紹介しようとして
「追記」
http://ep.blog12.fc2.com/blog-entry-1077.html#follow
にリンクしてしまっている人とかいらっしゃるので、ごめんね混乱させて ということで、いまさらながら、
●URLでちゃんとジャンプできるか確認してね
●URLの「#」有無を確認してみてね
●アイコン宛にピンポイントリンクできますよ
以上、ピンポイントリンク機能のご紹介でした。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
チョー初心者向けのお話です。m(__)m
一つのページの中に、
第１章 ピンポイントリンクの実例
第２章 ピンポイントリンクの見分け方
第３章 ピンポイントリンクを設置しよう
第４章 「科学に佇む」のピンポイントリンク各種
という項目が書かれているとして、それぞれの章の位置にピンポイントでリンクする方法があります。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
【第１章 ピンポイントリンクの実例】
まず実例。
●NHKクローズアップ現代の放送記録ページをご覧下さい。
クローズアップ現代 2008年7月第３週放送記録 上端に「１４日（月）、１５日（火）、１６日（水）、１７日（木）」と日付ごとのリンクが並んでいます。クリックをすると、同じページ内の該当項目にジャンプします。
ジャンプ先の各項目の右には、ページの上端に戻れる「↑このページトップに戻る」リンクもあります。便利ですね。
... 以下つづき...
『 幸福論リミックス 』 ページ内のリンクをクリックしてみて下さい。あっちゃこっちゃにピンポイントにジャンプします。
このピンポイントリンクは、すごーく基本的なウェブページの機能（HTML）でして、昔からいろんなサイトで使われています。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
【第２章 ピンポイントリンクの見分け方】
普通のリンクなら、ジャンプした先のページは上端が表示されます。
ピンポイントリンクは、ページの途中の該当個所にまで下がった状態で、ジャンプ先ページが表示されます。
何がどう違うリンクの仕組みになっているんでしょう。
●NHKクローズアップ現代の放送記録ページをご覧下さい。
クローズアップ現代 2008年7月第３週放送記録 日付リンクとトップ戻りリンクのURLはどうなっているでしょう。
マウスカーソルをリンクの上にかざすと、ブラウザの下端にリンク先のURLが表示されます。（もしくはリンク先のURLをコピーしてテキストエディタ上で比較してみてもいい）
「2008年7月第３週放送記録」ページ自体のURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html
日付リンクのURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html#tue
トップ戻りリンクのURL
http://www.nhk.or.jp/gendai/kiroku2008/0807-3.html#top
そう。URLのお尻に「#」マークのついた文字列がくっついています。
URLの末尾に「#」マーク＋文字列があると、ピンポイントリンクなんですね。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
【第３章 ピンポイントリンクを設置しよう】
ピンポイントリンクは、ジャンプ先の該当箇所にあらかじめ「タグ（アンカーリンクタグ）」を埋め込んでおけば、機能します。
例えば、今ご覧になっているこのページでは 「第２章」に「second」というタグ名をつけてあります。
ジャンプ先のページの該当個所のソースに
<a name="second"></A>
と隠しタグを入れておけば、
<a href="http://ep.blog12.fc2.com/blog-entry-1173.html#second">第２章</A>
と、「#second」を追記したURLでピンポイントジャンプできるようになります。
超初心者向けなので、ページアドレスはいらんやんというツッコミはスルーでお願い
●NHKクローズアップ現代の放送記録ページで言えば、
木曜日の箇所に、 <a name="tue"></A>
ページの上端に、 <a name="top"></A>
それぞれ「タグ（アンカーリンクタグ）」が埋め込んであるんですね。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
【科学に佇む」ブログのピンポイントリンク各種】
うちは、
のアイコンの箇所に「タグ（アンカーリンクタグ）」を埋め込んでいます。
アイコンにつけてあるリンクがピンポイントリンク用のURLです。ほかに、ブログの仕様として、（■にはそれぞれの記事番号が入る）
「続きを読む」 記事の後半から表示する
http://ep.blog12.fc2.com/blog-entry-■.html#more
「コメント」 コメントのカキコに移動する
http://ep.blog12.fc2.com/blog-entry-■.html#commenter
などもあります。
たまに
「治安悪化の百人村現象」
http://ep.blog12.fc2.com/blog-entry-947.html#100
を紹介しようとして
「自分で自分の首を絞める民意の時代」
http://ep.blog12.fc2.com/blog-entry-947.html#min
にリンクしてしまっている人とか、
「偏見が成績を下げる」
http://ep.blog12.fc2.com/blog-entry-1077.html#stereotype
を紹介しようとして
「追記」
http://ep.blog12.fc2.com/blog-entry-1077.html#follow
にリンクしてしまっている人とかいらっしゃるので、ごめんね混乱させて ということで、いまさらながら、
●URLでちゃんとジャンプできるか確認してね
●URLの「#」有無を確認してみてね
●
アイコン宛にピンポイントリンクできますよ以上、ピンポイントリンク機能のご紹介でした。
（「ピンポイントリンク」と表記していますが、正しくは「アンカーリンクタグ」と言います。だって「アンカーリンクタグ」じゃ微妙に意味がわかりにくいんだもん。「ピンポイントリンク」は、正しくは「アンカーリンクタグ／アンカータグ」です）
iTatazm [たたずむ] 
