まいどおおきに！おおもと(@so88qa)です！
この記事は、ワードプレス無料テーマCocoonのカスタマイズ記事です。コピペで簡単にCocoonをカスタマイズする記事を書いていきます！
今回のカスタマイズは↓をみてね♪
デフォルト
おおもと
カスタマイズしたら
おおもと
こうなったよ
フラット
おおもと
カスタマイズしたら
おおもと
こうなったよ
ライン風
おおもと
カスタマイズしたら
おおもと
こうなったよ
考え事
おおもと
カスタマイズしたら
おおもと
こうなったよ
はい！Cocoonの吹き出しを可愛くしてみました(^^)
今回も、コピペで簡単にできるカスタマイズなので気になる人はマネしてくださいね♪
Contents
デフォルト
/*デフォルト左*/
.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の吹き出しをカスタマイズする記事でした。
今回のカスタマイズは
- 色の変更
- 三角マーク位置の変更
と簡単なモノばかりです。
吹き出しはブログのリズムを作る大事な要素だと思います。色合いを変えるだけでも個性がでるのでぜひコピペをして使ってくださいね。