nil-blog 楽しく暮らしましょう...

Blog超初心者が今からやれることをお届けします。

【ブログ奮闘記】「はてなブログPro」開設11日目です。

超初心者50代! 初めての「はてなブログPro」の奮闘記です。
事前準備も十分ではない中で、ブログを運用して分かったことや課題・悩みなど、気が付いたことを記録して行きます。
これから「はてなブログPro」を始めようと考えている人、既に始められている人にも、よろしかったらご参考にしてみてください。
(ブログ開設日は2019年7月1日です。)

関連記事『 【ブログ奮闘記】「はてなブログPro」開設10日目です。 』です。

 

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

開設8日目の記事に、グローバルナビゲーションをはてなブログ Perfect GuideBook を参考にカスタマイズしたことを報告しました。

今回は、表示するカテゴリーを5個⇒6個に追加しましたので、それに伴ってグローバルナビゲーションの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÷リンクの個数」のようです?
旧)ではリンク5個なので20%、新)では6個にしたので、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; /*マウスオーバー時の背景色を指定*/
}

 

編集後記

開設11日目もHTMLとCSSを一部修正しカスタマイズしました。
開設10日目からはてなの広告を試しで表示するようにしましたが、そろそろASPを使えるようにして行きたいと思います。

 

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

次回もよろしくです。