極意(5)目から鱗のアンカーの話

QHM の編集で、ページ内の特定の見出しにリンクさせたい場合があります。
実際例として、下記の「アンカーによる特定の見出しのリンク例」をクリックしてみて下さい。すると、このページの見出し「自分でアンカーを設定する」にジャンプしている筈です。
この例がアンカーを使ったリンクの代表例です。勿論、アンカーによるジャンプは同一ページだけでなく他のページの特定の見出しにもジャンプすることができます。


アンカーとは

ページ内リンクのことを、HTMLでは「アンカー」と言います。
元々「アンカー」とは、船などの碇(いかり)のことで、目印と理解すればいいでしょう。では、そのページ内リンクとは何ぞや?
単純にページを移動するだけでなく、ページ内の特定の場所まで移動させるリンクのことを「ページ内リンク」=「アンカー」と言います。


目次によるページ内リンク

簡単にページ内リンクを作る方法が、「見出し」と「目次」を使う方法です。
このページには、「目次」がありますよね。この目次の項目をクリックすると、移動します。これが、ページ内リンクです。
目次は大・中・小の「見出し」によって自動的に作られます。見出し以外は目次にはなりません。見出しを作ったら、目次を作りたいところに、

#contents

と書きます。すると目次ができます。
この目次の作成も、見出しにアンカーが設定されているから出来る技なのです。


アンカーの取得方法

編集画面で、見出しを設定し「ページの更新」をすると自動的にシステムがアンカーを貼ります。その後、再度 編集画面を表示すると、以下のようにアンカーが自動的に振られています。

**アンカーの取得方法 [#p8f5e6fa]

この、#から始まる文字列が、アンカーです。
この文字列をメモ帳などにあらかじめメモしてください。


アンカーを使ってリンクを作る

先ほど取得したアンカーとページ名を使ってリンクを作ります。

[[リンク文字>ページ名#アンカー名]]

と書きます。

例えば、以下のように書きます

[[アンカー取得>アンカーの話#p8f5e6fa]]

上記の「アンカー取得」をクリックすると、アンカーの話のアンカー「#p8f5e6fa」に相当する見出し「アンカーの取得方法」にジャンプします。


自分でアンカーを設定する

アンカーは#で始まる9桁の英数字を使用しますが、もっと分かりやすい設定方法は
ないのでしょうか。実はあるのです。

&aname(アンカー名);

で手動でアンカーを設定できます。但し、アンカー名は、半角英数字のみしか使えません。日本語、スペースは使えません。なぜなら、URL の一部だからです。
例えば、以下のようにアンカー名を設定します。

&aname(example);

そして、このアンカーにリンクするには、

[[アンカー例>ページ名#example]]

と記述します。


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 14  
    役に立たなかった 3  


ご質問等はこちらにコメントして下さい。