お仕事の依頼はココをクリック
スポンサーリンク
スポンサーリンク

Cocoonカスタマイズ|コピペで簡単かわいい吹き出しを作ってみた

Cocoon吹き出しカスタマイズCocoon
この記事は約11分で読めます。
スポンサーリンク

まいどおおきに!おおもと(@so88qa)です!

この記事は、ワードプレス無料テーマCocoonのカスタマイズ記事です。コピペで簡単にCocoonをカスタマイズする記事を書いていきます!

今回のカスタマイズは↓をみてね♪

デフォルト
おおもと
おおもと

カスタマイズしたら

おおもと
おおもと

こうなったよ

フラット
おおもと
おおもと

カスタマイズしたら

おおもと
おおもと

こうなったよ

ライン風
おおもと
おおもと

カスタマイズしたら

おおもと
おおもと

こうなったよ

考え事
おおもと
おおもと

カスタマイズしたら

おおもと
おおもと

こうなったよ

はい!Cocoonの吹き出しを可愛くしてみました(^^)

今回も、コピペで簡単にできるカスタマイズなので気になる人はマネしてくださいね♪

スポンサーリンク

デフォルト

/*デフォルト左*/
.sbp-l .speech-icon-image{
border-color: #333;
}
.sbp-l .speech-balloon{
background-color:#fff;
border-color: #333;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbp-l .speech-balloon{
top:.5em;
}
}
.sbp-l .speech-balloon::before{
border-color:transparent #333 transparent transparent;
border-width: 7px 10px 7px 0;
}
@media screen and (max-width: 480px){
.sbp-l .speech-balloon::before{
left:-10px;
}
}
.sbp-l .speech-balloon::after{
border-color:transparent #fff transparent transparent;
left:-9px;
border-width: 7px 11px 7px 0;
}
@media screen and (max-width: 480px){
.sbp-l .speech-balloon::after{
left:-7px
}
}
/*デフォルト右*/
.sbp-r .speech-icon-image{
border-color: #333;
}
.sbp-r .speech-balloon{
background-color:#fff;
border-color: #333;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbp-r .speech-balloon{
top:.5em;
}
}
.sbp-r .speech-balloon::before{
border-color:transparent transparent transparent #333;
border-width: 7px 0 7px 10px;
}
@media screen and (max-width: 480px){
.sbp-r .speech-balloon::before{
right:-10px
}
}
.sbp-r .speech-balloon::after{
border-color:transparent transparent transparent #fff;
right:-9px;
border-width: 7px 0 7px 11px;
}
@media screen and (max-width: 480px){
.sbp-r .speech-balloon::after{
right:-7px
}
}
おおもと
おおもと

黒をベースに

ママ
ママ

シンプルにしてみました

注意 デフォルト吹き出しのカスタマイズは全ての吹き出しに反映されるため、デフォルト吹き出しをカスタマイズしたら他の吹き出しもカスタマイズした方がいいです。

フラット

/*フラット左*/
.sbs-flat.sbp-l .speech-icon-image {
border-color: #e5e5e5;
}
.sbs-flat.sbp-l .speech-balloon{
background-color: #e5e5e5;
border-color: #e5e5e5;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-l .speech-balloon{
top:.5em;
}
}
.sbs-flat.sbp-l .speech-balloon::before{
border-color:transparent #e5e5e5 transparent transparent;
border-width: 7px 10px 7px 0;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-l .speech-balloon::before{
left:-10px;
}
}
.sbs-flat.sbp-l .speech-balloon::after{
border-color:transparent #e5e5e5 transparent transparent;
left:-9px;
border-width: 7px 11px 7px 0;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-l .speech-balloon::after{
left:-7px
}
}
/*フラット右*/
.sbs-flat.sbp-r .speech-icon-image{
border-color: #e5e5e5;
}
.sbs-flat.sbp-r .speech-balloon{
background-color:#e5e5e5;
border-color: #e5e5e5;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-r .speech-balloon{
top:.5em;
}
}
.sbs-flat.sbp-r .speech-balloon::before{
border-color:transparent transparent transparent #e5e5e5;
border-width: 7px 0 7px 10px;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-r .speech-balloon::before{
right:-10px
}
}
.sbs-flat.sbp-r .speech-balloon::after{
border-color:transparent transparent transparent #e5e5e5;
right:-9px;
border-width: 7px 0 7px 11px;
}
@media screen and (max-width: 480px){
.sbs-flat.sbp-r .speech-balloon::after{
right:-7px
}
}
むすめ
むすめ

