メニューの背景色とフォントのカラー変更（ミナモト、トヨトミ）

この記事に関するテンプレート：ミナモト、トヨトミ

この記事ではヘッダーメニューの背景色とフォントのカラーを変更する手順を紹介します。

ミナモトを例に紹介しますが、トヨトミでも手順は同じです。

背景色のカラー変更

まずは背景色です。

ミナモトの現在のカラーはグリーンです。

各項目をオンマウスをすると濃いグリーンになります。電話番号の部分は常に明るいグリーンです。

今回は、オンマウスをしたときの濃いグリーンを編集するための手順を紹介します。

オンマウス時の背景色をグリーンから別のカラーに変える手順を紹介します。

電話番号の部分のカラーを編集する手順は以下の記事で紹介しています。

右上の電話番号の背景色を変更する方法（ミナモト）

この記事に関するテンプレート：ミナモト ミナモト、トヨトミには、右上に電話番号を設置する箇所があります。 常時グリーンの背景色になっていますが、この背景色を変更…

士業向けのワードプレステンプレート集SAMURAI PRESS｜格安の士業テンプレ

背景のカラーを変更する手順（2ステップ）

ヘッダーメニューのカラーを変更するために以下の手順を行います。

1. カラーピッカーで変更後のカラーを選択する
2. 追加CSSの該当箇所を変更する

１，カラーピッカーで変更後のカラーを選択する

カラーピッカーとは、視覚的にカラーを選択できるツールです。

グーグルで「カラーピッカー」で検索してください。

自分の好きなカラーを見つけてください。

決まったら#から始まる英数字をコピーします。上記画像なら「#32a852」をコピーします。

２，追加CSSの該当箇所を変更する

ワードプレスの追加CSSを編集します。

外観→カスタマイズ→追加CSS

（※初心者の方は、念の為に追加CSSの全てをコピペしてパソコンのメモ帳に貼り付けておきましょう。）

赤枠で囲ったところに先ほどコピーしたカラー（#32a852）をペーストしてください。

（行数は現在とは異なる場合があります。）

念の為、編集前CSSコードを置いておきます。

/* マウスホバー時の背景色＋フォントカラー変更 */

/* マウスホバー時の下線色 */
.global-nav-list>li:before {
border-bottom-color:#14781d;

これで色が変更されました。

他の部分は変更しないでください。#からはじまる英数字6桁だけを変更してください。

文字色（フォントカラー）を変更する方法

背景色によっては、今のままの文字色（フォントカラー）では見えにくい場合があります。

フォントカラーを変更する手順も紹介します。

「color: #ffffff;」の#から続く6桁を変えてください。

これでフォントカラーも変わりました。

アドバイス

独特なカラーにしすぎないようにしましょう。

オリジナリティーを出したいがあまり、突拍子もないカラーにする士業の方もいます。

しかし、ホームページは自己満ではなく「お客様が見るものである」という視点を忘れないようにしましょう。