はてなブログ初心者向け簡単ナビゲーションメニューの設置方法
ブログ開始１か月が経過して記事が増えてきたのでナビゲーションメニューを設置したいと思い色々なサイトを見て簡単な設置方法をまとめてみました。
色々ブログのデザインをカスタマイズしていくと、このCSSは何だったけな？となってきたので自分の備忘録的な感じで書いています。
とりあえず設置することを目指したので、アイコンや色の変更などには触れていませんので、カスタマイズしたいと思ったら、調べてまた書いていきたいと思います。
なので超初歩的な事しか書いていませんのであしからず。
ちなみに「ナビゲーションメニュー」は「グローバルメニュー」や「ナビゲーションバー」とも呼ばれています。
今私が使っているブログのデザインテーマ「Minmalism」でやり方を書いていきます。
ナビゲーションメニューのメリットは読んでほしい記事やHOMEに直接案内することが出来ます。
サイドバーのカテゴリーでも同じような感じですが、より読んでほしい記事のカテゴリーを冒頭に表示できますし、厳選することもできます。
もっとカスタマイズすると、非常に便利なサイトになっていくと思います。
ナビゲーションメニューとは
上の赤線で囲った箇所がナビゲーションメニューです。
この作り方を順番にやってもらえれば誰でもできます。
コードの作成
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"> ABOUT</a></div>
<div class="menu"><a href="URL"> ABOUT</a></div>
<div class="menu"><a href="URL"> ABOUT</a></div>
<div class="menu"><a href="URL"> ABOUT</a></div>
<div class="menu"><a href="URL"> ABOUT</a></div>
<div class="menu"><a href="URL"> ABOUT</a></div>
</div>
</nav>
上記URLのところにリンクさせたいページのURLを入力します。
上記ABOUTのところに表示したい名前を入れます。例えば「HOME」や「お知らせ」「書籍」などです。
上記コードを一旦パソコンの「メモ帳」などに貼り付けて行うとやりやすいですよ。
リンクさせたいURLですが多くの場合は「トップページ」や「カテゴリー」になると思います。
カテゴリーのURLの探し方
ダッシュボード＞カテゴリー＞リンクしたいカテゴリー をクリックします。
カテゴリー記事が表示された上部のアドレスバーにカテゴリーのURLが表示されます。
これを先ほどのURLのところに入れます。
ちなみにホームは「archive/category/〇〇〇」の前がホームURLになります。
同じように〇〇〇のところをカテゴリー名に変えれば 他のカテゴリーに代わります。
ナビゲーションメニューの数を変えたいとき
<div class="menu"><a href="URL"> ABOUT</a></div>
を増やすか減らすかで変えられます。初期は６個になっていますので、必要数（行）にして下さい。
ABOUT名は日本語でも大丈夫なので好きに入力してください。
作成したコードをはてなブログに貼り付ける
貼り付ける場所は、
ダッシュボード＞デザイン
カスタマイズ（スパナの絵）＞ヘッダ
タイトル下 の空白に先ほどのコードに貼り付けます。（画像は貼り付け後）
最後に上部の「変更を保存する」を押せば完了です。
無事ナビゲーションバーが表示されていればOKです。
最後に
本日、無事ナビゲーションメニューの設置が出来ました。
スライドやアイコンなどカスタマイズもいろいろあるようですが、まずは簡単なのをつくってみました。
なんとか出来て良かったです。（中身はまだまだ薄ぺらいですが・・・）
少しづつでもブログが見やすくなればいいなぁと思いやっています。
やってみると色々興味も出てきました。
調べてみると、はてなブログのカスタマイズ関係はいっぱい出てきますね。
色々なサイトのお世話になりながら、やっていきます。
