9日目:ナビゲーションの追加補助要素を提供する

<link> タグって知ってるかな。外部ファイルでスタイルシートを定義するときとかに使う関係で、知ってるかもしれないね。けど同じような方法で「ホーム」「前ページ」「次ページ」へリンクできるってことは知ってた?例えば日ごとのアーカイブページで、前日のエントリーと次の日のエントリー(ってものがあればの話だけど)へ飛べるように設定できるんだ。各エントリーごとにページを設けてる人は、ここでも同じように前と次とを指定できるよ。

<link rel="home" title="ホーム" href="http://ホーム/の/URL" />
<link rel="prev" title="前ページのタイトル" href="http://前ページ/の/URL" />
<link rel="next" title="次ページのタイトル" href="http://次ページ/の/URL" />

こういったリンクはエクスプローラとかみたいないわゆるビジュアルブラウザ(視覚的ブラウザ)では普通見えないけど、特殊ブラウザではナビゲートしやすいように表示できるようになってるんだ。たぶん今もあなたのサイトをナビゲートする方法ってひとつじゃないと思う…週ごと・月ごとのアーカイブから、最近のエントリーへのリンクから、カレンダーからなどなど。もしかするともう「前のエントリーへ」「次のエントリーへ」なんていうテキストリンクを貼ってる人もいるかもしれないね。あったらスバラシイ、それはそのままにしといて、上で言ったやり方でのリンクも足しとくとなおいいよ。

誰がトクする?

  1. マーカスだね。彼のテキストブラウザ Lynx はページのてっぺんにあるナビゲーションの追加補助要素(さっき言ったホームや次ページへのリンクとか)を表示するんだ。これには title のとこで指定したタイトルが使われる。6月18日のアーカイブページを読んでるときにはマーカスにはこう見える。

    #ホーム June 17, 2002 June 19, 2002

    (#があることによってマーカスにはこれがページのコンテンツじゃなくてメタデータだってことがわかる。Lynx では意味のあるページタイトルのとこでも同じことが起こる。)

  2. マイケルも助かるだろうな。彼のテキストブラウザ Links(マーカスの使ってるLynx とごっちゃにしないでね、)もこういうページのてっぺんにあるナビゲーションの追加補助要素を表示するんだ、こんな具合にね。

    Link: home
    
    Link: prev
    
    Link: next
  3. ビルも喜ぶね。Mozilla では、サイトナビゲーション・ツールバーに補助的ナビゲーションリンクが表示されるんだ。リンクのタイプ ("home"、"prev"、"next") はツールバーボタンに、リンクのタイトルはツールチップ(マウスを乗せたときに出るバルーンヘルプみたいなヤツ)として表示される。(注:サイトナビゲーション・ツールバーは Mozilla 0.99 にあった機能で、1.0 では開発段階の最後の最後で外された。それで 1.1 でまた復活。〜訳者注:2004年5月現在での最新リリース 1.6 にはこの機能は付いています。〜この機能が付いている場合は、メニューバーのView > 「表示/隠す」、「サイトナビゲーションバー」、「常に表示」を選択。)

  4. iCab を使ってる人にもいい。iCab は、各リンクにつけてあるタイトルによって、ツールバーにドロップダウンメニューでナビゲーションリンクが表示されるんだ。

どうしたらいい?

Movable Type には Date-Based Archive のテンプレートの <head> タグ直下にこれを足して。

<link rel="home" href="<$MTBlogURL$>" title="ホーム" />
<MTArchivePrevious>
<link rel="prev" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchivePrevious>
<MTArchiveNext>
<link rel="next" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchiveNext>

それとこれを Individual Entry Archive テンプレートに追加する。これも <head> タグのすぐ後ろにね。

<link rel="home" href="<$MTBlogURL$>" title="ホーム" />
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryPrevious>
<MTEntryNext>
<link rel="next" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryNext>

さらなる情報源(英語)