サイト内検索
Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 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
----------------------------------------------
2025年6月17日 01:46
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
http ://patthai.xyz/wp-content/uploads/2025/06/2000top.jpg
「https」に修正なさることをお勧めします。
(アップロードし直し、再設定が、簡単かもしれません)
(アップロードし直し、再設定が、簡単かもしれません)
これらのことは、「デベロッパーツール」というものを使えば、ご自分でチェックできるはずです。
taeさんは、フォーラムを何回もご利用になっていますし、ぜひとも使い方を覚えてください。
Edgeの場合は、以下のように「開発者ツール」という名前で表示されます。
(日本語なだけですね)
(日本語なだけですね)
【右クリックメニュー】
【右上のメニュー(三点リーダー)】
tae reacted
2025年6月17日 03:15
こういう感じのものが、分かり易いのかも・・・。
CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cant
ぜひ、ご覧になってください。
2025年6月17日 07:47
taeさん
ビックリマークが7つも・・・。
全部英語でハードルが高そうですが、読み方勉強していきます。
この上5つは、私が以下に描いたものです。
その他にも、「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」に修正なさることをお勧めします。
(アップロードし直し、再設定が、簡単かもしれません)
スマホからなもので、あまり書けません。
トピックスターター 2025年6月17日 07:49
すみません、もう一つ教えて頂きたいです。
hoverの赤色設定が意図せず、トップページのほかのリンク(例えば「新着記事」)にも反映されてしまっているのですが、他のリンクも↓
#navi .navi-in a
このグループに入っているということでしょうか?
ほかのリンクには反映させたくないのですが・・。
2025年6月17日 09:01
taeさん
そういうものも、デベロッパーツールで調べましょう。
(そのためのデベロッパーツールです。今回のものは、練習にちょうど良いと思います)
親テーマがそうなっているみたいです。
なお、taeさんは、古いテーマ(2024年11月頃※)をご利用ですので、上記リンクの場所が少し違います。
※:WordPress 6.8系リリース前のバージョンの為、WordPress6.8系には未対応
※:WordPress 6.8系リリース前のバージョンの為、WordPress6.8系には未対応
テーマ名:Cocoon
バージョン:2.7.9.1
恐れ入りますが、今日は大学病院へ通院しますので、しばらく返信はできません。
(もう準備をせねば)
(もう準備をせねば)
2025年6月17日 19:48
taeさん
hoverの赤色設定が意図せず、トップページのほかのリンク(例えば「新着記事」)にも反映されてしまっている
これ、「ボタン」ブロックですよね?
本来、「ボタン」ブロックは、ボタンですから、ユーザーに押してもらうためのものかと思います。
(つまりリンクとして使うことが多い)
WordPressの説明にも、以下のように「ボタンスタイルのリンク」とあります。
リンクですから、マウスオーバーすると、カーソルも変わります。
カーソルが変わるけど、押せない。
これって、ちょっとユーザーを騙しているような感じに思われかねないような。
(言葉は良くないですが)
(言葉は良くないですが)
CSSで、調整は可能ですけれど。
そもそも用途として、「ボタン」ブロックを使うのはどうなんだろうと思います。
そもそも用途として、「ボタン」ブロックを使うのはどうなんだろうと思います。
(aタグな訳ですし)
今後、リンクにする予定なんでしょうか。
tae reacted
トピックスターター 2025年6月18日 08:51
2025年6月18日 09:05
taeさん
先にリンクした以下に、CSSが当たらない時どうやって調べるのか、ということが書いてあります。
(別に当たらない時だけの話ではありませんね、確認方法ですね)
こういう感じのものが、分かり易いのかも・・・。
CSSが効かない・反映されないときの対処法まとめ
https://saruwakakun.com/html-css/wordpress/cantぜひ、ご覧になってください。
上記には、以下のようなリンクがあり、デベロッパーツールの使い方にも、触れられています。
「デベロッパーツール 使い方」で検索すると、他にも解説サイトは見つかります。
わいひらさんも、かなり前ですが、お書きになっています。
WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
https://nelog.jp/how-to-use-developer-tools-for-wp-beginner
世の中、Chromeでの説明のものが多いと思いますが、Edgeも同じです。
(同じChromiumですので)
(同じChromiumですので)
伝わっていないかもしれませんので、念のため書いておきます。
今回追加したCSSが当たっているものではありません。(カラーコードも違う)
CocoonのデフォルトのリンクのCSSが当たっています。
(「ボタン」ブロックは基本リンク)
(「ボタン」ブロックは基本リンク)
文字のリンクと同じものが当たっています。
(色もカーソルが変わるのも同じ理由です)
(色もカーソルが変わるのも同じ理由です)
つまり「ボタン」ブロックは元々こうだったということかと。
(追加したCSSとは無関係)
(追加したCSSとは無関係)
今日も返信は夜中でないとできないと思います。
トピックスターター 2025年6月18日 10:05
ありがとうございます。非常に勉強になりました!というか、これから開発者ツールについて知らなきゃということがわかりました。
また行き詰まったら訪問させていただきます。よろしくお願いいたします。
わいひら reacted
2025年6月18日 17:51
taeさん
一般的には「デベロッパーツール」と呼ばれますし、それで通っていると思います。
日本語にしただけですが、「開発者ツール」では伝わらないこともあるかもしれません。
「デベロッパーツール」という言葉を覚えておいた方が良いと思います。
そして、CSSを書く場合、「デベロッパーツール」なしには、書けないと思います。
覚えておく方が良いではなく、必須です。
私もなかったら、書けないです。
(頑張ってHTMLソースとにらめっこすればできると思いますが、したくないです)
デザインがいいなと思ってリンクないのに作りました。
リンクをはるか、そのほかの表示方法にするか。考えます。
「ボタン」ブロックは、aタグでHTML出力されます。
aタグは、以下にあるように、リンク先を示すべきみたいです。
(aタグのaは、anchor)
<a>: アンカー要素
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/a
<a>
の内容は、リンク先を示すものであるべきです。
デザインのためだけに、「ボタン」ブロックを使用することは、間違っているように思います。
ボタンでリンク張らない形にできればいいのですが・・。
これはもう、「ボタン」ブロック以外のものを使うということだと思います。
ブロックは、用途通りに使う方が良いと思います。
例えばですが。
ブロックエディタであれば、自分でCSSを書かなくても、以下まではできます。
(ブロックエディタが、設定に従い、CSSをインラインで書いてくれる)
今回はとりあえず、「段落」ブロックを使ってみました。
(手頃でしたので。比較のために「ボタン」ブロックも置いてあります)
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。