お仕事の依頼はココをクリック

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

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

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

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

【CSSカスタマイズ】コクーンで使えるＣＳＳを追加するオススメの方法
有料級のワードプレス無料テーマCoccon（コクーン）のCSSカスタマイズ記事のまとめと、ＣＳＳを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
wvtravelclub.jp
2019.03.10

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

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

カスタマイズしたら

おおもと
おおもと

こうなったよ

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

カスタマイズしたら

おおもと
おおもと

こうなったよ

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

カスタマイズしたら

おおもと
おおもと

こうなったよ

考え事
おおもと
おおもと

カスタマイズしたら

おおもと
おおもと

こうなったよ

はい！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の吹き出しをカスタマイズする記事でした。

今回のカスタマイズは

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

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

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

【CSSカスタマイズ】コクーンで使えるＣＳＳを追加するオススメの方法
有料級のワードプレス無料テーマCoccon（コクーン）のCSSカスタマイズ記事のまとめと、ＣＳＳを追加する方法を記載した記事です。 古いカスタマイズから新しいものまで、まとめてますので流し読みをしてください。
wvtravelclub.jp
2019.03.10

Comment

この記事が気に入ったら
Twitterをフォローしよう！
おおもとブログの最新情報をいち早くお届け！