ZEN for Hatena Blog - テーマ ストア
上記のリンク先より引用します。
ヘッダーナビゲーションをタイトル下 HTML 記述欄に記述することで実装できます。利用方法は下記のgistを参照してください。
テーマ作者のかたが、コードの応用のしかたまでちゃんと解説を書いてくださっています。
(現にこのブログ、リンク先のHTMLを参照してヘッダーナビゲーションを実現しています)
こういうクールなナビゲーションバーが自分のブログにも設置できたらいいなぁ、と、ひそかに思っている方がいらっしゃるかもしれないので、少しだけ解説します。
ヘッダーナビゲーションの骨組み
<nav class="header-nav"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav>
はい、これでお分かりいただけたでしょうか。
navタグのクラス名がカギです。
正確に、書き間違えの無いようにコードを書いてください。
きちんと正しく書けていれば、実装できます。
(上記のコードはあくまでも骨組みなので、aタグはご自分で書かれてください)
ちなみに、このブログでは、このナビゲーションの骨組みを2つ記述することで、2段のヘッダーナビゲーションを実現しています。わかってしまえばなんてことはないコロンブスの卵です。
このヘッダーナビゲーションの実装に感謝感激感謝感謝のあまり、グリーンスターを付けまくってしまったことは、ちょっと反省しています(^^;