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

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

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

賢威のグローバルメニュー

にゃのらいと

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

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

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

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※現在、WP：6.2.x、PHP：8.2.xでも動作しています

グローバルメニューの背景色を変更する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適用後

CSSについての補足説明

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

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

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

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

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

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

外観 > カスタマイズ

を選択します。

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

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

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

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

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

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

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

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】

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

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザマナ発行年月：2022年03月24日予約締切日：2022年01月26日ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA）日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田涼子西原礼奈ソシムエイチティーエムエルサイトヲワードプレスニスルホンクボタリョウコニシハラアヤナ発行年月：2023年08月29日予約締切日：2023年06月06日ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ）「ワクワクするモノ・時間・場所を生み出す」をテ

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名由美はつみ技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバンクワナユミハツミ発行年月：2023年09月28日予約締切日：2023年06月02日ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

たった1日で基本が身に付く！　WordPress 超入門［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木恵リブロワークス技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハンササキメグミリブロワークス発行年月：2022年04月14日予約締切日：2022年01月05日ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [

3,278円(税込)【送料込】

楽天ブックス

小川欣一穂苅智哉ソシムビジネスサイトヲツクッテマナブワードプレスノキョウカショバージョンロクテンエックスタイオウバンオガワヨシカズホカリトモヤ発行年月：2023年05月01日予約締切日：2023年01月12日ページ数：436p サイズ：単行本 ISBN：9784802614030 1　開発環境を構築しよう／2　テ