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

2020 8/10

まいどおおきに！おおもと(@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;
 }