或る日、僕は

春休み:3月9日(Sat)~3月27日(Wed)

テーマ「ZEN for Hatena Blog」にヘッダーナビゲーションを実装する参考資料

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段のヘッダーナビゲーションを実現しています。わかってしまえばなんてことはないコロンブスの卵です。
このヘッダーナビゲーションの実装に感謝感激感謝感謝のあまり、グリーンスターを付けまくってしまったことは、ちょっと反省しています(^^;

▲このページの先頭へ戻る