サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年5月8日 17:39
こんにちは
いつもありがとうございます。
どうぞよろしくお願いいたします
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
----------------------------------------------
2024年5月8日 18:13
ayatakaさん
吹き出しブロックの、人物ではなく、吹き出しの方ってことですよね。
別にCSSを書かなくても、ブロックエディタでできると思いますが、CSSでやりたい何か理由があるでしょうか。
その場合は、その理由など書いていただくと、伝わり易いです。
単に、編集画面でできれば良いのであれば、上記のような感じです。
まずは、編集画面でどんなことができるのか、いろいろ試してみることだと思います。
（以前も書かせていただきましたが・・・）
（以前も書かせていただきましたが・・・）
この辺りのことは、吹き出しブロックに限ったものではありません。
ブロックエディタ共通の使い方です。
ブロックエディタ共通の使い方です。
Topic starter
2024年5月8日 18:37
返信ありがとうございます。
いつも色を変更するのが、大変なので、変更できれば便利だなと思っている所です。
ブロックエディターである、既定の色ならいいのですが、
薄い色にしたいので、毎回設定するのが面倒になっているのです。
設定が難しいようでしたら、無理は言いませんが、
もし、良かったら教えて頂ける助かります。
2024年5月8日 18:48
ayatakaさん
いつも色を変更するのが、大変なので、変更できれば便利だなと思っている所です。
ブロックエディターである、既定の色ならいいのですが、
薄い色にしたいので、毎回設定するのが面倒になっているのです。
こういうことを書いていただかないと、ブロックエディタでできるのにと思ってしまいます。
ちなみに、カラーパレットの「テーマ」の部分の後半6色は、ユーザーが任意に設定ができます。
「Cocoon設定」－「エディタ」です。
Gutenbergカラーパレットに好みの色を追加する方法
https://wp-cocoon.com/gutenberg-color-palette/
https://wp-cocoon.com/gutenberg-color-palette/
これではダメってことなんでしょうか。
試しに、拡張色Fを、分かり易いように黒にしてみます。
編集画面には、こんな感じで反映されます。
先にも書いた通り、「どんな理由があって」「どんな使い方をしたいから」、そういうことが分からないと、なかなかお答えしづらいです。
機械的に答えれば良いということかもしれませんが。
（その場合、とても不便な方法をお答えすることもあると思います）
（その場合、とても不便な方法をお答えすることもあると思います）
CSSで書く場合も。
吹き出しを一律全部変更して構わないのか。
それとも、特定のものだけ変更したいのか、その特定とはどんな条件か。
それとも、特定のものだけ変更したいのか、その特定とはどんな条件か。
そういうことで変わります。
2024年5月8日 19:24
ayatakaさん
拡張色で大丈夫そうですね。
お問い合わせ時には、「どういう使い方をしたいから」ということをお知らせいただくと、お答えし易いです。
用途によって、やり方は変わると思いますので。
次回以降、お書き添えいただけますと助かります。
では、このトピックはクローズさせていただきますね。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。