はてなブログにグローバルナビゲーションを作成する方法

こんばんは。

nanana-blog管理人のナナナです。

ブログ運営を開始して1ヶ月が経過し、記事数も30を超えました。

記事のカテゴリーも複数できて、ブログ訪問者の方が目的の記事を

見つけやすくする工夫をしていこうと思い、ブログにグローバル

ナビゲーションを設置しました。

本日は私が設置したグローバルナビゲーションのHTMLとCSSを紹介します。

グローバルナビゲーションとは何か
グローバルナビゲーションの作成方法
- グローバルナビゲーションのHTML
- グローバルナビゲーションのCSS
最後に

グローバルナビゲーションとは何か

グローバルナビゲーションとは、ブログのヘッダ画像の下に表示されている

メニューリストのことです。

f:id:nanana-blog:20190504211851j:plain — グローバルメニュー

グローバルナビゲーションはブログ内の全ページに表示されるメニューで

サイト全体のコンテンツ構成や主要コンテンツを分かりやすく伝えることが

できます。

グローバルナビゲーションの作成方法

グローバルナビゲーションには階層を持たせるタイプと持たせないタイプが

あります。このブログは記事数がそこまで多くなく、階層を持たせる必要が

なかったので、今回は階層がないタイプのグローバルナビゲーションを

作成しました。

グローバルナビゲーションのHTML

"URL" の部分にはボタンをクリックした後に表示させたいURLを記入します。

<ul class="global-nav">
<ul>
<pre>li><a href="URL">Home</a>
<li><a url="">ブログ運営</a>
<li><a url="">お出かけ</a>
<li><a url="">PC関係</a>
<li><a url="">雑記</a>
</ul>

グローバルナビゲーションのCSS

.global-nav{
list-style: none; /*リストのマーカーを消す*/
overflow: hidden; /*はみ出した要素を削除する*/
}
.global-nav li{
width: 150px;　/*各要素の幅サイズ*/
float: left; /*リスト要素を左寄せにする*/
border-right: 1px solid #DDD; /*リスト要素の右側に線を引く*/
}
.global-nav li a{
display: block; /*要素をブロック表示にする*/
padding: 10px 15px; /*上下に10px 左右に15px パディングする*/
text-align: center; /*テキストを中央寄せ*/
text-decoration: none; /*テキストの傍線を消す*/
color: #333; /*文字色を変更*/
}
.global-nav li a:hover{
background: #EEE; /*カーソルを合わせた時に背景色を変更する*/
}