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カスタマイズ依頼

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

「ボタン」「囲みボタン」ブロックの文字...
 
通知
すべてクリア

[解決済] 「ボタン」「囲みボタン」ブロックの文字色が設定した色ではなく白固定となる

7 投稿
2 ユーザー
4 Reactions
36 表示
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4352
トピックスターター  

----------------------------------------------
テーマ名: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
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4352
トピックスターター  

●サンプル

<!-- 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
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4352
トピックスターター  

●対策

エディターの設定パネルで色を指定できるブロック(CSSプロパティ変数に定義される)があり、以下で共通化はできないので削除する。

https://github.com/xserver-inc/cocoon/blob/7dc8b3a431ce445cddf4e8b38a342f8dffd3b4ab/style.css#L3991

文字色が白固定となる、クラシックエディターのボタン(CTA)、ランキングは個別に設定(color: var(--cocoon-text-color);)とする。

https://github.com/xserver-inc/cocoon/blob/7dc8b3a431ce445cddf4e8b38a342f8dffd3b4ab/style.css#L4211-L4289


●補足

gutenberg-editor.cssにも同様な定義があり重複しているため、必要なのか確認要。

 


この投稿は1日前 2回ずつ大門未知子に変更されました

   
わいひら reacted
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4352
トピックスターター  

color: var(--cocoon-text-color);

↓誤記

color: var(--cocoon-white-color);



   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18436
 

ご報告いただきありがとうございます。
:not(.has-text-color)で除外することで修正させていただきました。
https://github.com/xserver-inc/cocoon/commit/5a93d71ef3ca349d5c04de74c16f1043c895f723



   
大門未知子
(@chu-ya)
Illustrious Member Registered
結合: 4年前
投稿: 4352
トピックスターター  

----------------------------------------------
テーマ名:Cocoon
バージョン:2.9.2.7
カテゴリー数:18
タグ数:124
投稿数:1749
固定ページ数:12
ユーザー数:1
----------------------------------------------
対策されていることを確認しました。
本件をクローズとしまう。



   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 8年前
投稿: 18436
 

ご確認いただきありがとうございます。



   
共有:

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

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

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

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

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

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

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

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