賢威7のグローバルナビの背景色を変更する方法

どうも。葉です。

この記事では賢威7のグローバルナビの背景色を変更する方法を解説していきます。

1.この記事を読んでできるようになること

まずは、この記事を読んでできるようになることを確認していきましょう。

賢威7のデフォルト状態のグローバルナビの背景色は、下図のようになっています。

変更前

賢威7のデフォルトグローバルナビ背景色

このグローバルナビの背景色を下図のように変更します。

変更後

賢威7のグローバルナビ背景色変更後

2.賢威7のグローバルナビの背景色を変更する手順

では、実際にCSSコードを編集してグローバルナビの背景色を変更する手順を解説していきます。

WordPress管理画面の左メニューより「外観→テーマの編集」をクリックしてください。

賢威7のグローバルナビの背景色を変更する手順1

「base.css」をクリックしてください。

賢威7のグローバルナビの背景色を変更する手順2

「base.css」の最下部に次のコードを入力してください。

/*-------------------------------------
グローバルナビの背景色変更
-------------------------------------*/
.global-nav {
background: #000080;
}
.global-nav-in li a {
background-color: #000080;
}

「ファイルを更新」をクリックしてください。

賢威7のグローバルナビの背景色を変更する手順3

これで、「1.この記事を読んでできるようになること-変更後」のようにグローバルナビの背景色が紺色に変わったはずです。

背景色を他の色にしたい場合

※グローバルナビの背景色をあなたの任意の色に変更したい場合は、次のサイトの色コードを参考にしてください。

⇒ WEB色見本 原色大辞典 – HTMLカラーコード

3.まとめ

この記事では、賢威7のグローバルナビの背景色を変更する方法を解説しました。

この他にも賢威7のグローバルナビをカスタマイズしたい場合は、次の記事を参考にしてください。