11日目：ナビゲーションリンクを飛ばす
10日目：メインの内容を最初にもってくるのがテンプレートでうまくできなかった人には、こんな方法もあるよ：ナビゲーションリンクを飛ばすリンクをつけるんだ。完璧じゃないけど、（メインの内容を最初にもってくるほうがいいからね）妥協案として受け入れられてる、色んなサイトで使われてるひとつのやりかたではあるよ。
「飛ばしリンク」はほかのリンクとおんなじ普通の <a> タグなんだけど、CSS を使ってIEとかネスケとかのビジュアルブラウザからは隠します。これで全然見えなくなるってことだから、ページレイアウトには影響ないんだ。
誰がトクする？
- マーカスだね。ページに行ったとき、Lynx は飛ばしリンクを表示するから、マーカスはナビゲーションをすっ飛ばしてメインのコンテンツへ速攻行けるわけだ。10日目：メインの内容を最初にもってくるのところで、なんでこれがそんなに大切なのか見てみて。
- ジャッキーも喜ぶよ。ページに行ったらJAWSは飛ばしリンクを読み上げてくれるから、ジャッキーもナビゲーションを飛ばしてメインのコンテンツへすぐ行かれる。
どうしたらいい？
まずはLynx Viewer で自分のページを見て、メインコンテンツよりナビゲーションが先に来てるかどうか確かめるといい。もしメインが先に来てるんなら、今日のレッスンはいらないってこと。良かったね、今日はお休み楽しんでください。
そしたら今度はリンクを飛ばすための CSS だ。ビジュアルブラウザでは見えないように隠そう。外部ファイルのスタイルシートを指定してるなら、このルールをファイルの最後に付け加えて。（外部スタイルシートがいくつもある場合は、ネスケ4対応のやつに足してね。）テンプレートのあたまに<style> ていう項目があるなら、その <style> タグのすぐあとにこのルールを入れてください。
.skiplink {display:none}
じゃ次は実際に飛ぶためのリンクをサイト名と説明文の真下に足そう。見つからない？使ってるサービスによって呼びかたが違うから、それぞれの呼びかたでテンプレートを検索してみて。
- Movable Type:
<$MTBlogTitle$>と<$MTBlogDescription$>で検索。 - Blogger:
<$BlogTitle$>で検索。
あった？サイト名と説明文の真下に、このリンクを付け足すよ:
<a class="skiplink" href="#startcontent">ナビゲーションを飛ばす</a>
よし、じゃあ今度はこの「飛ばしリンク」を受けるための、アンカータグが必要だ。これはメインになるコンテンツのはじめに置くといい。メインコンテンツはどこだったっけ？あせらないで。テンプレートごとの検索の出番だよ。
- Movable Type:
<MTEntries>で検索。 - Blogger:
<Blogger>で検索。
で、どんなタグを入れるかは使ってる HTML のバージョンによって違うんだ。自分の使ってる DOCTYPE を確認して、それに合わせて次のどれかを入れてね。
HTML 4のどれかならこれをメインのコンテンツのすぐ前に入れる：<a name="startcontent"></a>XHTML 1.0のどれかならこれをメインのコンテンツのすぐ前に入れる：<a name="startcontent" id="startcontent"></a>XHTML 1.1だったらこれをメインのコンテンツのすぐ前に入れる：<a id="startcontent"></a>
こういう「飛ばしリンク」は全部のページに付いてたほうがいいから、テンプレートに組み込んで。