Cocoonの吹き出し機能の設定方法と使い方!便利なコツも解説

Cocoonの吹き出し機能の設定方法と使い方!便利なコツも解説Cocoonの使い方

Cocoonの吹き出しってどうやって使うのかな?

ブログ記事に吹き出しがあると読みやすいので、自分のブログにも設置してみたいですよね。

Cocoonならあらかじめ設定しておくと、いつでも自由に記事内に吹き出しを入れられます。

そこで今回は『Cocoonの吹き出し機能の設定方法と使い方』を詳しく解説していきます。

吹き出しを使う際に知っておくと便利なコツもお伝えしていきますので、ぜひ参考にしてみてください。

 

動画でも解説しています。

スポンサーリンク

Cocoonの吹き出しの設定方法

Cocoonの吹き出しは『Cocoon設定 ⇒ 吹き出し』から設定を行います。

Cocoon設定の吹き出し

 

設定項目はこちらの7つです。

  1. タイトル
  2. 名前
  3. アイコン画像
  4. 吹き出しスタイル
  5. 人物位置
  6. アイコンスタイル
  7. TinyMCE

次から各項目について詳しく解説していきます。

タイトル

Cocoonの吹き出しのタイトル

Cocoonの吹き出しのタイトルは、投稿画面上でこのように表示されます。

投稿画面上の吹き出しのタイトル

自分が利用する際に分かりやすいタイトルを付けてください。

また、投稿画面上に表示されるタイトルは『数字 ⇒ ローマ字 ⇒ 五十音』の順番です。

タイトルの最初に数字を入れておくと、その順番に並びます。

吹き出しの種類が増えると探すのが大変なので、利用頻度順や種類別に数字を入れて探しやすく並べておくのがオススメです。

名前

Cocoonの吹き出しの名前

Cocoonの吹き出しの名前は、記事内でこのように表示されます。

Cocoonの吹き出しに名前を入れた場合の表示例

空欄にすると名前は何も表示されませんので、不要な場合は空欄のままで大丈夫です。

アイコン画像

Cocoonの吹き出しのアイコン画像

吹き出しに表示させるアイコン画像はこちらで設定します。

サイズは160px以上の正方形が推奨となっていますが、あまり大きくても意味がありませんので、160px~200pxくらいが良いです。

なお、アイコン用の画像がない方は、ココナラで依頼するのがオススメです。

実際、僕のアイコンもココナラで1枚1000円で作ってもらいました。

オリジナルのアイコン画像があれば、吹き出しだけじゃなくプロフィールやTwitterなどでも利用できます。

 

ちなみにココナラでアイコン作成を依頼する場合は、以下の3つがポイントです。

  1. png形式で背景を透明にする(利用の幅が広がる)
  2. 大きめ(700px×700px程度)で作成し、吹き出し用は縮小して使う
  3. 最初は正面向きのアイコンが無難(依頼する顔の向きに気を付ける)

特に3番の『顔の向き』は気を付けてください。

このように顔の向きと吹き出しの向きが逆になってしまうと違和感があるからです。

顔の向きと吹き出しの向きが逆

 

しかし、正面向きのアイコンなら吹き出しが右でも左でも違和感はありません。

正面を向いたアイコンの吹き出し

顔の向きや表情のバリエーションは、ブログ運営に慣れてきてから再度依頼することもできます。

ですから、初めてアイコン作成を依頼する場合は、幅広く活用できる正面向きがオススメです。

⇒ ココナラはこちら

吹き出しスタイル

Cocoonの吹き出しスタイル

Cocoonの吹き出しスタイルでは、吹き出しの形状を以下の4つから選択できます。

Cocoonの吹き出しスタイルの例

この吹き出しスタイルは、お好みで選択してください。

なお、利用しているスキンによって、表示のデザインが変わる場合がありますのでご了承ください。

人物位置

Cocoonの吹き出しの人物位置

Cocoonの吹き出しの人物位置では、アイコン画像の位置を『左』か『右』を選択できます。

Cocoonの吹き出しの人物位置の例

先ほどアイコン画像の顔の向きについてお伝えしましたが、アイコンが右向きなら人物位置は『左』、アイコンが左向きなら人物位置は『右』が自然です。

