サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年1月17日 12:42
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.3.4
カテゴリー数：19
タグ数：124
ユーザー数：1
----------------------------------------------
WordPressブロックのカラー設定は、カラーパレットにアルファ値の設定が可能となっている。
これと同様、Cocoonブロックでもカラー設定でアルファ値の設定ができればと思います。
わいひら reacted
2025年1月18日 19:47
ご要望いただきありがとうございます。
昨日いろいろと調べてみたんですが、Cocoonブロックで表示されていない原因がちょっとわかりませんでした。
※何らかのオプションがあってそれを有効にすれば、利用可能になると思っていたんですが、そういうものはなかったです。
恐れ入りますが、これに関してはちょっと時間がかかるかもしれません。
よろしくお願いいたします。
大門未知子 reacted
2025年1月19日 11:25
私もtheme.jsonとかで可能かと思っていました。
僕も同様に思っていました。
でもそれっぽいものがなくて。
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/themes/global-settings-and-styles/#settings
いろいろ設定を変更してみたり、独自ブロック個別にオプションを設定してみたりもしたんですが、透過色エリアが出てこなくて結局まだわかっていません。
今詳しい方に相談させて頂いているので、ちょっと時間はかかるかもしれません。
2025年1月19日 16:39
スマホからなもので、あまり確認していません。
そして、英語のページなのですけれど。
「enableAlpha」とあるので、ちょっと引っかかっただけで、ちゃんと読んではいません。
上記は「ColorPalette」ですけれど、「BorderControl」など、他のものにも「enableAlpha」があります。
関係ないかもですけれど、一応。
（「Component Reference」なんですよねぇ）
わいひら reacted
2025年1月20日 19:57
以下のCocoon独自ブロックを透過色に対応させました。
https://github.com/xserver-inc/cocoon/commit/fd5b45f795b1f5f22a91a028468b01184a6ae1b7
吹き出し
白抜き
ボタン
囲みボタン
FAQ
アイコンリスト
レーダーチャート
タブボックス
タイムライン
アコーディオン
見出しボックス
ラベルボックス
タブ見出しボックス
マイクロバルーン
マイクロテキスト
レーダーチャートブロックのチャート色だけは透過色に対応できないようだったので、無効にしました。
2025年1月20日 22:00
今、試し始めたばかりですけれど。
「白抜きボックス」は、文字色が、編集画面には反映されないですね。
公開ページ側には、反映されています。
【追記】
「タブボックス」の文字色も同じです。
- 編集画面には、反映されない
- 公開ページには、反映される
ちなみに、タブボックスで、ボーダー色でalpha値を変えてみたのですけれど。
遠目に見ると、ちょっと色が違う気がして、拡大してみました。
タブと枠線が重なるところの色が、濃く見えるんですね。
透過するとはそういうことと言えば、そうですね。
わいひら reacted
2025年1月20日 22:17
ちなみに、ツールバーの「ハイライト」のカスタムカラーについては、アルファ値は設定できない感じでしょうか。
重なりは、どうしても・・・。
「吹き出し」も。
「吹き出し」も。
文字色の件は、「吹き出し」も。
（あとで、まとめましょうか）
わいひら reacted
2025年1月20日 22:42
「アコーディオン」は、ボーダー色を設定すると、ボーダー色と見出しの背景が変わりますが。
見出し部分の、背景色とボーダーは重なりますから。
これは仕方ない・・・ですよねぇ。
（本文部分とは、枠線の色が違うように見えてしまう）
これは仕方ない・・・ですよねぇ。
（本文部分とは、枠線の色が違うように見えてしまう）
ここまで使って思ったのは、背景色に透過が使えるのは、結構便利な気がします。
わいひら reacted
2025年1月20日 23:05
「文字色」が、編集画面に反映されないのは、以下のブロックでした。
（いずれも、公開ページには反映される）
- 白抜きボックス
- タブボックス
- 吹き出し
- アコーディオン
- FAQ（回答側）
【追記】
すみません、今見たら反映されています。
ちょっと調べます。
【追記2】
経緯としては、子テーマと親テーマの切り替えを行いました。
- 子テーマ有効時は、上記のブロックの文字色が、編集画面に反映されない
- 親テーマ有効時は、反映されている
確認すると、editor-style.cssで、pタグにcolorを指定してしました。
（過去のお問い合わせの残骸）
大変失礼しました。
わいひら reacted
トピックスターター 2025年1月21日 01:23
吹き出し、マイクロバルーン
吹き出しの三角は、疑似要素のbeforでボーダー色、afterで背景色を重ねることで作成。
半透明色なので、下が透け、色合いが変になる。
また、三角と全体枠線が重なる部分が透け、全体枠線を隠すことができない。
三角の作りを変更すると、少しは改善できる。
白抜き、ボタンなど全般
ボーダー色が透け、背景色と重なり、変な色になる。
background-clip:padding-boxとし、ボーダー以内を塗りつぶす。
図に改善例を示します。
対策は以下の2つかと思います。
- あえて半透明に触れない。
- 注記で述べユーザーの運用に任せる。
わいひら reacted
2025年1月21日 23:47
ご確認いただきありがとうございます。
ちなみに、ツールバーの「ハイライト」のカスタムカラーについては、アルファ値は設定できない感じでしょうか。
そこは公式テーマもそうなっているようなので、WordPressの仕様に合わせようと思います。
background-clip:padding-boxとし、ボーダー以内を塗りつぶす。
これは思い当たるところは適用しておきました。
三角の作りを変更すると、少しは改善できる。
これに関しては、人物を右にした場合や、吹き出しスタイルを考え事などにした場合に、修正が大変すぎるので見送らさせていただきました。
対策は以下の2つかと思います。
- あえて半透明に触れない。
- 注記で述べユーザーの運用に任せる。
透過色はあえて設定を変更している部分なので、ユーザーの運用に任せたいと思います。
トピックスターター 2025年1月22日 14:10
https://github.com/xserver-inc/cocoon/blob/7f89995082e896775bb05ce9c6fd205075ea54fe/style.css#L7150
以下が漏れている。
background-clip: padding-box;
わいひら reacted
トピックスターター 2025年1月22日 14:52
●ご参考
吹き出しの三角部分をclip-pathで作成。
これにより、デフォルト、フラット、lineのballoon:afterが不要になり、シンプルに。
簡単に確認した程度なので、CSSに漏れがあるかもしれません（特に.not-nested-styleの有無の条件）。
https://notepad.pw/share/zToJXTdF8qlaTOPqQRzw
わいひら reacted
トピックスターター 2025年1月23日 00:49
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.3.4
カテゴリー数：19
タグ数：124
ユーザー数：1
----------------------------------------------
●問題
FAQブロック
wrapに背景色を設定するため、「Q」の部分が透けてしまう。
wrapでなく「A」に背景色を設定する。
.faq-wrap.is-style-accordion{
background-color:transparent;
}
.faq-wrap.is-style-accordion > .faq-answer {
background-color: var(--cocoon-custom-background-color);
}
タブボックス、見出しタブボックス
タブとボックスの重なっている。
●制約
吹き出しブロック、マイクロコピーブロックの作りは先述の通りclip-pathで実現していないため、仕方なし。
clip-pathで改善できるが吹き出し枠の線は消せない。
わいひら reacted
トピックスターター 2025年1月23日 01:32
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.3.5
カテゴリー数：19
タグ数：124
ユーザー数：1
----------------------------------------------
アコーディオンブロックは対策されていました。
私が言っているのは、アコーディオンブロックではなく、「FAQブロック」の「アコーディオン」スタイルです。
タブ見出しボックスですが、以下に修正してみてください。
/* inline-blockだとボックスとタブの間に隙間が空くので、blockにして、タブをコンテンツ幅とする */
.tab-caption-box-label {
display:block;
width: fit-content;
}
/* css\gutenberg-editor.cssでも-3pxを指定しているのでimportantとしています */
.tab-caption-box-content {
margin-top:0!important;
}
/* -26pxだと重なってしまうため */
/* タブの高さ1.8em(23.391px)＋border幅3px分移動させる */
/* 誤差が生じるためタブの高さをline-heightだけでなくheightで24pxとした */
.blank-box.bb-tab .bb-label {
top: -27px;
height: 24px;
}
吹き出しのclip-pathについては
頑張るだけの体力があるか？
頑張っても100%とはならないので、わいひらさんの判断にお任せします。
2025年1月23日 14:49
clip-pathなんですが、透過色を設定しないデフォルトスタイルにおいてブラウザ（Firefox）のズームを変更した時に、線がはみ出すのが気になります。※100%とかだと見えません。
正直、あまり使われるかわからない透過色の設定を気にするより、よく使われるデフォルト状態でズーム倍率を切り替えると縦線が入る方が気になりますね。
この投稿は4週間前 4回ずつわいひらに変更されました
2025年1月23日 14:53
吹き出し口を押し込めば大丈夫にはなりますが、このずれを許容できるかどうかですね。
トピックスターター 2025年1月23日 22:54
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.3.5
カテゴリー数：19
タグ数：124
ユーザー数：1
----------------------------------------------
以下が修正されていることを確認しました。
吹き出しブロックは頑張っても、どこか無理があるので、現状のままとし本件をクローズとします。
- FAQブロック（アコーディオン）
- タブ見出しボックス
- タブボックス
2025年1月24日 22:39
報告忘れてました。ご確認いただきありがとうございます。
吹き出しブロックは頑張っても、どこか無理があるので、現状のままとし本件をクローズとします。
-7.8pxとかで一応は大丈夫ですが、結局透過すると後ろの線が見えちゃうのは一緒ですもんね。
そもそも吹き出しとか、マイクロバルーンを透過で使いたい需要もさしてなさそうなんで、この2ブロックにおいては、透過機能無効とかで良いのかなとも思っています。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。