【SWELLカスタマイズ】グローバルナビを「ホバーすると色が変わる」ようにカスタマイズする方法

2024年7月1日

グローバルメニューをホバーした時、メニューの色が変わるようにカスタマイズしたいです。

この記事では、WordPress「SWELL」のグローバルナビ（メニュー）を触ったときに、色が変わるようにするためのカスタマイズ方法についてご紹介します。CSSのコピペだけでできるので、ぜひ参考にしてみてください。

ホバーした時に色を変える方法

デフォルトでは、下線が出現したり、背景の色が変わったりと、いろんなアニメーションがありますが、「ホバーしたときに色が変わるアニメーションがない！」んですよね！

そこで今回は、グローバルナビを触ったときに、メニューの文字が好きな色に変わるカスタマイズ方法についてご紹介します！

以下のコードを「外観＞カスタマイズ＞追加CSS」に貼り付けるだけです！

/* グローバルナビのホバー色 */

.c-gnav > li:hover {
    color: #ff0000; /* 好きな色を指定 */
}