ブログ運営

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

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

こんばんは。

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

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

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

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

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

本日は私が設置したグローバルナビゲーションの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; /*カーソルを合わせた時に背景色を変更する*/
}

最後に

いかがだったでしょうか。

記事が多くなるとブログ訪問者が希望の記事にたどり着けない可能性が

あるためグローバルナビゲーションは必ず設置した方がいいと思います。

設置を検討している方は参考にしてみてください。