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