はてなブログのカスタマイズに夢中になってしまいブログランキングが1位→14位とだらけている日々を送っています。今回はグローバルナビゲーション（メニュー）の設置とメニューバーのカスタマイズ方法のまとめです。
メニューバーをレスポンシブ対応で設置
LUM3N / Pixabay
この記事内ではテーマ「innocent」のカスタマイズ例を紹介しています。→現在はwordpressに引越し。ただ、はてなブログは好きなのではてなブログ向けのカスタム紹介は今後も展開していきます。サブブログではてなブログをしようしてますので、そのカスタムをこちらで紹介するようにしました。ご了承ください。
僕のはてなブログの最初のテーマが「innocent」。現在はシンプルを求めて「minimalism」と非常にシンプルなデザインを選んでいます。カスタマイズメインで考えるならinnocentがおすすめかと個人的には思っております。
メニューバーもシンプルで２階層まで表示可能です。レスポンシブ対応でスマホでもメニューバーを２階層まで表示が簡単にできるのでおすすめです。
基本的な設定手順は２つのstepで簡単に設置可能です。上のリンク先で ①フッターにコピペする。②ヘッダータイトル下にコピペしてタイトルとリンクして飛ばしたいURLを入力するだけです。
この２つの手順でレスポンシブ対応でメニューが簡単に設置できました。これにもう少し自分のサイトの個性を見せたいと思うなら文字の色や背景色のカスタマイズをしてくだい。
メニューの個性カスタマイズ
「innocent」のメニューはモノトーンでかっこいいと思います。しかし、サイトのイメージに全く合わない場合は色を変更する必要があります。
そのためにカスタマイズ方法をまとめておきます。（フォントの色、背景の色、文字の大きさ、カーソルを合わせたときの色の変更方法、上下に線が有無など）
カスタマイズ設定手順
はてなブログ→デザイン→カスタマイズ→デザインCSSに以下のコードを貼付けてください。
背景色、文字の色、文字の大きさ、ホバーの色をあなたのサイトに合わせて自由に変えてください。
変更方法は
「#00336D;/* 背景色 */」の#00336Dの値を変えると色が変更します。
文字の大きさの変更方法は
「font-size: 16px ;/* 文字の大きさ */」の数字の値を変更すると大きさが変更できます。
また、上下の線に関してはあなたの好みです。僕のサイトでは採用していますが、いらない場合はその部分を削除すると消えます。
色の参考はこちら
最近人気のメニューバーのカスタマイズ
最近シンプルなメニューバーとして人気のカスタマイズを紹介します。僕もwordpressのサイトで使用しています。
背景色が白で上下の線が黒のシンプルなメニューバーです。オシャレでかっこいいです。上記のような感じのグローバルメニューになります。
そのコードはこちらです。
よかったら利用してください。今回は以上です。
[getpost id=”222″][getpost id=”2086″][getpost id=”2078″]
またこんなカスタマイズも書いています。最後まで読んでいただきありがとうございました。
