前回の「ヘッダーを作る」に引き続き、今回は「ヘッダーナビを作る」について実践してみようと思う。

ヘッダーナビとはヘッダーの下にが表示されるリンクリストのことで、Bloggerでは「ページリスト」の標準ガジェットが配置される部分になる。

ということで、今回は「ページリストガジェット」の設置と、CSSでのデザインについてまとめておくことにする。

作業工程

ヘッダーの下にヘッダーナビのコードを記述する

ヘッダーの下（当ブログ記事では<header>タグ内）に<b:section>～</b:section> までを書けばページリストとしては完成。<b:loop>でリストに入れたリンクを繰り返し取得して表示する記述になっている。なお、<b:section>のクラス名は「menu」でないとレイアウト画面に表示されないっぽい。

デフォルトのコードでは、条件分岐で現在のページか否かを判別して、現在のページにアクティブなCSSを当てる仕様になっているが、このデザインは自分が実装したいテンプレートには不要なので削除した。

また、デフォルトでは <b:include name='quickedit'/> というクイック編集ボタンを読み込ませる仕様になっているが、これもBloggerを始めてから一度も使ったこと無いものなので、不要と判断して削除した。

あと、<nav>タグと<div class="navbar">は個人的にスマホ用のヘッダーナビを入れたときにコードを扱いやすくするために入れただけなので、特に入れる必要はない。ちなみに<div class="navbar">を入れるとタテ並びのリストがメインコンテンツにかぶって表示がバケるが、これはCSSで直すので問題なし。

CSSを整える

Bloggerのガジェットには最初から意味不明なデザインが設定されているので表示が崩れてしまうことが多い。なので、Chromeのデベロッパーツールで原因を特定して、無駄な設定を解除する必要がある。

冒頭のheightの設定は、デフォルトだと<div>タグに30pxという謎の設定があったためautoにして回避した（そうしなければulとメインがかぶる）。他にも、<li>タグに謎のpaddingが設定されていたので これも削除した。

残りはヘッダーナビっぽいデザインに整えてしまえば完成となる。