【Cocoon】吹き出しの色を変えてオシャレにカスタマイズする方法

【Cocoon】吹き出しの色を変えてオシャレにカスタマイズする方法

くるみ

吹き出しをオシャな感じにしたいんだけど
ということで今回は

  • Cocoonを使っているけどデフォルトのデザインでは物足りない
  • 楽に吹き出しの色を変更したい

という方に向けて「Cocoonの吹き出しをオシャレにカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

Cocoonの吹き出しの色を変えるカスタマイズ方法

CSSを加える

「外観」→「テーマエディター」、もしくはFTPソフトなどを利用して、子テーマの「style.css」に以下のCSSを貼り付けます

.speech-icon img, .speech-icon amp-img {
  border:0px;//デフォルトの枠線を消す
  box-shadow: 0 0 7px #f8c678;//好きな色
}
div.speech-balloon {
  border: 1.5px solid #f8c678;//好きな色
}
div.speech-balloon::before {
  border-right: 12px solid #f8c678;//好きな色
}
.sbp-r .speech-balloon::before {
  border-left: 12px solid #f8c678;//好きな色
}

ブログ主

簡単でしょ?

色について

「//好きな色」となっているところのカラーコードを変えることで、吹き出しを好きな色に変えることができます。

色はサイトのテーマカラーなどにすると一体感があっていい感じになりそうですね。

参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ
色を変えていい感じになったけどもっと細かくデザインいじりたいな

くるみ

ということで次は吹き出しの色んなパターンのカスタマイズについて見ていきましょう。

色んなパターンの吹き出しカスタマイズ

影を大きくする

.speech-icon img, .speech-icon amp-img {
  box-shadow: 0 0 10px #f8c678;
}

box-shadowの3つ目の値を変えてあげるとキャラの周りの枠の影の幅を太くしてあげることもできます。

影を大きくする

キャラの周りに線をつける

speech-icon img, .speech-icon amp-img {
  border:2px solid #f8c678;
  box-shadow: 0 0 7px #f8c678;
}

0にしていたborderのところの値を指定してあげると、キャラの周りの枠に線をつける(太さを指定する)こともできます。

キャラの周りに線をつける

キャラの周りの影を消す

speech-icon img, .speech-icon amp-img {
  border:2px solid #f8c678;
}

更にbox-shadowプロパティのところを消してあげればよりくっきりな線に。

キャラの周りの影を消す

吹き出しの枠線の幅を大きくする

div.speech-balloon {
  border: 3px solid #f8c678;
}

「1.5px」と指定していたところを変えてあげると吹き出しの枠線の幅を変えることもできます。以下は「3px」にしてた場合です。

吹き出しの枠線の幅を大きくする

吹き出しの枠線を点線にする

div.speech-balloon {
  border: 1.5px dashed #f8c678;
}

「solid」と指定していたところを「dashed」にしてあげると吹き出しの枠線を点線にすることもできます。

吹き出しの枠線を点線にする

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上となります。Cocoonのオシャレな吹き出しカスタマイズまとめでした。

他にもCocoonカスタマイズの記事書いてるのでぜひ参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。