グレーベースに

おおもと
おおもと

シンプルにしてみました

ライン風

/*ライン風左*/
.sbs-line.sbp-l .speech-icon-image {
border-color: #ccc;
}
.sbs-line.sbp-l .speech-balloon{
background-color:#fff;
border-color:#ccc;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-l .speech-balloon{
top:.5em;
}
}
.sbs-line.sbp-l .speech-balloon::before{
border-color:transparent #ccc transparent transparent;
border-width: 7px 10px 7px 0;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-l .speech-balloon::before{
left:-10px;
}
}
.sbs-line.sbp-l .speech-balloon::after{
border-color:transparent #fff transparent transparent;
left:-9px;
border-width: 7px 11px 7px 0;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-l .speech-balloon::after{
left:-7px
}
}
/*ライン風右*/
.sbs-line.sbp-r .speech-icon-image {
border-color: #9ddd93;
}
.sbs-line.sbp-r .speech-balloon{
background-color:#d1f8c2;
border-color:#9ddd93;
border-width:2px;
top:1em;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-r .speech-balloon{
top:.5em;
}
}
.sbs-line.sbp-r .speech-balloon::before{
border-color:transparent transparent transparent #9ddd93;
border-width: 7px 0 7px 10px;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-r .speech-balloon::before{
right:-10px
}
}
.sbs-line.sbp-r .speech-balloon::after{
border-color:transparent transparent transparent #d1f8c2;
right:-9px;
border-width: 7px 0 7px 11px;
}
@media screen and (max-width: 480px){
.sbs-line.sbp-r .speech-balloon::after{
right:-7px
}
}
むすめ
むすめ

元の吹き出しをベースに

ママ
ママ

色合いを整えてみました

考え事

/*考え事左*/
div.sbs-think.sbp-l .speech-icon-image{
border-color: #a5c9ff;
}
div.sbs-think.sbp-l .speech-balloon{
background-color:#fff;
border-color:#a5c9ff;
border-width:2px;
top:0;
}
div.sbs-think.sbp-l .speech-balloon::before,div.sbs-think.sbp-l .speech-balloon::after{
background-color:#fff;
border-color:#a5c9ff;
}
/*考え事右*/
div.sbs-think.sbp-r .speech-icon-image{
border-color: #ffb2b2;
}
div.sbs-think.sbp-r .speech-balloon{
background-color:rgba(255, 178, 178,.5);
border-color:#ffb2b2;
border-width:2px;
top:0;
}
div.sbs-think.sbp-r .speech-balloon::before,div.sbs-think.sbp-r .speech-balloon::after{
background-color:rgba(255, 178, 178,.5);
border-color:#ffb2b2;
}
おじさん
おじさん

吹き出しの形はそのままで

おばさん
おばさん

カワイイくしてみました

まとめ:吹き出しのカスタマイズ

コピペで簡単にCocoonの吹き出しをカスタマイズする記事でした。

今回のカスタマイズは

  • 色の変更
  • 三角マーク位置の変更

と簡単なモノばかりです。

吹き出しはブログのリズムを作る大事な要素だと思います。色合いを変えるだけでも個性がでるのでぜひコピペをして使ってくださいね。

- Comments -

タイトルとURLをコピーしました