まいどおおきに！おおもと(@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の吹き出しをカスタマイズする記事でした。
今回のカスタマイズは
- 色の変更
- 三角マーク位置の変更
と簡単なモノばかりです。
吹き出しはブログのリズムを作る大事な要素だと思います。色合いを変えるだけでも個性がでるのでぜひコピペをして使ってくださいね。