メニューの背景色とフォントのカラー変更（ミナモト、トヨトミ）
ヘッダーメニューの背景色とフォントのカラーを変更する手順を紹介します。
背景色のカラー変更
まずは背景色です。
現在のカラーはグリーンです。
各項目をオンマウスをすると濃いグリーンになります。電話番号の部分は常に明るいグリーンです。
今回は、オンマウスをしたときの濃いグリーンを編集するための手順を紹介します。
電話番号の部分のカラーを編集する手順は別記事で紹介します。
オンマウス時の背景色をグリーンから別のカラーに変える手順を紹介します。
背景のカラーを変更する手順（2ステップ）
ヘッダーメニューのカラーを変更するために以下の手順を行います。
- カラーピッカーで変更後のカラーを選択する
- 追加CSSの該当箇所を変更する
１，カラーピッカーで変更後のカラーを選択する
カラーピッカーとは、視覚的にカラーを選択できるツールです。
グーグルで「カラーピッカー」で検索してください。
自分の好きなカラーを見つけてください。
決まったら#から始まる英数字をコピーします。上記画像なら「#32a852」をコピーします。
２，追加CSSの該当箇所を変更する
ワードプレスの追加CSSを編集します。
外観→カスタマイズ→追加CSS
（※初心者の方は、念の為に追加CSSの全てをコピペしてパソコンのメモ帳に貼り付けておきましょう。）
赤枠で囲ったところに先ほどコピーしたカラー（#32a852）をペーストしてください。
（行数は現在とは異なる場合があります。）
念の為、編集前CSSコードを置いておきます。
/* マウスホバー時の背景色＋フォントカラー変更 */.global-nav-list li a:hover {
background-color:#14781d;
color: #ffffff;
}
/* サブメニューマウスホバー時の背景色 */
.global-nav-list .sub-menu li a:hover {
background-color: #14781d;
}
/* マウスホバー時の下線色 */
.global-nav-list>li:before {
border-bottom-color:#14781d;}
これで色が変更されました。
他の部分は変更しないでください。#からはじまる英数字6桁だけを変更してください。
文字色（フォントカラー）を変更する方法
背景色によっては、今のままの文字色（フォントカラー）では見えにくい場合があります。
フォントカラーを変更する手順も紹介します。
「color: #ffffff;」の#から続く6桁を変えてください。
これでフォントカラーも変わりました。
アドバイス
独特なカラーにしすぎないようにしましょう。
オリジナリティーを出したいがあまり、突拍子もないカラーにする士業の方もいます。
しかし、ホームページは自己満ではなく「お客様が見るものである」という視点を忘れないようにしましょう。
