はてなブログテーマ「Innocent」カスタマイズ！グローバルメニューの背景・文字色を変更、背景色の透過、マウスオーバー時に色をかえる方法

はてなブログテーマ「Innocent」をカスタマイズして、前回の投稿で設置したグローバルメニューの色を変更しました。
背景・文字の色の変更と、背景色の透過、マウスオーバー時に色を変化させる方法について。 

前回は、はてなブログテーマ「Innocent」でグローバルメニューを作成しました。

rubirubi.hateblo.jp

そのままでも十分、よくなったのですが、すこしシンプルな気もします。シンプルが好きなかたは、このままでもよさそうですね♪

もともと、はてなブログテーマ「Innocent」は、カスタマイズを前提としてシンプルにつくられているみたいなんですよね。

 

はるなぴさんのブログより

ブログのイメージチェンジや、ちょっとした気分転換に、グローバルメニューの色を変えてみてはいかがでしょうか(*^^*)

メニューの色を変える

そこで、前回チラッとお話ししたはてなブログテーマ「Innocent」のカスタマイズページを参考に、グローバルメニューの背景と、文字の色をかえてみたいと思います。

moonnote.hateblo.jp

前提として、グローバルメニューの作成は完了してるものとします(^^♪
もしまだであれば、こちらを参考にやってみてください。カンタンです！

≡ハンバーガーメニュー≡をカンタン！に設置できるオススメテーマ🍔【初心者のためのはてなブログ（無料版）】

それでは、いきます。
基本的には前回のグローバルメニューの設置のやりかたと同様です。

①まず、ヘッダーメニューの"はてなID" をクリックして開くか、[ダッシュボード] から、[デザイン] をクリックします。

ちなみに、ヘッダーメニューとは、はてなブログのいちばん上のメニューバーの部分です。
[ダッシュボード] をクリックしてから[デザイン] を選択してもよいですが、"はてなID" からだと直接選択できます。

②デザインの設定画面が開きます。
開いたら、左上のレンチマークをクリックします。（画像はすでに色が変わってしまっていますが、気にしないでください！）

③デザイン設定のカスタマイズページに切り替わります。
表示された項目の一番下、[デザインCSS] をクリックします。

④すると、白いテキストボックスが表れます。

⑤ボックスの、どこでもいいので枠内をクリックすると、枠がひろがって、コードが編集できるようになります。

⑥もし、何かの記述があれば消さず、一番下から、以下のプログラムコードをそのままコピペ！してください。

/*メニューの背景色*/
.main-navigation,
.main-navigation ul ul {
 background-color: #de9610;
}
/*メニューの文字色*/
.main-navigation a {
 color: #614983;
}

これは、「CSS」（カスケーディング・スタイル・シート）というプラグラムのコードです。
CSSを追加することで、ウェブページの色やレイアウトなどを変えることができます。CSSはウェブページのデザインを指定するプログラミング言語です。

コードの「#de9610」の部分はカラーコードといって、#のあとの6ケタの英数字（16進数）で、色を自由に指定することができます。

 background-color: #de9610;

 color: #614983; 

• 「background-color: #XXXXXX 」では背景の色
• 「color: #XXXXXX」では文字の色

を指定しています。

何色がいいか、優柔不断なわたしはよく悩みます(;´･ω･)ｳｰﾝ···
こちらのサイトなどを参考にすると、よいかと思います。

www.hp-stylelink.com

例として、「#7bcdfd」はみずいろ、「#fef479」はきいろです。みずいろの背景にきいろの文字にするなら、 

/*メニューの背景色*/
.main-navigation,
.main-navigation ul ul {
 background-color: #7bcdfd;
}
/*メニューの文字色*/
.main-navigation a {
 color: #fef479;
}

と指定します。

⑦コピペしたコードの色を自分の好みの色に変更したら、[変更を保存する] をクリックして、完了です！

ちゃんと変更されているか、確認してみましょう！

＼できた！／

***↓2019.07.24 追記↓***

グローバルメニューのカスタマイズのバリエーションとして、背景色の透過とマウスオーバーしたときに色を変えるコードを、追記します。

メニューの背景色を透過させる

下記のコードで、グローバルメニューを透過させることができます。
「RGBA」という色の指定方法で、下のコードのばあい、 「background-color: rgba(34,58,112,0.5)」の「34,58,112」の部分ではRGB値でこんいろ（ネイビー）を指定し、いちばん右の「0.5」で透過度を指定しています。
0.5というのは透過度が50%のことです。透過度の指定方法は、0~1のあいだで0が完全な透明、1は透過なしとなります。

また、その下の「font-size」では文字の大きさを指定しています。「18px」と、ここではピクセルで指定しています。ほかにも「%」（パーセント）で指定したり、指定の方法はいくつかあります。大きい数値になるほど、文字も大きくなります。

/*メニューの背景色*/
.main-navigation,
.main-navigation ul ul {
 background-color: rgba(34,58,112,0.5);
 font-size: 18px; 
} 

マウスオーバー時に色を変化させる

下記のコードを追加すると、マウスでグローバルメニューに触れたときに、その部分の背景色が変化します。

/*マウスオーバー時に色が変化する*/
.main-navigation ul li:hover {
 background-color: #223a70;
}

ここでも 「background-color: #223a70」の「#223a70」の部分で好きな色を指定できます。

***追記ここまで***

おつかれさまでした！
次回はタイトル画像の変更をやっていきたいと思います。

rubirubi.hateblo.jp

どなたかの、お役にたてますように♪

ここまで読んでいただき、ありがとうございました。(＊^v^＊)/