＃048　Cocoonで新しい吹き出しを設定してみる

イントロダクション

今回は、前回の記事で作成した吹き出し用のアバター4パターンを実装してみようというのが目的となりますね。

私は最初から吹き出し設定のあるCocoonというテーマを使ってますので比較的簡単に実装できるようですが、他のテーマだとプラグインを入れたりCSSやらHTMLやらを追記しないといけない場合もあるそうです。

また面倒臭い設定地獄かと思いましたが、割とすぐ終わりそうで安心しました。
（これがフラグだったと気が付いたのは、数時間後の事でした……）

では、さっそく実装の方をしていこうと思います。

Cocoonの吹き出し設定

ダッシュボードから『Cocoon設定』→『吹き出し』を選択。上の方にある『新規追加』を押すと下記のような画面になると思います。

タイトルは自分で解るようなものなら何でもいいらしいので、私は『神音（喜）』とか適当に入れてみました。

名前は吹き出しの下に表示される文字ですので、私の場合はキャラ名である『神音』と入力しました。

アイコン画像の所に作成したイラストを選択したら、あとは自分の好きなように設定をしていったらいいと思います。私の場合は面倒なので全部デフォルト設定ですが。

と、いう事で保存すると↓下記のような吹き出しが新規追加されます。

うん、超微妙ですね。

ってな訳で、イラストに背景を追加したりCSSを追記してチョイチョイ改修してみようと思います。

約1時間後。とりあえず完成したのが↑上記の画像のものとなりますね。

正直、色々と改修してみましたが、あんまり私の琴線に触れるような出来にはならなかったというのが現実だったりします。

しかし、これ以上の時間を費やしても大してクオリティも上がらないですし、色々と妥協する事にして、今後しばらくはこいつを使用していく事になりました。

一応、他の3パターンも実装していますので、今後の記事で活躍してくれると思います。

では、最後の御挨拶の方を私の吹き出しにやってもらいましょう。

今回使用したCSS

/*吹き出し画像の拡大*/
.sb-id-11 .speech-person{
width:130px;
}
.sb-id-12 .speech-person{
width:130px;
}
.sb-id-13 .speech-person{
width:130px;
}
.sb-id-14 .speech-person{
width:130px;
}
/*吹き出しカスタマイズ*/
.speech-icon img, .speech-icon amp-img {
  border:0px;//デフォルトの枠線を消す
  box-shadow: 0 0 7px #00FF00;//好きな色
　}
div.speech-balloon {
  border: 1.5px solid #00FF00;//好きな色
}
div.speech-balloon::before {
  border-right: 12px solid #ffdead;//好きな色
}
.sbp-r .speech-balloon::before {
  border-left: 12px solid #ffdead;//好きな色
}
.speech-icon img, .speech-icon amp-img {
  box-shadow: 0 0 10px #00FF00;//好きな色
}
div.speech-balloon {
  border: 3px solid #ffdead;//好きな色
}
/*吹き出し背景色*/
.sb-id-11 .speech-balloon{
background:#FFFFDD;/*コメント部分の「背景色」*/
}
.sb-id-11 .speech-balloon::after {
  border-right: 12px solid #FFFFDD; /* 三角部分の内側（背景）の色 */
}
.sb-id-12 .speech-balloon{
background:#FFFFDD;/*コメント部分の「背景色」*/
}
.sb-id-12 .speech-balloon::after {
  border-right: 12px solid #FFFFDD; /* 三角部分の内側（背景）の色 */
}
.sb-id-13 .speech-balloon{
background:#FFFFDD;/*コメント部分の「背景色」*/
}
.sb-id-13 .speech-balloon::after {
  border-right: 12px solid #FFFFDD; /* 三角部分の内側（背景）の色 */
}
.sb-id-14 .speech-balloon{
background:#FFFFDD;/*コメント部分の「背景色」*/
}
.sb-id-14 .speech-balloon::after {
  border-right: 12px solid #FFFFDD; /* 三角部分の内側（背景）の色 */
}

※私の場合は4つ吹き出しを増やしたので、id-11～14までの部分がそれぞれ喜怒哀楽の吹き出しに対応したものとなっています。

ちなみに、吹き出しの設定が『デフォルト』以外だと適応されるかどうか不明だったりします。

今回の経費＆記事作成時間

一応、吹き出しの実装は終わりましたが、自分でもよく解ってない部分が多いので、暫くしたらまた改修作業をしてみたいと思います。

※追記。↑新しい吹き出し作成記事はこちらとなります。

では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。

最後まで読んでくださった方はありがとうございました。

※リライト作業済みの記事です。