【Cocoon】吹き出しをオシャレにカスタマイズする方法！

どうもおはようポテト(@ohayoupoteto22)です。

本サイトでも使わせていただいているCocoon。

そんなCocoon、スキンなども設定すれば色々いじらなくてもとても可愛いデザインになっているのですが、一つだけ気になったのがこの吹き出し。

シンプルでいいけど…

うーん、もうちょっと可愛くできそうじゃない？？

ということで今回は

という方に向けて「Cocoonの吹き出しをオシャレにカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

Cocoonの吹き出しのカスタマイズ方法

手順

「外観」→「テーマエディター」、もしくはFTPソフトなどを利用して、子テーマの「Style.css」に以下のCSSを貼り付けます

.speech-icon img, .speech-icon amp-img {
  border:0px;//デフォルトの枠線を消す
  box-shadow: 0 0 7px #f8c678;//好きな色
}
div.speech-balloon {
  border: 1.5px solid #f8c678;//好きな色
}
div.speech-balloon::before {
  border-right: 12px solid #f8c678;//好きな色
}
.sbp-r .speech-balloon::before {
  border-left: 12px solid #f8c678;//好きな色
}

色について

「//好きな色」となっているところのカラーコードを変えることで、吹き出しを好きな色に変えることができます

色はサイトのテーマカラーなどにすると一体感があっていい感じになりそうですね⸜( ´ ꒳ ` )⸝

自分好みにカスタマイズもできる！

影を大きくする

.speech-icon img, .speech-icon amp-img {
  box-shadow: 0 0 10px #f8c678;
}

キャラの周りに線をつける

speech-icon img, .speech-icon amp-img {
  border:2px solid #f8c678;
  box-shadow: 0 0 7px #f8c678;
}

0にしていたborderのところの値を指定してあげると、キャラの周りの枠に線をつける(太さを指定する)こともできます

キャラの周りの影を消す

speech-icon img, .speech-icon amp-img {
  border:2px solid #f8c678;
}

更にbox-shadowプロパティのところを消してあげればよりくっきりな線に。

吹き出しの枠線の幅を大きくする

div.speech-balloon {
  border: 3px solid #f8c678;
}

「1.5px」と指定していたところを変えてあげると吹き出しの枠線の幅を変えることもできます。「3px」にしてみるとこんな感じに↓

(1.5〜3pxあたりがオススメです)

吹き出しの枠線を点線にする

div.speech-balloon {
  border: 1.5px dashed #f8c678;
}

「solid」と指定していたところを「dashed」にしてあげると吹き出しの枠線を点線にすることもできます。

最後に

以上となります。

やっぱり吹き出しは記事でも目立つ箇所だと思うので可愛くカスタマイズしておくに越したことはないですね

【Cocoon】記事下の関連記事をおしゃれにカスタマイズする方法

【Cocoon】目次をマテリアル風におしゃれにするカスタマイズ方法

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