賢威7のグローバルナビの文字色(フォントカラー)を変更する方法

どうも。葉です。

この記事では、賢威7のグローバルナビの文字色(フォントカラー)を変更する方法を解説していきます。

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

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

今回変更するのはグローバルナビの文字色(フォントカラー)です。まずは、デフォルト状態のフォントカラーを確認して見ましょう。

変更前

グローバルナビのデフォルトフォントカラー

この記事内では、このグローバルナビのフォントカラーを次のように変更します。

変更後

グローバルナビのフォントカラー変更後

上図では、グローバルナビのフォントカラーを灰色に変更しました。

2.賢威7のグローバルナビの文字色(フォントカラー)を変更する手順

ここからは、賢威7のCSSコードを編集してグローバルナビのフォントカラーを変更していきます。

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

賢威7のグローバルナビの文字色(フォントカラー)を変更する手順1

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

賢威7のグローバルナビの文字色(フォントカラー)を変更する手順2

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

/*-------------------------------------
グローバルナビのフォントカラー変更
-------------------------------------*/
.global-nav-in li a {
color: #808080;
}
/*-------------------------------------
グローバルナビのマウスオーバー時の
(グローバルナビにマウスをのせたときの)
フォントカラー変更
-------------------------------------*/
.global-nav-in li a:hover {
color: #808080;
}

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

賢威7のグローバルナビの文字色(フォントカラー)を変更する手順3

この状態で、ブログのグローバルナビの確認をすると「1.この記事を読んでできるようになること-変更後」と同じフォントカラーになっているはずです。

フォントカラーを他の色にしたい場合

なお、フォントカラーを別のイロにいたい場合は、次のサイトを参考にカラーコードを変更してください。

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

3.まとめ

この記事では、賢威7のグローバルナビのフォントカラーを変更するする方法を解説しました。

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