Cocoonフォーラム

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

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

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

相談内容:

不具合の発生手順:

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

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

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

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

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

メニューの文字色を変えたいです
 
共有:
通知
すべてクリア

[解決済] メニューの文字色を変えたいです

13 投稿
2 ユーザー
15 Reactions
238 表示
 tae
(@tae)
Trusted Member Registered
結合: 3年前
投稿: 29
トピックスターター  

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_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

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さんがフォーラムに貼りつけたものも、位置が右にずれていますよね)

 
 

 
その他にも、「Mixed Content(混在コンテンツ)」の警告が出ています。
 
サイトはSSL化(https)されているのに、非SSL(http)で画像を読み込んでしまっています。
(おそらく、サイトをSSL化(https)する前に、画像をアップロードなさったのでは?)
 
対象の画像は以下でした。(直リンクにならないように、途中にスペースを入れています)
 
http ://patthai.xyz/wp-content/uploads/2025/06/rogo-tetu.png
http ://patthai.xyz/wp-content/uploads/2025/06/2000top.jpg
 
「https」に修正なさることをお勧めします。
(アップロードし直し、再設定が、簡単かもしれません)
 

 
これらのことは、「デベロッパーツール」というものを使えば、ご自分でチェックできるはずです。
taeさんは、フォーラムを何回もご利用になっていますし、ぜひとも使い方を覚えてください。
 
Edgeの場合は、以下のように「開発者ツール」という名前で表示されます。
(日本語なだけですね)
 
【右クリックメニュー】
 
【右上のメニュー(三点リーダー)】

   
tae reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

こういう感じのものが、分かり易いのかも・・・。

CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant

ぜひ、ご覧になってください。


   
tae and わいひら reacted
 tae
(@tae)
Trusted Member Registered
結合: 3年前
投稿: 29
トピックスターター  

丁寧に教えて頂き、ありがとうございます!!
やっと反映されました。

開発者ツールのことも教えて頂きありがとうございます。
ビックリマークが7つも・・・。
全部英語でハードルが高そうですが、読み方勉強していきます。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

taeさん

投稿者:: @tae

ビックリマークが7つも・・・。
全部英語でハードルが高そうですが、読み方勉強していきます。

この上5つは、私が以下に描いたものです。

投稿者:: @mk2_mk2

その他にも、「Mixed Content(混在コンテンツ)」の警告が出ています。
 
サイトはSSL化(https)されているのに、非SSL(http)で画像を読み込んでしまっています。
(おそらく、サイトをSSL化(https)する前に、画像をアップロードなさったのでは?)
 
対象の画像は以下でした。(直リンクにならないように、途中にスペースを入れています)
 
http ://patthai.xyz/wp-content/uploads/2025/06/rogo-tetu.png
http ://patthai.xyz/wp-content/uploads/2025/06/2000top.jpg
 
「https」に修正なさることをお勧めします。
(アップロードし直し、再設定が、簡単かもしれません)

スマホからなもので、あまり書けません。


   
tae and わいひら reacted
 tae
(@tae)
Trusted Member Registered
結合: 3年前
投稿: 29
トピックスターター  

すみません、もう一つ教えて頂きたいです。
hoverの赤色設定が意図せず、トップページのほかのリンク(例えば「新着記事」)にも反映されてしまっているのですが、他のリンクも↓

#navi .navi-in a

このグループに入っているということでしょうか?

ほかのリンクには反映させたくないのですが・・。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

taeさん

そういうものも、デベロッパーツールで調べましょう。
(そのためのデベロッパーツールです。今回のものは、練習にちょうど良いと思います)

 
 
親テーマがそうなっているみたいです。
 
なお、taeさんは、古いテーマ(2024年11月頃※)をご利用ですので、上記リンクの場所が少し違います。
※:WordPress 6.8系リリース前のバージョンの為、WordPress6.8系には未対応
 
投稿者:: @tae

テーマ名:Cocoon
バージョン:2.7.9.1

 

恐れ入りますが、今日は大学病院へ通院しますので、しばらく返信はできません。
(もう準備をせねば)

   
tae and わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

taeさん

投稿者:: @tae

hoverの赤色設定が意図せず、トップページのほかのリンク(例えば「新着記事」)にも反映されてしまっている

これ、「ボタン」ブロックですよね?

本来、「ボタン」ブロックは、ボタンですから、ユーザーに押してもらうためのものかと思います。
(つまりリンクとして使うことが多い)

WordPressの説明にも、以下のように「ボタンスタイルのリンク」とあります。

 
リンクですから、マウスオーバーすると、カーソルも変わります。
 
カーソルが変わるけど、押せない。
これって、ちょっとユーザーを騙しているような感じに思われかねないような。
(言葉は良くないですが)
 
