...

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

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

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

そんな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;//好きな色
}

…以上です!

 

もう終わり!?

ソロモン

ブログ主

簡単でしょ?

 

色について

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

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

参考 配色パターン見本40選:ベストな色の組み合わせを探せるツールサルワカ

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

影を大きくする

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

box-shadowの3つ目の値を変えてあげるとキャラの周りの枠の影の幅を太くしてあげることもできます
(7〜10pxらへんがオススメかな?)

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

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の関連記事をカスタマイズする方法【Cocoon】記事下の関連記事一覧をおしゃれにカスタマイズする方法

 

Cocoonの目次のカスタマイズする方法【コピペでOK】Cocoonの目次を見やすくカスタマイズする方法

 

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA