Cocoonでは、はじめから10種類の吹き出しが用意されていて、投稿画面からすぐに挿入できます。
既存の吹き出しを挿入する手順は目次3番でまとめています。

自分で用意したアイコンを使いたい!
そんな時の流れはこちら👇
画像の準備 → [吹き出し]オプションとして設定 → 投稿画面で挿入
この記事では、画像サイズの目安・設定の手順・投稿画面での使い方まで、初心者の方にもわかりやすく解説します!
画像の準備 ~ 160px以上の正方形
吹き出し用アイコンは「160px〜200pxの正方形」がおすすめです。
(参考:Cocoon公式より)
実際に私が使ってみたサイズはこちら👇。

160 x 160 pixcelです。
(公式推奨)

194 x 194 pixcelです。

201 x 201 pixcelです。

212 x 212 pixcelです。

230 x 230 pixcelです。

同じく230 x 230 pixcelです。
使えるので良かったです・・・!
200pxを少し超えても表示は安定していました。
無理にピッタリにしなくても、表示に支障はなさそうです♪。
小さなキャラを演出したいとき
例えば、カタツムリやアリ、子どもキャラなど、小ささを強調したいときはこうします。
アイコン画像自体は160×160のままで、キャラだけ小さく配置し、余白を広めに取る
これで、表示上「小さく見える」吹き出しが完成します♪。

Mom!!! I’m a BIG girl now!

実際に娘アイコンを作ったとき、小さくしすぎて怒られました(笑)。
吹き出しアイコンの登録方法
画像の準備ができたら、それを吹き出しアイコンとして登録します。
1.[Cocoon設定]>[吹き出し]をクリック。

2.一番上の[新規追加]をクリック。

3.登録画面が表示されます。設定は7項目!

・タイトル:投稿画面で選ぶときに表示される名前(例:「いくみ 笑顔」など)。
タイトルを見て吹き出しを選ぶことになるので、分かりやすいキーワードをいれるといいと思います。
更に、複数の表情を用意した方は、よく使う順で番号をつけるのがおススメです。

名前:吹き出しの下に表示されるテキスト。自分のアイコンにはライター名を入力するといいですね。推奨は6文字以内。未入力のままでもOK。投稿画面でも簡単に編集できます。

どうも。いくみです。

武者小路さくら子です。
←名前が長くなると、2行で表示されます。
アイコン画像:[選択]をクリックして、準備した画像を選びます。
その下にある項目、吹き出しスタイル・人物位置・アイコンスタイルは、一番よく使いたいオプションを選んでおくと便利です。投稿画面でも自由に変更できますが、ここでの設定が初期設定になります。
吹き出しスタイルは4種類あります。

デフォルトです。

フラットです。
LINE風は、「人物位置」が「左」だと、「デフォルト」とほぼ同じになります。少し、線の太さが違いますね。

LINE風+左です。

LINE風+右です。

考え事です。
人物位置は「左」か「右」です。

デフォルトスタイルで、人物位置が左です。

考え事スタイルで人物位置右です。
アイコンスタイル:アイコン周りの枠の形と表示・非表示を選べます。

四角(枠線なし)です。

四角(枠線あり)です。

丸(枠線なし)です。

丸(枠線あり)です。
TinyMCE:投稿画面のリストに表示させるかどうかの設定。全然使わないアイコンは、非表示でもOKですね。(ドロップダウンリストに載らないだけで、また設定を変えれば使えます。)
4.一番下にある[保存]ボタンをクリック!
これを、必要回数繰り返します。
できたら、新しく投稿画面を開いて確認してみましょう。
投稿画面でアイコンを挿入する手順

簡単です。投稿画面で「吹き出し」ブロックを選ぶだけ!
1.ブロックの右辺にプラスサインが表示されています。クリック。
以下のようになります。
ここに、[吹き出し]メニューがリストされていたらクリック。無ければ、ブロックの検索ボックスに吹き出しと入力。メニューが表示されるのでクリック。
3.右サイドに吹き出しの[スタイル設定]が出ます。そこで、吹き出しやスタイルをお好みで選びます。

4.中に文字を入力して完了です!
おわりに
吹き出しを使うと、“語りかける”ような記事が作れます。
自分の本音や感想を伝えやすく、人間味が出るのも良いところ。
アイコンと短文で、小休止的な効果もありますし、目立ちやすくもなるのもいいですね。
いいことだらけ!

Cocoonの名物機能、「吹き出し」の紹介でした!
コメント