
Cocoonの吹き出しってどうやって使うのかな?
ブログ記事に吹き出しがあると読みやすいので、自分のブログにも設置してみたいですよね。
Cocoonならあらかじめ設定しておくと、いつでも自由に記事内に吹き出しを入れられます。
そこで今回は『Cocoonの吹き出し機能の設定方法と使い方』を詳しく解説していきます。

吹き出しを使う際に知っておくと便利なコツもお伝えしていきますので、ぜひ参考にしてみてください。
動画でも解説しています。
Cocoonの吹き出しの設定方法
Cocoonの吹き出しは『Cocoon設定 ⇒ 吹き出し』から設定を行います。
設定項目はこちらの7つです。
- タイトル
- 名前
- アイコン画像
- 吹き出しスタイル
- 人物位置
- アイコンスタイル
- TinyMCE
次から各項目について詳しく解説していきます。
タイトル
Cocoonの吹き出しのタイトルは、投稿画面上でこのように表示されます。
自分が利用する際に分かりやすいタイトルを付けてください。
また、投稿画面上に表示されるタイトルは『数字 ⇒ ローマ字 ⇒ 五十音』の順番です。
タイトルの最初に数字を入れておくと、その順番に並びます。
吹き出しの種類が増えると探すのが大変なので、利用頻度順や種類別に数字を入れて探しやすく並べておくのがオススメです。
名前
Cocoonの吹き出しの名前は、記事内でこのように表示されます。
空欄にすると名前は何も表示されませんので、不要な場合は空欄のままで大丈夫です。
アイコン画像
吹き出しに表示させるアイコン画像はこちらで設定します。
サイズは160px以上の正方形が推奨となっていますが、あまり大きくても意味がありませんので、160px~200pxくらいが良いです。
なお、アイコン用の画像がない方は、ココナラで依頼するのがオススメです。
実際、僕のアイコンもココナラで1枚1000円で作ってもらいました。
オリジナルのアイコン画像があれば、吹き出しだけじゃなくプロフィールやTwitterなどでも利用できます。
ちなみにココナラでアイコン作成を依頼する場合は、以下の3つがポイントです。
- png形式で背景を透明にする(利用の幅が広がる)
- 大きめ(700px×700px程度)で作成し、吹き出し用は縮小して使う
- 最初は正面向きのアイコンが無難(依頼する顔の向きに気を付ける)
特に3番の『顔の向き』は気を付けてください。
このように顔の向きと吹き出しの向きが逆になってしまうと違和感があるからです。
しかし、正面向きのアイコンなら吹き出しが右でも左でも違和感はありません。
顔の向きや表情のバリエーションは、ブログ運営に慣れてきてから再度依頼することもできます。
ですから、初めてアイコン作成を依頼する場合は、幅広く活用できる正面向きがオススメです。
⇒ ココナラはこちら
\招待コード『A9A533』入力で300円分のポイントGET/
吹き出しスタイル
Cocoonの吹き出しスタイルでは、吹き出しの形状を以下の4つから選択できます。
この吹き出しスタイルは、お好みで選択してください。
なお、利用しているスキンによって、表示のデザインが変わる場合がありますのでご了承ください。
人物位置
Cocoonの吹き出しの人物位置では、アイコン画像の位置を『左』か『右』を選択できます。
先ほどアイコン画像の顔の向きについてお伝えしましたが、アイコンが右向きなら人物位置は『左』、アイコンが左向きなら人物位置は『右』が自然です。
アイコンが正面を向いているなら、『左』でも『右』でもどちらでも構いません。
ただし、会話形式にしたい場合は、片方を『左』、もう一方を『右』にしたほうが見栄えが良くなりますので、二人以上のアイコンを使う場合は、その辺も考慮して設定してください。
アイコンスタイル
Cocoonの吹き出しのアイコンスタイルでは、アイコンの形状を以下の4つから選択できます。
このアイコンスタイルは、お好みで選択してください。
TinyMCE
Cocoonの吹き出しのTinyMCEには、基本的にチェックを入れておきましょう。
チェックを入れておくと、投稿画面のドロップダウンリストに表示されます。
TinyMCEのチェックを外すと、このドロップダウンリストに表示されませんので、お気を付けください。
Cocoonの吹き出しの使い方【クラシック編】
ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックで吹き出しを作成する方法をお伝えします。
吹き出しはどちらも『吹き出し』メニューから選択します。
なお、操作手順は全く同じなので、ここではクラシックエディターのビジュアルモードを使っていきます。
まずは吹き出しで表示させるテキストを入力して選択します。
『吹き出し』メニューをクリックして、設置する吹き出しの種類を選択します。
クラシック編の吹き出しの設置は、これで完了です。
Cocoonの吹き出しの使い方【ブロック編】
ここからはGutenbergのブロック機能を使った吹き出しの設置方法を解説していきます。
まず『ブロックの追加』をクリックして『すべて表示』へ進みます。
『Cocoonブロック』内の『吹き出し』ブロックを選択します。
Cocoon設定で設定した吹き出しの中から、一番上の吹き出しが自動で設置されます。
設置された吹き出しは、右側の設定メニューで変更できます。
Cocoon設定で設定した吹き出しをベースに、吹き出しの形状、位置、アイコンのスタイルもカスタマイズ可能です。
元々右側で設定していた吹き出しを左側に変更する、といった変更も可能です。
さらに、右側の設定メニューを下にスクロールすると『吹き出し色の設定』もできます。
変更できる色は、この3ヵ所です。
- 背景色(吹き出しの中の色)
- 文字色
- ボーダー色(吹き出しの枠の色)
クラシックではできない、このようなカスタマイズもできますので、ぜひ自分好みの吹き出しを作ってみてください。
まとめ
今回は『Cocoonの吹き出し機能の設定方法と使い方』について解説してきました。
最後に知っておくと便利なコツをまとめておきます。
- 吹き出しのタイトルに数字を入れて利用しやすい順番に並べる
- ココナラでアイコン作成を依頼する際のポイント
- png形式で背景を透明にする
- 大きめ(700px×700px程度)で作成し、吹き出し用は縮小して使う
- 最初は正面向きのアイコンが無難
- Cocoonの吹き出しの人物位置
- 顔が右向きなら人物位置は『左』
- 顔が左向きなら人物位置は『右』
- 顔の向きが正面なら左右どちらでも良い
- 会話風にする場合は左右交互が見やすい
- Gutenbergの吹き出しブロックを使うとカスタマイズが簡単
最初の設定は多少手間がかかりますが、一度設定しておけばいつでも簡単に使えますので、ぜひ試してみてくださいね。