【Cocoon】吹き出しの作り方とカスタマイズ|おしゃれなアイコンで仕上がり1ランクUP!

「吹き出しはどう作るの?」

「吹き出しをカスタマイズしたい」

「吹き出し画像が表示されない、どうして?」

この記事では、そんな方に向けて、Cocoonで吹き出しの作成から使用までの3ステップを解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • 吹き出しの作成⇒カスタマイズ⇒使用
  • 吹き出し画像の推奨サイズ
  • 吹き出しが表示されないときの対処法

が理解できるようになります。

他サイトの吹き出しを見て「いいな~、自分のブログにも設定したいな~」という思いから、私もかんたんに吹き出しを設定できるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

\あなた好みの吹き出しアイコンが見つかる/

/今すぐ無料で会員登録\

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

Cocoon吹き出し画像の作り方3例

STEP1

まず初めに、吹き出し画像を作っていきます。

Cocoonで吹き出し画像の作り方は、下記3通りあります。

それぞれ詳しく解説します。

吹き出し画像を自分で用意・作成する

<吹き出しの作り方1つ目>

Cocoonの吹き出し画像を自分で用意・作成する場合、デザインツール「Canva」を使えばかんたんに準備できます。

Canvaでは、無料で

  • 自分の写真をデザインしたり
  • テンプレート画像やイラストを使えたり

できます。

かめコンパス

私もCanvaはよく使っているツールの1つだよ!

吹き出し画像を

  • 自分で用意した画像を使いたい!
  • 自分でデザインしたい!

という人は、Canvaを使ってみてください。

Canvaで作成する場合は、必ず商用利用ページに目を通しましょう。

Canvaで自分の画像やテンプレート画像の使い方は、下の記事を参考にしてください。

フリー素材を吹き出しに使う

<吹き出しの作り方2つ目>

自分でイラストを描けない…という人は、商用利用できるフリー素材を使ってみましょう。

おすすめのサイトは、下記2つです。

フリー素材を使うメリットは、

  • 誰でも無料で画像を使える
  • すぐに吹き出し画像を用意できる
  • 画像を加工できる

などがあります。

かめコンパス

私もフリー素材のサイトをお気に入り登録してるよ

自分でイラストを描けない人は、フリー素材のサイトをのぞいてみてください。

作成依頼したイラストを吹き出しに使う

<吹き出しの作り方3つ目>

オリジナル画像を用意したいが、自分では描けない…という人は、で作成依頼するのもおすすめできます。

ココナラでイラストを作れば、

  • 唯一無二のオリジナル画像を使える
  • 自分好みのイラストを描いてもらえる
  • 商用利用できるか気にしなくていい

などがあります。

2,000円~5,000円で作成依頼できるアイコン画像もある(2024年2月5日時点)ので、まずはご覧になってください。

\予算・ジャンル別/

/ランキング・おすすめ順\

Cocoonで吹き出しのカスタマイズ方法

STEP2

吹き出し画像を作り終えたら、次はカスタマイズしていきます。

STEP

WordPress管理画面で、Cocoon設定吹き出しを順にクリックする

「Cocoon設定」、「吹き出し」がある場所
STEP

新規追加をクリックする

「新規追加」がある場所
STEP

表示されたページで吹き出しをカスタマイズする

吹き出しの機能をカスタマイズする場所
STEP

カスタマイズし終えたら、保存をクリックする

「保存」がある場所
STEP

吹き出しのカスタマイズ完了!

吹き出しをカスタマイズできた様子

吹き出しをカスタマイズできる項目は、下記7つあります。

それぞれ詳しく解説します。

タイトルをつける

「タイトル」がある場所

「タイトル」は、使いたい吹き出しを探したり、設定したりするために利用します。

吹き出しのタイトルがある場合とない場合の比較
かめコンパス

吹き出しが1つだけなら設定しなくていいよ

名前をつける

「名前」がある場所

「名前」では、吹き出し下に表示させる名前を設定できます。

名前なし

かめコンパス

名前あり

著者名を覚えてもらうためにも、名前は設定しましょう。

アイコン画像を設定する

「アイコン画像」がある場所

「アイコン画像」では、吹き出しで使うアイコン画像を設定できます。

かめコンパス

オリジナリティを出すためにも、画像は設定しようね

吹き出しスタイルを選ぶ

「吹き出しスタイル」がある場所

「吹き出しスタイル」では、

  • デフォルト
  • フラット
  • LINE風
  • 考え事

の4つの中から選べます。

