ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について - CSSカスタマイズ相談 https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/ Cocoon ディスカッション掲示板 ja Fri, 15 May 2026 17:38:49 +0000 wpForo 60 RE: ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57753 Wed, 03 Nov 2021 08:01:10 +0000 @leafytree

リフィトリー様

お世話になってます。件の「色が変わらないようにしたい」、解決しました！

※厳密には、ホバー時に「同じ色に変えているため、色が変わってるように見えない」という追加CSSですが、サイトは見た目がすべてなのでこれで十分です ? 

もともと設定されているCSSを「打ち消す」のではなく、「CSSが設定されてないように見せる」という発想は無かったため、大変勉強になりました。

現在、サイト作成は、Local by FlyWheel で行っているため、まだサーバ上にサイトがありません。

そのため、テストサイトの公開はもう少し後になると思います。

参考サイトまで、紹介していただきありがとうございます！

今後ともどうぞよろしくお願いいたします。

]]> CSSカスタマイズ相談 slink_port https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57753 RE: ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57749 Wed, 03 Nov 2021 03:12:17 +0000 @slink_port さん

以下、参考ページです。

 

:hover擬似クラス

http://www.htmq.com/selector/hover.shtml

 


HTMLのリンク aタグの書き方を初心者向けに解説
3.カーソルをのせたときのデザインを変える（a:hover）

https://saruwakakun.com/html-css/basic/a-link#section3

 


WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

]]> CSSカスタマイズ相談 リフィトリー https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57749 RE: ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57748 Tue, 02 Nov 2021 16:04:59 +0000 @leafytree

リフィトリー様

確認したのが今日だったため、）ご返信が遅くなり、誠に申し訳ありませんでした。

3日も前に返信してくださっていたのですね。ありがとうございます。

早速試してみて、明日（今日中）には結果を再度ご連絡いたします。

引き続きよろしくお願いいたします。

]]> CSSカスタマイズ相談 slink_port https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57748 RE: ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57729 Sat, 30 Oct 2021 16:09:29 +0000 前略、slink_portさん

Cocoonのデフォルトの初期値のままでしたら、マウスを乗せる前のメニューのボタンの色は、白色かと思います。

 

ですので、マウスを乗せたときも、白色を指定すれば、なにも変化がない表示になるかと思います。

 

.navi-in a:hover {
    background-color: #fff;
}

.navi-footer-in a:hover {
    background-color: #fff;
}

 

しかし、Cocoon設定で、メニューのボタンに色を付けたりした場合は、また条件が異なってきます。

 

その場合は、別の指定が必要になる場合もあります。

 

外部からもサイトを見れるように、テストサイトでも良いので、公開していただき、URLをご提示いただくと、より具体的なアドバイスがいただけるかもしれません。

 

]]> CSSカスタマイズ相談 リフィトリー https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57729 ヘッダー／フッターメニューにマウスオンした時、色が変わらないようにする方法について https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57724 Sat, 30 Oct 2021 15:27:05 +0000 まず、開発者の　わいひら様　に心からお礼申し上げます。

初の質問投稿失礼します。既出・重複していたら申し訳ありません。

相談内容：Cocoonのヘッダー／フッターメニューはマウスカーソルをホバーさせると、背景が”うすいグレー”に変わるCSSの仕様となっています。

この、「マウスオンさせた時に、背景色が変わらない」、つまり、デフォルトのCSSを打ち消す方法を知りたいのです。ググって出てくる情報はすべて、「さらなる変化を付けるための方法」ばかりで、目的の情報はみつかりませんでした。

CSSに知見のある方、恐れ入りますが、方法をご教示いただければ幸いです。よろしくお願いいたします。


環境情報：

サイトURL：http://slinkport.local
ホームURL：http://slinkport.local
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.8.1
PHPバージョン：7.3.5
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36
サーバーソフト：nginx/1.16.0
サーバープロトコル：HTTP/1.0
エンコーディング：gzip, deflate
言語：ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.6.3
カテゴリ数：3
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：6524バイト
functions.phpサイズ：203バイト
----------------------------------------------
]]> CSSカスタマイズ相談 slink_port https://wp-cocoon.com/community/customs/%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%ef%bc%8f%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%b3%e3%81%97%e3%81%9f%e6%99%82/#post-57724