【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;//好きな色
}

色について

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

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

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

影を大きくする

.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の変更が反映されない場合

キャッシュ系プラグイン

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

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

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

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

まとめ

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

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