9日目:ナビゲーションの追加補助要素を提供する
<link>
タグって知ってるかな。外部ファイルでスタイルシートを定義するときとかに使う関係で、知ってるかもしれないね。けど同じような方法で「ホーム」「前ページ」「次ページ」へリンクできるってことは知ってた?例えば日ごとのアーカイブページで、前日のエントリーと次の日のエントリー(ってものがあればの話だけど)へ飛べるように設定できるんだ。各エントリーごとにページを設けてる人は、ここでも同じように前と次とを指定できるよ。
<link rel="home" title="ホーム" href="http://ホーム/の/URL" />
<link rel="prev" title="前ページのタイトル" href="http://前ページ/の/URL" />
<link rel="next" title="次ページのタイトル" href="http://次ページ/の/URL" />
こういったリンクはエクスプローラとかみたいないわゆるビジュアルブラウザ(視覚的ブラウザ)では普通見えないけど、特殊ブラウザではナビゲートしやすいように表示できるようになってるんだ。たぶん今もあなたのサイトをナビゲートする方法ってひとつじゃないと思う…週ごと・月ごとのアーカイブから、最近のエントリーへのリンクから、カレンダーからなどなど。もしかするともう「前のエントリーへ」「次のエントリーへ」なんていうテキストリンクを貼ってる人もいるかもしれないね。あったらスバラシイ、それはそのままにしといて、上で言ったやり方でのリンクも足しとくとなおいいよ。
誰がトクする?
マーカスだね。彼のテキストブラウザ Lynx はページのてっぺんにあるナビゲーションの追加補助要素(さっき言ったホームや次ページへのリンクとか)を表示するんだ。これには
title
のとこで指定したタイトルが使われる。6月18日のアーカイブページを読んでるときにはマーカスにはこう見える。#ホーム June 17, 2002 June 19, 2002
(#があることによってマーカスにはこれがページのコンテンツじゃなくてメタデータだってことがわかる。Lynx では意味のあるページタイトルのとこでも同じことが起こる。)
マイケルも助かるだろうな。彼のテキストブラウザ Links(マーカスの使ってるLynx とごっちゃにしないでね、)もこういうページのてっぺんにあるナビゲーションの追加補助要素を表示するんだ、こんな具合にね。
Link: home Link: prev Link: next
ビルも喜ぶね。Mozilla では、サイトナビゲーション・ツールバーに補助的ナビゲーションリンクが表示されるんだ。リンクのタイプ ("home"、"prev"、"next") はツールバーボタンに、リンクのタイトルはツールチップ(マウスを乗せたときに出るバルーンヘルプみたいなヤツ)として表示される。(注:サイトナビゲーション・ツールバーは Mozilla 0.99 にあった機能で、1.0 では開発段階の最後の最後で外された。それで 1.1 でまた復活。〜訳者注:2004年5月現在での最新リリース 1.6 にはこの機能は付いています。〜この機能が付いている場合は、メニューバーのView > 「表示/隠す」、「サイトナビゲーションバー」、「常に表示」を選択。)
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>
さらなる情報源(英語)
- Sjoerd Visscher: Radio Userland ブログでのナビゲーションリンクについて。