【INNOCENT】メニューバーの設置とカスタマイズ【図解あり】

f:id:xiangcai925:20180519194513j:plain

CSSの勉強とブログカスタマイズに夢中で、肝心の記事がなかなか手についておりません、パクチーです。

さて、当ブログを過去に見てくださっている方はもうお気づきかもしれませんが、先日大幅にブログデザインをリニューアルしました。その時に行ったカスタマイズを数回に分けて皆様とシェアしたいと思います。ブログカスタマイズ編第一弾はメニューバー（グローバルナビゲーションバー）の設置と、そのカスタマイズについて、図解ありでわかりやすく紹介します。ファーストクラス旅行記はもう少々お待ちくださいませ・・・。（汗）

スポンサードリンク

使用テーマは「INNOCENT」

「INNOCENT」を強くオススメするポイントの一つとして、超優秀なメニューバーが初めから用意されてあること。子カテゴリの設定ができる上に、スマホorタブレット表示の時は自動でトグルメニューに変身するところが気に入っています。

f:id:xiangcai925:20180519142927j:plain

メニューバーを設置すると、こんな感じに表示されます。設置方法とテーマについては、テーマ作者様のページから↓

わかりやすく説明されているのですが、残念ながらこちらのページでは、メニューバーの設置の仕方と、ベースの色だけを変える方法しか書かれていません。

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

単色だけでもシンプルで良いのですが、カーソルを合わせた時（マウスオーバー時）に色を変えたいのと、子カテゴリの色を変えたいので、そこをカスタマイズ。以下のコードをデザインCSSに追加するだけで完成です。

f:id:xiangcai925:20180519214837j:plain

はてなブログ編集画面「デザイン」を選択＞サイドメニューのレンチマークアイコンを選択＞一番下にデザインCSSを入力するするだけ。

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

上記のコードは、私のブログと全く同じものです。赤字で書かれた色コードの部分を変更して使用してください。色コードと、色の組み合わせについては下のサイトが参考になります。↓

以下にその他のカスタマイズ用コードをご紹介

メニューバーに線をつけて装飾

/* メニューバーに線をつける場合 */
.main-navigation ul {
 border-top: 3px solid #000000;/* バーの上に線をつける */
 border-bottom: 3px solid #000000;/* 下線*/
}
.main-navigation ul li {
 border-right: 3px solid #000000;/* 右線*/
 border-left: 3px solid #000000;/* 左線*/
}

f:id:xiangcai925:20180519180416p:plain

上記コードを追加したところの見本です。このままだと、オシャレなデザインとは言えないので、赤字部分とオレンジ色の部分を各自変更してカスタマイズしてください。オレンジ部分の数字を大きくすると、線が太くなります。

そして、緑色の「solid」と書かれた部分を変更することで、線にも装飾することができます。

solid　：　実線
dotted　：　点線
dashed　：　破線
double　：　二重線

例えば、このようにコードを打ってみましょう↓

.main-navigation ul {
 border-top: 3px dashed #000000;/* 上の線を破線にする */
 border-bottom: 5px double #000000;/* 下線を二重線に*/
}

f:id:xiangcai925:20180520120043p:plain

うん、良い感じ。破線を使うとなんだか可愛らしい印象になりますね。

メニューバーの文字を装飾

/* 文字を装飾する場合 */
.main-navigation a{
 color: #000000; /* 文字色 */
 font-size: 20px ;/* フォントサイズ */
}
.main-navigation a:hover {
 color: #000000; /* マウスオーバー時に文字色を変化させる */
}
.main-navigation ul ul a{
 color: #000000;/* 子カテゴリの文字色変更 */
}

f:id:xiangcai925:20180519181741p:plain