![Aさん](https://tjnoblog.com/wp-content/themes/cocoon-master/images/woman.png)
ワードプレスでブログを書いています。
Cocoonテーマを使っているんですが、会話式になるように
ブログ内に吹き出しを入れたいんですが、どうしたらいいですか?
![ティージェー](https://tjnoblog.com/wp-content/themes/cocoon-master/images/man.png)
ブログ内に吹き出しを入れるのはとっても簡単です。
写真付きでわかりやすく解説していきますね。
こんにちわ。
ブロガーのティージェーです。
ブログの中に「吹き出し」を入れて記事を書く方法を解説します。
ブログ内に吹き出しを入れる方法はとっても簡単です。
ブログも会話形式にすることによって、読者に読みやすくするメリットもありますので、是非やり方を覚えてくださいね。
Cocoon(コクーン )で吹き出しをブログに貼り付ける方法
![](https://tjnoblog.com/wp-content/uploads/2020/04/photo-1551911729-286fd0896786.jpeg)
それでは早速Cocoonテーマでブログを作成する時に吹き出しを入れるやり方を解説していきます。
ブログに入れる吹き出しが一つの場合
まずワードプレスの記事作成ページを開きます。
そして「+」ボタンをクリックします。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-14-11.30.50-2-300x71.png)
次に「Cocoonブロック」をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.25.36-300x266.png)
「吹き出し」の画像があると思いますので、クリックしてください。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.25.58-300x233.png)
ブログ内に下記のような吹き出し画像が表示されたらOKです。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.26.18-1024x266.png)
人が書かれているすぐ下をクリックすると、人物に名前をつけることができます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.33.8-1024x219.png)
吹き出しには文字を入力することができます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.33.08-1024x219.png)
人物の絵(初期設定は男性の絵)をクリックすると画像を置き換えることができます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.26.18-1-1024x266.png)
では早速人物をクリックしてみましょう。
メディアの選択ができますので、メディアライブラリーにある写真を使うのであれば、使う写真をクリック、他の場所から写真をとってくるのであれば、ファイルをアップロードから写真を選択しましょう。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.38.00-300x105.png)
今回はメディアライブラリーにあるイチゴの写真を入れてみます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.38.56-258x300.png)
写真にチェックを入れて・・・
右下にある「選択」をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.39.18-162x300.png)
すると、ブログの吹き出しの画像が「男性の絵」から「イチゴ」に変わりました。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.39.37-1024x221.png)
ブログに入れる吹き出しが二つ以上の場合
では、続いて複数の吹き出しをブログに入れる方法です。
まず最初にワードプレスのブログの記事内に吹き出しを表示させましょう。
スタイル設定の「人物」をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.5.11-163x300.png)
いくつかの選択画面が表示されます。
表示場所も「右」か「左」で最初は指定されていますが、これは後から変更できます。
例えば「女性(右)」をクリックしてみましょう。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.51.36-300x223.png)
すると最初の左側にいた男性の吹き出しが変わります。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.51.53-1024x225.png)
ブログを書く時に2人以上の複数の吹き出しを使いたい場合はこのように設定すれば、会話形式でのブログも簡単に作成することができます。
吹き出しの詳細設定
最後にもう少し細かい設定ができますので、紹介します。
スタイル設定の「吹き出しスタイル」をクリックしてみましょう。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-1351.11-163x300.png)
ここでは、吹き出し枠の形を変更できます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.52.07.png)
「考え事」をクリックすると、
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.52.32-1024x214.png)
このように考えているような吹き出しに変えることができます。
スタイル設定から「人物位置」では、吹き出しの画像を「右」に配置するか「左」に配置するかを選ぶことができます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.511-164x300.png)
スタイル設定の「アイコンスタイル」をクリックしてみましょう。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.11-163x300.png)
アイコンに枠組みをつけたり、外したり、また、枠組みの形を丸か四角にすることができます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.52.47.png)
例えば、「丸(枠線なし)」を選ぶと下記のように吹き出しの人物から枠線が消えます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.53.16-1024x220.png)
今後は吹き出しの背景色を変更してみます。
スタイル設定の下に「背景色」がありますので、好きな色を選んでクリックするだけです。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.53.50-286x300.png)
例えばピンク色を選ぶと吹き出しの背景色がピンク色に変わります。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.54.10-1024x218.png)
今度は吹き出し内の文字色を変更してみましょう。
スタイル設定の文字色から色を選べば簡単に変更できます。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.54.23-294x300.png)
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.55.05-1024x189.png)
最後にボーダー色を変更します。
ボーダー色とは、吹き出しの枠線の色です。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.55.21-275x300.png)
例えば、赤色を選択するとこのように変わります。
![](https://tjnoblog.com/wp-content/uploads/2020/04/スクリーンショット-2020-04-15-13.55.30-1024x195.png)
まとめ 【写真付きで解説】Cocoon(コクーン )で吹き出しをブログに貼り付ける方法
![](https://tjnoblog.com/wp-content/uploads/2020/04/photo-1585226664844-f7b925aa9413.jpeg)
ワードプレスでブログを書いていて、テーマでCocoonを使っていれば、吹き出しをブログの記事内に入れて会話式のように記事を作成することが簡単にできます。
とても簡単ですので、是非取り入れてみてくださいね。
![](https://www19.a8.net/0.gif?a8mat=3BBKU4+9OALO2+CO4+1032Z5)