CSSで、調整は可能ですけれど。
そもそも用途として、「ボタン」ブロックを使うのはどうなんだろうと思います。
(aタグな訳ですし)
 
今後、リンクにする予定なんでしょうか。

   
tae reacted
 tae
(@tae)
Trusted Member Registered
結合: 3年前
投稿: 29
トピックスターター  

いろいろ丁寧にありがとうございます。

ご指導いただいたように、開発者ツールで「あーそこはそのCSS使われているのねー」っていうのはどこでわかるでしょうか?
リンクボタン部分クリックして、ソースコードはここだよ、って右側に表示されていると思うのですが、そこからどう探っていくのか・・?可能でしたらご教授ください。

またリンクボタンは、YouTubeの初心者向けにトップページ型サイトの作り方を見ながら作ったもので、デザインがいいなと思ってリンクないのに作りました。
リンクをはるか、そのほかの表示方法にするか。考えます。
ボタンでリンク張らない形にできればいいのですが・・。


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

taeさん

先にリンクした以下に、CSSが当たらない時どうやって調べるのか、ということが書いてあります。
(別に当たらない時だけの話ではありませんね、確認方法ですね)

投稿者:: @mk2_mk2

こういう感じのものが、分かり易いのかも・・・。

CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant

ぜひ、ご覧になってください。

上記には、以下のようなリンクがあり、デベロッパーツールの使い方にも、触れられています。

 
「デベロッパーツール 使い方」で検索すると、他にも解説サイトは見つかります。
 
わいひらさんも、かなり前ですが、お書きになっています。
 
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
 
世の中、Chromeでの説明のものが多いと思いますが、Edgeも同じです。
(同じChromiumですので)
 
 

 
伝わっていないかもしれませんので、念のため書いておきます。
 
今回追加したCSSが当たっているものではありません。(カラーコードも違う)
CocoonのデフォルトのリンクのCSSが当たっています。
(「ボタン」ブロックは基本リンク)
 
文字のリンクと同じものが当たっています。
(色もカーソルが変わるのも同じ理由です)
 
つまり「ボタン」ブロックは元々こうだったということかと。
(追加したCSSとは無関係)
 
今日も返信は夜中でないとできないと思います。

   
わいひら and tae reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

先にリンクした解説サイトのような手順でやってみると、以下のような感じではないかと。
(Edgeでやりました)


   
わいひら and tae reacted
 tae
(@tae)
Trusted Member Registered
結合: 3年前
投稿: 29
トピックスターター  

ありがとうございます。非常に勉強になりました!というか、これから開発者ツールについて知らなきゃということがわかりました。
また行き詰まったら訪問させていただきます。よろしくお願いいたします。


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 4年前
投稿: 8959
 

taeさん

一般的には「デベロッパーツール」と呼ばれますし、それで通っていると思います。
日本語にしただけですが、「開発者ツール」では伝わらないこともあるかもしれません。

「デベロッパーツール」という言葉を覚えておいた方が良いと思います。

そして、CSSを書く場合、「デベロッパーツール」なしには、書けないと思います。
覚えておく方が良いではなく、必須です。
私もなかったら、書けないです。
(頑張ってHTMLソースとにらめっこすればできると思いますが、したくないです)

  

投稿者:: @tae

デザインがいいなと思ってリンクないのに作りました。
リンクをはるか、そのほかの表示方法にするか。考えます。

「ボタン」ブロックは、aタグでHTML出力されます。

aタグは、以下にあるように、リンク先を示すべきみたいです。
(aタグのaは、anchor)

<a>: アンカー要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/a

<a> の内容は、リンク先を示すものであるべきです

デザインのためだけに、「ボタン」ブロックを使用することは、間違っているように思います。

 

投稿者:: @tae

ボタンでリンク張らない形にできればいいのですが・・。

これはもう、「ボタン」ブロック以外のものを使うということだと思います。

ブロックは、用途通りに使う方が良いと思います。

 

例えばですが。
ブロックエディタであれば、自分でCSSを書かなくても、以下まではできます。
(ブロックエディタが、設定に従い、CSSをインラインで書いてくれる)

今回はとりあえず、「段落」ブロックを使ってみました。
(手頃でしたので。比較のために「ボタン」ブロックも置いてあります)

 
ブロックエディタで、上記のように設定するだけで、以下のようにはできます。
(自分でCSSは書いていません)
 
あとは、width:50%; margin: 0 auto;をあてれば、以下のようにはできます。
 
少し角丸の部分が違いますけれど、それも、値を変えるだけですし。
他の部分も、値を変えるだけで、調整できます。
 
せっかくのブロックエディタを、使えていないと思うんですよね。
(CSSを書かなくても、ある程度自由にできるはずなのに)

   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました