こんにちわ。KaibaSAKAMOTOです。
他のブログやホームページでよく見る「吹き出し」。
視覚的にも目に止まりやすいし、惹かれやすいので、「ちょっと見てみよっかな」と興味を持ってもらえるアイテムです。
本記事では、「Cocoon」にもともと入っている「吹き出し」のレパートリーを増やす方法を説明します。
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/shigoto_zaitaku_cat_woman.png)
【吹き出し】デフォルトの種類
Cocoonの「カユトド*」は毎回ありがたい限りです。
*痒い所に手が届く。「そんなもん略さなくてもええわい!!」って声が聞こえてきそうですが。笑
Cocoonのこういう部分は作り手わいひらさんの愛情が伝わってきます。
さて、デフォルトを確認しておきます。
Cocoonブロックの中に格納されています。
![Coco1n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/man.png)
ワタシは[SAMPLE 001] 男性(左)という名前で出ています。特技は後ろ三重跳びです。
![Coco2n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/woman.png)
ワタシは[SAMPLE 002] 女性(右)と申します。秋田出身秋田育ちのチャキチャキの秋田っ子です。飼っている犬は秋田犬「アキータ」で、好きなお笑い芸人はモチのロン「ねじ」です。
![Coco3n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/b-man.png)
ワタシは[SAMPLE 003] ビジネスマン(左)です。社会人3年目です。将来の夢は、会社を起業することです。頑張ります。よろしくお願いしします。
![Coco4n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/b-woman.png)
ワタシは[SAMPLE 004] 女性(右)と申します。ワタシの毎日の楽しみは横断歩道でスキップして渡ることです。すごく心が軽くなるんですよ。みなさんも是非試してみてくださいね。
![Coco5n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/ojisan.png)
ワタシは[SAMPLE 005] おじさん(左)です。そろそろ読むのが億劫になって
![Coco6n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/obasan.png)
ワタシは[SAMPLE 006] おばさん(右)です。来ていると思いますので飛ばしていきます。一言だけ。ワタシがおばさんになったら、あなたはおじさんよ♫。
![Coco7n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/doctor.png)
ワタシは[SAMPLE 007] 男性医師(左)です。パスで。
![Coco8n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/doctress.png)
ワタシは[SAMPLE 008] 女性医師(右)です。三密だけは注意しておきます。
![Coco9n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/doya-man.png)
ワタシは[SAMPLE 009] どや顔男性(左)です。そろそろ終わりです。
![Coco10n](http://blog-bbanzai-life.com/wp-content/themes/cocoon-master/images/doya-woman.png)
ワタシは[SAMPLE 0010] どや顔女性(右)です。お疲れさまでしたww。
以上がデフォルトでした。
【吹き出し】レパートリーの追加
それでは、デフォルトに、新たなレパートリーを加えていきます。
イラスト追加
まず始めに、窓に入れるイラストを
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/f2b3144aee7e1187f9fac2bd2f5048c7-1024x805.png)
や
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/66ddecea7ee8435b3f1187497b626197-1024x715.png)
で探します。
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/1910842-1024x1024.jpg)
今回は左図のような「外国人」をイラストACからダウンロードしてみました。
できれば、上半身とかの方が好ましいですね。
【吹き出し】Cocoon設定で画像取り込み
それでは選んだ画像をCocoonの吹き出しに挿入していきます。
まずは、ダッシュボードの「Cocoon設定」をクリックし、「吹き出し」をクリックします。
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/a7d6617e4e2dc85431ba0a09fe3271b5.png)
新規追加をクリックします。
![](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/c848e977029dbd10e89b15be9db50e0d-1024x448.png)
「タイトル」(例:[SAMPLE 011] 外国人女性(左))と「名前」(未入力でもOKです)
そして「アイコン画像」という箇所に、ダウンロードした画像を入れていきます。
選択 → ファイルをアップロード → ファイルを選択 → ダウンロード
で画像を選んでいけばOKです。
「吹き出しスタイル」と「人物位置」「アイコンスタイル」を設定すれば完成です!
その下の、「保存ボタン」を押すのをお忘れなく。
![Coc11n](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/1910842-scaled.jpg)
「吹き出し」は「Cocoonブロック」の中に格納されています。
あとは、画面右の「設定-ブロック」の「人物」でワタシを選んで。
「デフォルト」「位置」「アイコンスタイル」「吹き出し色設定」「文字色」「ボーダー色」を選んで、全て完了です。
![Coc12n](https://blog-bbanzai-life.com/wp-content/uploads/2020/05/1910842-scaled.jpg)
「アイコンスタイル」で丸を選ぶと、こんな感じで、右上端っこ「?」が欠けちゃうときがあるから、その場合は「四角」を選ぶと良いですよ^ ^。
コメント