ナビゲーションバーのカスタマイズ
ナビゲーションバーを活用していきます
ナビゲーションバーってご存じでしょうか。
ブログ内のタグ付けしたリンク先をまとめたものです。
これをカスタマイズしていきます。
**ナビゲーションバーを作成する**
ナビゲーションバーは何も割り当ててないと、ヘッダーの上に色のついた線としてでています。
ここに項目を追加します。
題名をつけてURLを指定すればいいようです。
Blogger編集画面で
レイアウト → ナビゲーション編集 → 新しいアイテムの追加 → (今回は)ホームを追加
ヘッダーの上に ホーム と書かれたナビゲーションバーが現れます。
**ナビゲーションバーの位置を変更する**
タイトルよりも上にナビゲーションバーがあると違和感があります。
ナビゲーションバーをヘッダーの下に移動させてみます。
HTML編集画面で 下記のように 下記のように これだけでヘッダーの下にナビゲーションバーが移動します。 記事をスクロールして読んだ後に、すぐにナビゲーションが使えないなら不便です。 ナビゲーションバーを、画面をスクロールしても画面の一番上に固定しました。 下記のCSSを追加する。 /* ナビゲーションバーをスクロールしても画面の一番上に固定 */ #navigation { position: sticky; top: 0; z-index: 5; } さらにナビゲーションバーを透けさせることもできました 下記のCSSを追加する。 /* ナビゲーションバーを 透けさせる */ #navigation { opacity: .6; /* 透けさせる */ } 下記のようにナビゲーションバーが若干透けてスクロールについてくるようになりました。 ※参考にさせていただきました。ありがとうございます。 https://grayrabbit2020.blogspot.com/2020/07/bloggerqooq.html#jump1 ・ナビゲーションバーを作成しました。 ・ナビゲーションバーの位置を変更しました。 ・ナビゲーションバーが画面スクロールについてくるようにしました。 ナビゲーションの項目を増やして、読みたい記事に素早く移動できるブログにしたいです。
**画面スクロールにナビゲーションバーがついてきてほしい**
まとめ
関連記事
コメント