サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
通知
すべてクリア
トピックスターター 2026年4月20日 03:36
----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.2.6
カテゴリー数:18
タグ数:124
投稿数:1749
固定ページ数:12
ユーザー数:1
----------------------------------------------
●関連投稿
以下の修正ミスです。
https://wp-cocoon.com/community/postid/88523/
●現象
「ボタン」「囲みボタン」ブロックのボタン設定で、文字色にカスタムカラーを設定した。
しかし、ボタンの文字色が白のままとなる。
●原因
以下でCSSプロパティ変数に白色とする修正をした。
https://github.com/xserver-inc/cocoon/commit/895f135c826259f7c3daa26dfbef20806b92c50f
「ボタン」「囲みボタン」ブロックのカスタムカラーは、親のstyle属性にCSSプロパティ変数として登録される。
上記の修正で、子の情報が優先して白色固定となる。
わいひら reacted
トピックスターター 2026年4月20日 17:44
●サンプル
<!-- wp:cocoon-blocks/faq -->
<div class="wp-block-cocoon-blocks-faq faq-wrap blank-box block-box not-nested-style cocoon-block-faq"><dl class="faq"><dt class="faq-question faq-item"><div class="faq-question-label faq-item-label">Q</div><div class="faq-question-content faq-item-content"></div></dt><dd class="faq-answer faq-item"><div class="faq-answer-label faq-item-label">A</div><div class="faq-answer-content faq-item-content"><!-- wp:freeform -->
<div class="btn-wrap btn-wrap-deep btn-wrap-l"><a href="https://aa.com/">囲み</a></div>
<p><a class="btn btn-deep btn-l">クラシックボタン</a></p>
<!-- /wp:freeform -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><span class="inline-button-black">インラインボタン</span></p>
<!-- /wp:paragraph -->
<!-- wp:cocoon-blocks/button-1 {"customTextColor":"#ff0000"} -->
<div class="wp-block-cocoon-blocks-button-1 button-block" style="--cocoon-custom-text-color:#ff0000"><a href="" class="btn has-text-color" target="_self" rel="noopener">ボタン</a></div>
<!-- /wp:cocoon-blocks/button-1 -->
<!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e囲み\u003c/a\u003e","customTextColor":"#ff0101"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block has-text-color" style="--cocoon-custom-text-color:#ff0101"><a href=#>囲み</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:group --></div></dd></dl></div>
<!-- /wp:cocoon-blocks/faq -->
<div class="btn-wrap btn-wrap-deep btn-wrap-l"><a href="https://aa.com/">囲み</a></div>
<p><a class="btn btn-deep btn-l">クラシックボタン</a></p>
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p><span class="inline-button-black">インラインボタン</span></p>
<!-- /wp:paragraph -->
<!-- wp:cocoon-blocks/button-1 {"customTextColor":"#ff0000"} -->
<div class="wp-block-cocoon-blocks-button-1 button-block" style="--cocoon-custom-text-color:#ff0000"><a href="" class="btn has-text-color" target="_self" rel="noopener">ボタン</a></div>
<!-- /wp:cocoon-blocks/button-1 -->
<!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e囲み\u003c/a\u003e","customTextColor":"#ff0101"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block has-text-color" style="--cocoon-custom-text-color:#ff0101"><a href=#>囲み</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:group -->
わいひら reacted
トピックスターター 2026年4月20日 18:23
●対策
エディターの設定パネルで色を指定できるブロック(CSSプロパティ変数に定義される)があり、以下で共通化はできないので削除する。
https://github.com/xserver-inc/cocoon/blob/7dc8b3a431ce445cddf4e8b38a342f8dffd3b4ab/style.css#L3991
文字色が白固定となる、クラシックエディターのボタン(CTA)、ランキングは個別に設定(color: var(--cocoon-text-color);)とする。
●補足
gutenberg-editor.cssにも同様な定義があり重複しているため、必要なのか確認要。
この投稿は1日前 2回ずつ大門未知子に変更されました
わいひら reacted
トピックスターター 2026年4月20日 21:48
color: var(--cocoon-text-color);
↓誤記
color: var(--cocoon-white-color);
2026年4月20日 23:09
ご報告いただきありがとうございます。
:not(.has-text-color)で除外することで修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/5a93d71ef3ca349d5c04de74c16f1043c895f723
トピックスターター 2026年4月20日 23:25
----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.2.7
カテゴリー数:18
タグ数:124
投稿数:1749
固定ページ数:12
ユーザー数:1
----------------------------------------------
対策されていることを確認しました。
本件をクローズとしまう。
わいひら reacted
2026年4月21日 14:59
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。