以下は、4つある吹き出しスタイルの見え方です。

※準備中

お好みでスタイルを選びましょう。

左右の位置を決める

「人物位置」がある場所

「人物位置」では、吹き出しを表示する位置を

  • 左側
  • 右側

の2つから選べます。

以下は、2つある人物位置の見え方です。

かめコンパス

左側

かめコンパス

右側

基本、吹き出しの位置は左側がおすすめです。

なぜなら、文章は左側から右側に読まれるからです。

吹き出しの位置を左側にした場合、

  • 「誰が?(アイコン)=主語」
  • 「何を言う?(セリフ)=述語」

の順番になり、スムーズに理解できます。

かめコンパス

吹き出しを2種類使う場合は、会話形式になるよう左右に設定してもいいよ

アイコンの形・枠線を選ぶ

「アイコンスタイル」がある場所

「アイコンスタイル」では、吹き出しの形や枠線を

  • 四角(枠線なし)
  • 四角(枠線あり)
  • 丸(枠線なし)
  • 丸(枠線あり)

の4つから選べます。

以下は、4つあるアイコンスタイルの見え方です。

※準備中

デザインの邪魔にならないよう、枠線なしがおすすめです。

使いたい吹き出しを選ぶ

「TinyMCE」がある場所

「TinyMCE」では、設定した吹き出しをブロックエディタに表示させるかどうか決めれます。

ブロックエディタに吹き出し一覧を表示させたい場合は✔を入れましょう。

かめコンパス

吹き出しを2つ以上作った人は、リストを表示させた方がいいよ

Cocoonで吹き出しの使い方

STEP3

Cocoonで吹き出しをカスタマイズし終えたら、最後に吹き出しを記事に挿入していきます。

STEP

ブロックエディタ画面で、+をクリックする

「+」がある場所
STEP

「吹き出し」をクリックする

「吹き出し」がある場所
STEP

これで吹き出しを挿入できます

かめコンパス

吹き出しにセリフを入力してましょう

吹き出しにセリフを入れる場所
STEP

セリフが入った吹き出しの完成!

かめコンパス

かめコンパスです

吹き出しが表示されない場合は、後ほど対処法を紹介します。

吹き出しの色を変更する

Cocoon記事に挿入した吹き出しの色を変更することができます。

STEP

吹き出しブロック⇒設定の順にクリックする

「設定」がある場所
STEP

「吹き出し色設定」で下記3つの中から変更したい項目をクリックする

  • 背景色
  • 文字色
  • ボーダー色
「吹き出し色設定」がある場所
STEP

表示された色の中から選ぶ

表示された色の中から選んでいる様子

表示された色の中に使いたい色がなかった場合は、「No color selected」の上をクリックすると、さらに細かく指定できます

「No color selected」の場所

使いたい色を探せない場合、使いたい色のカラーコードを入力すると探すことができます

カラーコードを入力する場所

カラーコードの調べ方と使い方は、下の記事を参考にしてください。

STEP

これで吹き出しの色を変更できます

Cocoonで吹き出し画像の推奨サイズ

Cocoonで吹き出しに使うアイコン画像のサイズは、幅200×高さ200pxがおすすめです。

なぜなら、

  • Cocoon作成者のわいひらさんが160~200pxの正方形を推奨している
  • 大きすぎると吹き出しが表示されない
  • 小さすぎるとスマホで見づらい

からです。

ですので、吹き出しの画像サイズを幅200×高さ200pxにしましょう。

かめコンパス

当ブログのアイコンも200pxの正方形にしているよ!

吹き出しの画像サイズを変更する

吹き出しの画像サイズを変更するには、デザインツール「Canva」の使用をおすすめします。

Canvaでは、

  • 画像をかんたんにリサイズできる
  • 画像を高画質でダウンロードできる
  • PNGやJPGなど保存形式を複数から選べる

など、無料で誰でも使えます。

かめコンパス

私も画像のリサイズはCanvaを使ってるよ

Canvaで画像サイズを変更する方法は、下の記事を参考にしてください。

Cocoonで吹き出しを使う3つのメリット

Cocoonで吹き出しを使うメリットを、私なりにざっと書いてみました。

メリット
  • 自分の意見・感想・感情を伝えられる!
  • オリジナル記事に仕上がる!
  • 離脱率が低くなる!

それぞれ詳しく解説します。

自分の意見・感想・感情を伝えられる!

吹き出しがある場合とない場合で、自分の意見・感想・感情の伝え割り方の比較

