Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

メニューの文字色を変えたいです

CSSカスタマイズ相談

最新の投稿 : ｍｋ２ 58分前

3 投稿

2 ユーザー

0 Reactions

13 表示

RSS

tae

(@tae)

Eminent Member Registered

結合: 3年前

投稿: 25

トピックスターター 2025年6月16日 21:44

style cssに以下のコードを追加し、

文字の大きさ、太さは反映されたのですが色が反映されないです。

.navi a {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.05em;
color: #262626;
}
.navi a:hover {
color: #e60023;
}

追加CSSに書き込んでもダメでした。

色を変化させるためにはどうすればいいでしょうか？？

----------------------------------------------
サイト名：バンコクの歩き方
サイトURL： https://patthai.xyz
ホームURL： https://patthai.xyz
コンテンツ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バージョン：6.8.1
PHPバージョン：8.3.22
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 Edg/137.0.0.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja,en;q=0.9,en-GB;q=0.8,en-US;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.9.1
カテゴリー数：7
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1454 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Site Kit by Google 1.139.0
WP Multibyte Patch 2.9
----------------------------------------------

引用

ｍｋ２

(@mk2_mk2)

Illustrious Member Moderator

結合: 4年前

投稿: 8842

2025年6月17日 01:46

taeさん

投稿者:: @tae

↑

文字の大きさ、太さは反映されたのですが色が反映されないです。

.navi a {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.05em;
color: #262626;
}
.navi a:hover {
color: #e60023;
}

現在、hoverの方はないみたいですけれど。

簡単に言えば、負けてしまっているんだと思います。
（CSSには勝ち負けがある。正確には「詳細度」と言います）

詳細度については、以下をご参考に。
（他に、もっと分かり易いサイトもあると思いますので、検索して探してみてください）

CSSセレクタ詳細度の理解を深める
https://qiita.com/ryokkkke/items/ec1ca2baebe4a984f7a6

実際の状態は以下です。
（デベロッパーツールで、確認したものです）

テーマが出力するCSSに負けてしまっています。

以下のようにすれば、負けないと思います。（たぶん。試していません）

#navi .navi-in a {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #262626;
}
#navi .navi-in a:hover {
    color: #e60023;
}

なお、「font-size」に関しては、前に不正な文字コードがあり、エラーになっています。
（taeさんがフォーラムに貼りつけたものも、位置が右にずれていますよね）