Cocoonのスキン「イノセンス」でグローバルナビメニューの文字色を変更する方法

この記事では、Cocoonのスキン「イノセンス」を使ったサイトで、グローバルナビメニューの文字色を変更する方法を解説します。

---

問題点：「イノセンス」ではグローバルナビメニューの文字色がグレーに固定されている

Cocoonのスキン「イノセンス」ではスキン制御でグローバルナビメニューの文字色がグレーに固定されており、いくらブログをオシャレに仕上げても、ここだけトーンがとれていない仕上がりになってしまいます。

グローバルナビメニューの文字色を変更する方法

グローバルナビメニューの文字色を変更する方法は以下の２パターンがあります。

方法１：子テーマのスタイルシートを編集

子テーマを使用している場合、スタイルシートを直接編集することで変更できます。

1. WordPress管理画面にログインします。
2. 「外観」→「テーマファイルエディター」をクリックします。
3. 子テーマのstyle.cssに下記のコードを追加します。（黄色マーカ箇所に好みの色コードを入力）

/* グローバルナビメニューの文字色を変更 */
#navi a {
    color: #FFFFFF; /* 好みの色コードに変更 */
}

4. 「ファイルを更新」をクリックして保存します。

---

方法２：外観のカスタマイズ機能を利用

1. WordPress管理画面にログイン
2. 「外観」→「カスタマイズ」をクリック
3. 「追加CSS」を選択
4. 下記のコードを追加し、好みの色コードに変更（黄色マーカ箇所に好みの色コードを入力）

/* グローバルナビメニューの文字色を変更 */
#navi a {
    color: #FFFFFF; /* 例: 白色 */
}

5. 「公開」ボタンを押して変更を保存します。

---

---

仕上がり

上記の方法で以下のとおり、グローバルナビメニューの文字色を変更することができました。

まとめ

Cocoonのスキン「イノセンス」でグローバルナビメニューの文字色を変更するには、子テーマのスタイル編集、外観カスタマイズの追加CSSで簡単に実現できます。
ぜひご自分のサイトに適した色を設定し、親しみやすいデザインを作りましょう。