「はてなブログPro」グローバルナビゲーションのカスタマイズ

これから「はてなブログPro」を始めようと考えている人、既に始められている人にも、よろしかったらご参考にしてみてください。

グローバルナビゲーションの修正カスタマイズ！

表示するカテゴリーを５個⇒６個に追加しましたので、それに伴ってグローバルナビゲーションのHTMLとCSSの一部を修正しました。
その内容を以下に報告します。

「デザイン」＞「カスタマイズ」＞「ヘッダ」＞「タイトル下」のHTMを追記修正。

【HTML】

<div class="nav">
<ul>
<li>
<a href="https://www.nil-blog.com/archive/category/暮らし">暮らし</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/観光・旅行">観光・旅行</a>
</li>

<li>
<a href="https://www.nil-blog.com/archive/category/ビジネス">ビジネス</a>
</li>　（←追加したカテゴリーです。）
<li>
<a href="https://www.nil-blog.com/archive/category/書籍">書籍</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/ブログ運営">ブログ運営</a>
</li>
<li>
<a href="https://www.nil-blog.com/archive/category/運営者情報">運営者情報</a>
</li>
</ul>
</div>

 次に、「デザイン」＞「カスタマイズ」＞「デザインCSS」のCSSを一部修正。

「width: ◯◯%;」を、旧）20% → 新）16.66％に修正しました。
◯◯は、「100÷リンクの個数」のようです？
旧）ではリンク５個なので20%、新）では６個にしたので、100÷6で16.66…になるので、適当に16.66％にしました。

【CSS】

 /* ブローバルナビゲーション */
.nav{
width: 800px;　/*幅を指定*/
padding: 0 0; /*余白を指定*/
margin: 0 auto 20px; /*周囲の余白を指定*/
}
.nav ul{
padding: 0;
overflow:hidden; /*高さを出すための指定*/
list-style-type: none; /*リストスタイルを指定*/
background:#fff; /*背景色を指定*/
margin-bottom:16px; /*枠の下周囲の余白を指定*/
text-align: center; /*文字の真ん中を指定*/
border-top: 2px solid #000; /*ボーダー上を指定*/
border-bottom: 2px solid #000; /*ボーダー下の指定*/
height: 30px; /*高さを指定*/
}
.nav li{
float: left; /*左に詰めて表示をする*/
text-align: center;
width:16.66%; /*幅を指定*/　（←変更した内容：20→16.66）
margin: 0;
}
.nav li a{
display: block; /*ブロック表示にする*/
margin: 0;
line-height:30px; /*高さを指定*/
color: #000; /*文字色の指定*/
font-size: 12px; /*マウスオーバー時の文字色を指定*/
text-decoration: none; /*アンダーラインを消す*/
}
.nav a:hover{
color: #fff; /*マウスオーバー時の文字色を指定*/
background:#f7546d; /*マウスオーバー時の背景色を指定*/
}

最後までご覧くださいましてありがとうございました。

次回もよろしくです。