賢威のグローバルメニューの背景色を変更する方法

※当サイトにはプロモーションが含まれています。

賢威8.0の設定では、グローバルメニューの背景色は白（#fff）で、設定から変更することができません。

にゃのらいと

グローバルメニューだとわかりやすいように背景の色を白以外にしたいにゃ

そんな悩みを解決するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

グローバルメニューの背景色を変更するCSS

賢威のグローバルメニューの背景色を変更するCSSです。

/* グローバルメニューデザイン */
.keni-gnav_wrap,
.keni-gnav_cont {
background-color: #3b4675;
}

.keni-gnav_inner li a {
color: #fff;
border-bottom-color: #3b4675;
}

@media (min-width: 768px) {
.keni-gnav_inner li a:hover,
.keni-gnav_inner li a:focus {
border-bottom: 3px solid #fdfa25;
}
}

このCSSが適用されると、下記のような感じになります。

CSSについての補足説明

クラス.keni-gnav_wrap、.keni-gnav_conに対して、グローバルメニュー全体の背景色を設定しています。

.keni-gnav_inner li aは、個別のメニュー（例だと、賢威のカスタマイズ、お問い合わせ等が該当）に対して、文字色と文字の下にある余白部分の背景色を設定しています。

.keni-gnav_inner li a:hoverでは、マウスカーソルが上に来た時の動作を設定しています（例だと、黄色くなっている部分）。

これらのコードを「追加CSS」に記載することで、グローバルメニューのデザインが変更できます。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。