肉じゃがのCH3COOH

このブログの3つのお約束『こわいときはこわいと言っていい』『飲みながら食べながら読んでいい』『読みながら眠ってもいい』Since 2014.

およそ アクセスカウンター 番目の読者さん、ようこそ (counter start 2024/07/10)

★☆★☆お知らせ★☆★☆

ブログ記事ページのページ読み込みが終わらない現象が発生しており、ひとまずユーザー側からできる対処を実施しました。(2024/10/08)

定期メンテナンスを行いました。(2024/10/05)

サイトの読み込み軽量化を図りました。(2024/10/01)

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

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