吹き出しを使うことで、著者本人が話しかけているような感覚を与えてくれて、よりユーザーの心に響きます。

吹き出しがないと他の文章とごちゃ混ぜになって、自分の意見や感想、感情がユーザーにうまく伝わらなくなります。

かめコンパス

ユーザーとの心の距離も近づける!

オリジナル記事に仕上がる!

吹き出しがある場合とない場合で、他サイトとどれくらい差別化できるかの比較

文章やフリー画像だけの記事だと、他の人の記事と比べて、同じように見えます。

吹き出しを使うことで、他の人の記事と差別化ができ、ユーザーにこの記事を書いている人を覚えてもらいやすくなります。

かめコンパス

別のキーワードで検索したユーザーが「この人が書いた記事、別の記事でも見たことある!」と思ってもらえるのが理想だね

離脱率が低くなる!

吹き出しがある場合とない場合で、離脱率の比較

文章だけの記事だと読みづらくなり、途中で離脱した経験がある人は多いと思います。

吹き出しを使うことで記事の見た目の印象も変わったり、箸休め的な効果も得られ、読みやすくなります。

つまり、離脱率が低くなります。

かめコンパス

本は読まないけど、マンガだと読むという人は多いよね!

Cocoonで吹き出しが表示されない原因と対処法

Cocoonで吹き出しが表示されない原因は、下記2つ考えられます。

それぞれの対処法を詳しく解説します。

画像サイズが大きすぎる

吹き出しが表示されない場合、下の画像のようになります。

吹き出しにアイコン画像が表示されていない状態

吹き出しが表示されない原因は、画像サイズが大きすぎるからです。

吹き出しの画像サイズは、160~200pxの正方形で推奨されており、それ以上のサイズだと表示されない場合があります。

私も以前、吹き出しの画像サイズを幅500×高さ500pxで設定しており、

スマホのsafariやパソコンでは吹き出しが表示されたが、スマホのchromeだと表示されませんでした。

かめコンパス

デバイスやブラウザによって吹き出しが表示されないのはびっくり!

ですので、吹き出しの画像サイズを160~200pxの正方形に変更すれば、表示されます。

TinyMCEが無効になっている

新たに作った吹き出しが表示されない場合、TinyMCEが無効になっているからです。

ですので、TinyMCEを有効にすることで吹き出し一覧を表示させ、作った吹き出しを表示できます。

かめコンパス

英語でよく分からないから、私も未設定のままだったよ

TinyMCEを有効にして吹き出しを表示する方法

TinyMCEを有効にして、新たに作った吹き出しを表示する方法は、下記の通りです。

STEP
まず、TinyMCEを有効にします

WordPress管理画面で、Cocoon設定吹き出しの順にクリックする

「Cocoon設定」、「吹き出し」がある場所
STEP

「TinyMCE」で「エディターのリストに表示」に✔を入れる

「TinyMCE」、「エディターのリストに表示」がある場所
STEP

保存をクリックする

「保存」がある場所

これでTinyMCEを有効にできます

STEP
次に、新たに作った吹き出しを表示させます

ブロックエディタ画面で、+をクリックする

「+」がある場所
STEP

「吹き出し」をクリックする

「吹き出し」がある場所
STEP

ページに挿入された吹き出しブロックを選び、設定をクリックする

「設定」がある場所
STEP
  1. 「スタイル設定」にある「人物」をプルダウン
  2. 表示したい吹き出しを選ぶ
表示したい吹き出しを選ぶ手順

まとめ:吹き出しで独自性のあるブログを作ろう

今回は、Cocoonで吹き出しの作成から使用までの3ステップを紹介しました。

吹き出しのアイコンをフリー画像から探したい人は、イラストACいらすとやがおすすめ。

オリジナル画像を吹き出しに設定し、自分のブログだと実感するうれしさをより味わいたい人は、で作成依頼するのがおすすめです。

作った吹き出しの画像は、

  • プロフィール
  • ファビコン
  • SNSアイコン

にも使いまわせます。

当ブログのプロフィール
当ブログのプロフィール
検索結果のページタイトルに表示される当ブログのファビコン
当ブログのファビコン

作った吹き出し画像をプロフィールやファビコンに使いたい!という人は、下の記事も読んでみてください。

オリジナル画像を作って、本格的にブログを始めましょう!

\まずは無料で会員登録/

/300円割引クーポンもらえる\

また以下の記事では、吹き出し以外のカスタマイズ方法も紹介しています。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonで吹き出しの作り方とカスタマイズ方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次