【Cocoon設定】吹き出しアイコンの画像サイズ・登録・挿入手順まとめ

Cocoonでは、はじめから10種類の吹き出しが用意されていて、投稿画面からすぐに挿入できます。

既存の吹き出しを挿入する手順は目次３番でまとめています。

そんな時の流れはこちら👇

この記事では、画像サイズの目安・設定の手順・投稿画面での使い方まで、初心者の方にもわかりやすく解説します！

画像の準備 ～ 160px以上の正方形

吹き出し用アイコンは「160px〜200pxの正方形」がおすすめです。
（参考：Cocoon公式より）

実際に私が使ってみたサイズはこちら👇。

200pxを少し超えても表示は安定していました。
無理にピッタリにしなくても、表示に支障はなさそうです♪。

小さなキャラを演出したいとき

例えば、カタツムリやアリ、子どもキャラなど、小ささを強調したいときはこうします。

アイコン画像自体は160×160のままで、キャラだけ小さく配置し、余白を広めに取る

これで、表示上「小さく見える」吹き出しが完成します♪。

吹き出しアイコンの登録方法

画像の準備ができたら、それを吹き出しアイコンとして登録します。

１．[Cocoon設定]>[吹き出し]をクリック。

２．一番上の[新規追加]をクリック。

３．登録画面が表示されます。設定は７項目！

・タイトル：投稿画面で選ぶときに表示される名前（例：「いくみ 笑顔」など）。

タイトルを見て吹き出しを選ぶことになるので、分かりやすいキーワードをいれるといいと思います。
更に、複数の表情を用意した方は、よく使う順で番号をつけるのがおススメです。

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

アイコン画像：[選択]をクリックして、準備した画像を選びます。

吹き出しスタイルは４種類あります。

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

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

アイコンスタイル：アイコン周りの枠の形と表示・非表示を選べます。

TinyMCE：投稿画面のリストに表示させるかどうかの設定。全然使わないアイコンは、非表示でもOKですね。（ドロップダウンリストに載らないだけで、また設定を変えれば使えます。）

４．一番下にある[保存]ボタンをクリック！

これを、必要回数繰り返します。

できたら、新しく投稿画面を開いて確認してみましょう。

投稿画面でアイコンを挿入する手順

１．ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

ここに、[吹き出し]メニューがリストされていたらクリック。無ければ、ブロックの検索ボックスに吹き出しと入力。メニューが表示されるのでクリック。

３．右サイドに吹き出しの[スタイル設定]が出ます。そこで、吹き出しやスタイルをお好みで選びます。

４．中に文字を入力して完了です！

おわりに

吹き出しを使うと、“語りかける”ような記事が作れます。

自分の本音や感想を伝えやすく、人間味が出るのも良いところ。

アイコンと短文で、小休止的な効果もありますし、目立ちやすくもなるのもいいですね。

いいことだらけ！