はてなブログ・メニューバーの設置

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

メニューバーの設置の前に

メニューバー(ナビゲーションバー)というのは、ブログ上部にある「ホーム」や「ブログ関連」と表示されているバーのことです。

リンクをクリックすることで、ブログの「ホームページ」や各カテゴリを素早く表示させることができます。

その他にも「プライバシーポリシー」など、お好きな項目を表示させることができます。


お使いのデザインテーマによっては、そのテーマのメニューバーが用意されてるものもありますので確認してみてください。

以下、デザインテーマ「Innocent」のメニューバーを設置する説明になりますが、それ以外の方にも参考になると思います。(コードが違うだけで設定の仕方は同じようなものです)

カスタマイズは下記サイトを参考にさせていただきました。

Innocentのメニューバー設置

ヘッダ

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「ヘッダ(→タイトル下)」に以下のコードを貼り付けます。

<!– メニューバー –>
<nav class="main-navigation">
<div class="menu-toggle">メニュー</div>
<div class="main-navigation-inner">
<ul>
<li><a href="https://www.example.com/“>ホーム</a></li>
<li><a href="https://www.example.com/archive/category/ブログ関連">ブログ関連</a></li>
<li>
<a class="has-child">雑記</a>
<ul>
<li><a href="https://www.example.com/archive/category/ちょっとした事">ちょっとした事</a></li>
<li><a href="https://www.example.com/archive/category/まじめな話">まじめな話</a></li>
<li><a href="https://www.example.com/archive/category/マスコミ">マスコミ</a></li>
<li><a href="https://www.example.com/archive/category/エンタメ">エンタメ</a></li>
</ul>
</li>
<li><a href="https://www.example.com/privacy-policy">プライバシーポリシー</a></li>
</ul>
</div>
</nav>

青字のところにブログのURLを入れてください。

カテゴリのページのURLは「トップページのURL/archive/category/カテゴリ名」になっています。「カテゴリ名」をそれぞれ変更してください。

「プライバシーポリシー」のページは固定ページで作ります。固定ページは、はてなブログProで作れます。

赤字のところがメニューバーに表示されます。カテゴリ名のままでもいいですが表示を変えてもいいと思います。

コードの上部の「メニュー」はスマホやタブレットで表示されます。ここの表示も変えてもいいと思います。

このコードでメニューの1項目になります。

<li><a href="https://www.example.com/“>ホーム</a></li>

このコードを増やしたり、減らしたりすることでメニューの表示数を変えてください

サブメニュー

サブメニュー(下向きの矢印があるところ)は<ul> </ul>の間に記述すれば表示できます。

<li>
<a class="has-child">雑記</a>
<ul>
<li><a href="https://www.example.com/archive/category/ちょっとした事“>ちょっとした事</a></li>
<li><a href="https://www.example.com/archive/category/まじめな話“>まじめな話</a></li>
<li><a href="https://www.example.com/archive/category/マスコミ“>マスコミ</a></li>
<li><a href="https://www.example.com/archive/category/エンタメ“>エンタメ</a></li>
</ul>
</li>

{class="has-child"}で矢印を表示させています。

サブメニューの1番上の項目もリンクさせたい場合は

<a href="#" class="has-child">カテゴリ名</a>

のようにして#のところにURLを入れてください。

サブメニューも表示数を増やしたり、減らしたりしてください。

スマホとタブレットの設定

Innocent」はレスポンシブデザイン対応ですが、スマホとタブレット閲覧時にメニューを展開させるための設定が必要です。

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「フッタ」に以下のコードを貼り付けます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function($) {
$(“.menu-toggle").on(“click", function() {
$(“.main-navigation").toggleClass(“toggled");
});
})(jQuery);
</script>

メニューバーのカスタマイズ

これだけでもメニューバーは設置できるのですが、もう少しカスタマイズできます。

マウスカーソルをメニューバーに合わせたときに色を変えるカスタマイズです。

「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に以下のコードを貼り付けます。

/* メニューバー */
.main-navigation {
background-color: #9E9E9E;/* ベースカラー */
}
.main-navigation ul li:hover {
background-color: #5F5E5E;/* マウスオーバー時に色が変化する */
}
.main-navigation ul ul {
background-color: #686868;/* 子カテゴリの色変更 */
}

赤字のカラーコードを変えて表示される色を変えてください。

カラーコードは下記サイトが参考になります。

ベースカラーを薄くして他2つを濃くしてもいいですし、反対でもいいと思います。

いろいろ試してブログに合ったカラーにしてください。

Innocent以外のメニューバーの設置

参考になるサイトを紹介します。