吹き出しの背景色とボーダー色の設定方法 - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/ Cocoon ディスカッション掲示板 ja Thu, 16 Apr 2026 07:57:04 +0000 wpForo 60 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78976 Wed, 08 May 2024 10:24:28 +0000 ayatakaさん

拡張色で大丈夫そうですね。

お問い合わせ時には、「どういう使い方をしたいから」ということをお知らせいただくと、お答えし易いです。
用途によって、やり方は変わると思いますので。

次回以降、お書き添えいただけますと助かります。

では、このトピックはクローズさせていただきますね。

]]> Cocoonテーマに関する質問 ｍｋ２ https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78976 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78974 Wed, 08 May 2024 10:01:58 +0000 ●補足

→

設定した吹き出しを、エディターで選んで使用する場合、各々に「sb-id-番号」と言うようにCSSクラスが付加されます。
この為、どの吹き出しに設定したいかで、CSSクラスは変わってきます。

mk2さんが言われるように、予め拡張パレットに設定し、吹き出しを配置する都度、選択するのが望ましいかと思います。

その機能を知りませんでした。
今回もありがとうございました。

 

]]> Cocoonテーマに関する質問 ayataka https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78974 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78973 Wed, 08 May 2024 10:01:13 +0000 @mk2_mk2 

 

返信ありがとうございます。

色が変更できるとは知りませんでした💦

こちらのでの変更の方が無難ですので、こちらで変更します。

いつも本当に有りがとうございます。

]]> Cocoonテーマに関する質問 ayataka https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78973 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78972 Wed, 08 May 2024 10:01:06 +0000 ●補足

→

設定した吹き出しを、エディターで選んで使用する場合、各々に「sb-id-番号」と言うようにCSSクラスが付加されます。
この為、どの吹き出しに設定したいかで、CSSクラスは変わってきます。

mk2さんが言われるように、予め拡張パレットに設定し、吹き出しを配置する都度、選択するのが望ましいかと思います。

]]> Cocoonテーマに関する質問 大門未知子 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78972 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78971 Wed, 08 May 2024 09:48:29 +0000 ayatakaさん

いつも色を変更するのが、大変なので、変更できれば便利だなと思っている所です。

ブロックエディターである、既定の色ならいいのですが、
薄い色にしたいので、毎回設定するのが面倒になっているのです。

こういうことを書いていただかないと、ブロックエディタでできるのにと思ってしまいます。

ちなみに、カラーパレットの「テーマ」の部分の後半6色は、ユーザーが任意に設定ができます。

 
「Cocoon設定」－「エディタ」です。
 
Gutenbergカラーパレットに好みの色を追加する方法
https://wp-cocoon.com/gutenberg-color-palette/
 
これではダメってことなんでしょうか。
 
試しに、拡張色Fを、分かり易いように黒にしてみます。
 
編集画面には、こんな感じで反映されます。
 
 
先にも書いた通り、「どんな理由があって」「どんな使い方をしたいから」、そういうことが分からないと、なかなかお答えしづらいです。
 
機械的に答えれば良いということかもしれませんが。
（その場合、とても不便な方法をお答えすることもあると思います）
 
CSSで書く場合も。
吹き出しを一律全部変更して構わないのか。
それとも、特定のものだけ変更したいのか、その特定とはどんな条件か。
 
そういうことで変わります。
]]> Cocoonテーマに関する質問 ｍｋ２ https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78971 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78970 Wed, 08 May 2024 09:37:07 +0000 @mk2_mk2 

返信ありがとうございます。

いつも色を変更するのが、大変なので、変更できれば便利だなと思っている所です。

ブロックエディターである、既定の色ならいいのですが、
薄い色にしたいので、毎回設定するのが面倒になっているのです。

設定が難しいようでしたら、無理は言いませんが、
もし、良かったら教えて頂ける助かります。

]]> Cocoonテーマに関する質問 ayataka https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78970 RE: 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78968 Wed, 08 May 2024 09:13:41 +0000 ayatakaさん

吹き出しブロックの、人物ではなく、吹き出しの方ってことですよね。

別にCSSを書かなくても、ブロックエディタでできると思いますが、CSSでやりたい何か理由があるでしょうか。
その場合は、その理由など書いていただくと、伝わり易いです。

 
単に、編集画面でできれば良いのであれば、上記のような感じです。
 
まずは、編集画面でどんなことができるのか、いろいろ試してみることだと思います。
（以前も書かせていただきましたが・・・）
 
この辺りのことは、吹き出しブロックに限ったものではありません。
ブロックエディタ共通の使い方です。
 
]]> Cocoonテーマに関する質問 ｍｋ２ https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78968 吹き出しの背景色とボーダー色の設定方法 https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78967 Wed, 08 May 2024 08:39:06 +0000 こんにちは
いつもありがとうございます。
どうぞよろしくお願いいたします

1つ目の吹き出し

背景色　#FFFCEB

ボーダー色　#FFB84C キーカラー

※色はそれぞれ上記の色を希望します。

 

2つの目の吹き出し

背景色　#F8F8F8

ボーダー色　？（吹き出しを表示した時に設定されている、薄いグレーの色）

※こちらは、背景色だけ変更してボーダー色はデフォルトの薄いグレーが希望です。


他のサイトで変更を紹介しているものを見ているのですが、
LINE風となっているので、この通りにやると通常の形とは異なってしまいますか？

どのように書くといいのか、教えてください。

.sb-id-3 .speech-balloon{
background:#85e249;/*コメント部分の「背景色」*/
border-color:#85e249;/*コメント部分の「枠の色」*/
}
.sb-id-3 .speech-balloon::before,.sb-id-3 .speech-balloon::after{
background:none;
border-right-color:#85e249;/*コメントの「三角形の部分の色」*/
}

https://kodomo-daigaku.com/moomoo-purchase-american-stocks/


----------------------------------------------
サイト名：子どもが東大生になるまで
サイトURL：https://kodomo-daigaku.com
ホームURL：https://kodomo-daigaku.com
コンテンツ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.5.3
PHPバージョン：8.2.18
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0
サーバーソフト：LiteSpeed
サーバープロトコル：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.2.3
カテゴリー数：13
タグ数：24
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：4115 バイト
functions.phpサイズ：205 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/uploads/2023/09/523cd3743a1f23371051ba3b9e35f543.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
----------------------------------------------
利用中のプラグイン：
Ad Invalid Click Protector 1.2.8
Akismet Anti-spam: Spam Protection 5.3.2
BackWPup 4.0.4
Broken Link Checker 2.2.4
Code Snippets 3.6.4
Contact Form 7 5.9.3
EWWW Image Optimizer 7.6.0
Flexible Table Block 3.2.0
Jetpack 13.3.1
SiteGuard WP Plugin 1.7.6
WP-Ban 1.69.1
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.19
----------------------------------------------

]]> Cocoonテーマに関する質問 ayataka https://wp-cocoon.com/community/cocoon-theme/%e5%90%b9%e3%81%8d%e5%87%ba%e3%81%97%e3%81%ae%e8%83%8c%e6%99%af%e8%89%b2%e3%81%a8%e3%83%9c%e3%83%bc%e3%83%80%e3%83%bc%e8%89%b2%e3%81%ae%e8%a8%ad%e5%ae%9a%e6%96%b9%e6%b3%95/#post-78967