くるみ
- 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のおしゃれなカスタマイズ全集【初心者もコピペで簡単】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