アイコンが正面を向いているなら、『左』でも『右』でもどちらでも構いません。

ただし、会話形式にしたい場合は、片方を『左』、もう一方を『右』にしたほうが見栄えが良くなりますので、二人以上のアイコンを使う場合は、その辺も考慮して設定してください。

アイコンスタイル

Cocoonの吹き出しのアイコンスタイル

Cocoonの吹き出しのアイコンスタイルでは、アイコンの形状を以下の4つから選択できます。

Cocoonの吹き出しのアイコンスタイルの例

このアイコンスタイルは、お好みで選択してください。

TinyMCE

Cocoonの吹き出しのTinyMCE

Cocoonの吹き出しのTinyMCEには、基本的にチェックを入れておきましょう。

チェックを入れておくと、投稿画面のドロップダウンリストに表示されます。

Cocoonの吹き出しのドロップダウンリスト

TinyMCEのチェックを外すと、このドロップダウンリストに表示されませんので、お気を付けください。

スポンサーリンク

Cocoonの吹き出しの使い方【クラシック編】

ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックで吹き出しを作成する方法をお伝えします。

吹き出しはどちらも『吹き出し』メニューから選択します。

【クラシックエディターのビジュアルモード】
クラシックエディターのビジュアルモード

【Gutenbergのクラシックブロック】
Gutenbergのクラシックブロック

なお、操作手順は全く同じなので、ここではクラシックエディターのビジュアルモードを使っていきます。

 

まずは吹き出しで表示させるテキストを入力して選択します。

吹き出しで表示させるテキストを入力して選択

 

『吹き出し』メニューをクリックして、設置する吹き出しの種類を選択します。

設置する吹き出しの種類を選択

 

クラシック編の吹き出しの設置は、これで完了です。

吹き出しの設置完了

Cocoonの吹き出しの使い方【ブロック編】

ここからはGutenbergのブロック機能を使った吹き出しの設置方法を解説していきます。

まず『ブロックの追加』をクリックして『すべて表示』へ進みます。

『ブロックの追加』をクリックして『すべて表示』へ進む

 

『Cocoonブロック』内の『吹き出し』ブロックを選択します。

Cocoonブロック内の吹き出しブロック

 

Cocoon設定で設定した吹き出しの中から、一番上の吹き出しが自動で設置されます。

一番上の吹き出しが自動で設置される

設置された吹き出しは、右側の設定メニューで変更できます。

Cocoon設定で設定した吹き出しをベースに、吹き出しの形状、位置、アイコンのスタイルもカスタマイズ可能です。

元々右側で設定していた吹き出しを左側に変更する、といった変更も可能です。

 

さらに、右側の設定メニューを下にスクロールすると『吹き出し色の設定』もできます。

Cocoonブロックの吹き出し色設定

変更できる色は、この3ヵ所です。

  • 背景色(吹き出しの中の色)
  • 文字色
  • ボーダー色(吹き出しの枠の色)

クラシックではできない、このようなカスタマイズもできますので、ぜひ自分好みの吹き出しを作ってみてください。

色をカスタマイズした吹き出し

まとめ

今回は『Cocoonの吹き出し機能の設定方法と使い方』について解説してきました。

最後に知っておくと便利なコツをまとめておきます。

  1. 吹き出しのタイトルに数字を入れて利用しやすい順番に並べる
  2. ココナラでアイコン作成を依頼する際のポイント
    • png形式で背景を透明にする
    • 大きめ(700px×700px程度)で作成し、吹き出し用は縮小して使う
    • 最初は正面向きのアイコンが無難
  3. Cocoonの吹き出しの人物位置
    • 顔が右向きなら人物位置は『左』
    • 顔が左向きなら人物位置は『右』
    • 顔の向きが正面なら左右どちらでも良い
    • 会話風にする場合は左右交互が見やすい
  4. Gutenbergの吹き出しブロックを使うとカスタマイズが簡単

最初の設定は多少手間がかかりますが、一度設定しておけばいつでも簡単に使えますので、ぜひ試してみてくださいね。

タイトルとURLをコピーしました