こんにちは、解説ゾロです！
ゾロ！「吹き出し」って、自分で作るの難しいの？。
大丈夫！秒でできるよ、エレナ！
ウソっ、笑！
でも教えて教えて！自分で作りたい！
オケ！
「吹き出し」って、こんなやつですが、オリジナルのアイコンを作ることで記事にインパクを与えることができ、会話形式の内容も端的にわかりやすく表現できます。
Cocoonの「吹き出し」を簡単に作る「手順」
- 吹き出しの「アイコン用の画像」を準備
- 「Cocoon」で吹き出しを作る
では、順に詳しく解説していきます。
吹き出しの「アイコン用の画像」を準備
はじめに、吹き出しに使う画像を用意していただくのですが、詳しく解説いたします。画像は「写真」や自分で書いた「イラスト」など、使いたいシーンに合った画像をご用意ください。もちろん「顔」でなくてもOKです。
- フリー素材から探す。
インターネットで探す場合は著作権侵害にならないように、著作権フリーの商用利用可能な素材サイトで探すことをおすすめいたします。
例えば、いらすとやさんなどは、顔の表情などのイラストや子ども、動物のイラストも多いのでご自分のイメージに合うイラストを楽しみながら探せそうです。 - 画像の推奨サイズは、160px～200pxぐらいの正方形の画像です。
参考までに、当サイトの「ゾロ」と「エレナ」の画像サイズは、160px ✕ 160px の正方形の画像です。
で完成度の高いプロのイラストレーターさんにチャチャっと頼むのが一番楽だと思います。笑！吹き出しの「アイコン用の画像」を保存
イラスト画像の用意ができましたら、後ほど呼び出しますので「パソコン」に保存するか「WordPress」の「メディア」に保存しておいてください。
では、Cocoonで「吹き出し」を作っていきます。例として、当サイトの「ゾロ」の画像で「吹き出し」を作ってみます。
Cocoonの「吹き出し」を自分で簡単に作る方法
⇩まず、WordPressのダッシュボードにある、
➀の「Cocoon 設定」にマウスポインターを乗せますと、右側にメニューが表示されますので、
②の「吹き出し」をクリックしてください。⇩
⇩すると、
➀の「吹き出し」の画面に変わり、デフォルトで用意されています「吹き出し」の一覧が表示されますが、今は新しくオリジナルの「吹き出し」を作成しますので、
②の「新規追加」をクリックします。⇩
⇩新規の「入力画面」に変わりますので、ここでまず、勘違いしないように画像を確認しながら各設定をしたいので、用意した画像を先に表示しておきますので、少し下の「アイコン画像」右の、
①の「選択」をクリックして画像を探します。⇩
WordPressの「メディア」に保存してある画像を選択する方法
⇩すると、
①のように「画像を選択してください。」の画面に変わります。まず、画像をWordPressのメディアに保存してある場合から解説いたします。この画面で、
②の「メディアライブラリ」が選択されていなければ、「メディアライブラリ」をクリックしますと、メディアに保存してある画像が表示されますので、その中から、使いたい、
③の画像（この場合はゾロの画像）をクリックして選択してください。⇩
⇩そうしますと、画像にチェックが付き、右側には「160×160 ピクセル」などの画像詳細が表示され、右下に、
①のように表示された「画像の選択」をクリックしてください。⇩
⇩すると、Cocoon 吹き出しの設定入力画面に「ゾロ」のアイコン画像が、
①のようにで～んと表示されます。デカ！⇩
この後は、上から順に設定をしていきますが、その前にパソコンに保存した場合の選択方法を解説いたします。ご不要の方は「Cocoon 吹き出し」の設定方法」まで飛ばしますので、こちらをクリックしてくださいませ。
「パソコン」に保存してある画像を選択する方法
⇩それでは、今度は「パソコンに保存」した場合の解説です。先ほどと同じ、
①の「画像を選択してください。」の画面から解説いたします。この画面で、
②の「ファイルをアップロード」をクリックし、
③の「ファイルを選択」をクリックして、画像を探します。⇩
⇩エクスプローラーのパソコンの画面に変わりますので、ご自分が画像を保存してある場所へ移動してください。ここでは「ダウンロード」に保存しましたので、
①の「ダウンロード」をクリックしますと、保存してある、
②に「ゾロ」の画像がありますので、画像をクリックで選択し、
③の「開く」をクリックしてください。⇩
⇩すると、WordPressのメディアに保存され、先ほどと同じ段階まで来ました。画像にはチェックが入っていると思いますが、もし入っていなければ画像を1回クリックしてチェックを入れて選択してください。そして、
①の「画像の選択」をクリックしますと、メディアに保存した時と同じようにCocoon 吹き出しの設定入力画面に「ゾロ」の画像がデ～ンと表示されます。（この画像は省略いたします）⇩
ケンジントン 【正規品・5年保証付き 日本語パッケージ】 SlimBlade Trackball 72327JP
「Cocoon 吹き出し」の設定方法
⇩それでは「ゾロ」の画像をアイコン画像として選択できましたので、上から順に「吹き出し」の設定をしていきます。
①の「タイトル」は、ご自分の管理用の名前（リスト名）です。ここでは「ゾロ 左」です。続いて、
②の「名前」は、吹き出し画像の下に「表示される名前」です。（未記入でもOKです）ここでは「ゾロ」です。その下の「アイコン画像」の部分は「ゾロ」の画像がで～んと表示された部分ですので省略いたします。⇩
⇩次は、
①の「吹き出しスタイル」です。「デフォルト」をクリックしますと右の4種類のスタイルを選べます。ここでは、「デフォルト」にしています。
②の「人物位置」は「左」か「右」の選択です。ここでは「左」にしています。
③の「アイコンスタイル」は顔の枠の選択で、クリックしますと、右の4種類から選べます。ここでは、丸（枠線あり）です。
④のTinyMCE（ティニーエムシー）は、「投稿を編集」の画面の「吹き出し」のリストに表示するかしないかです。表示して使いたいので、チェックをいれます。最後に、
⑤の「保存」をクリックしてください。⇩
自作の「吹き出し」がリストに保存されたのを確認
⇩これで、オリジナルのゾロの「吹き出し」が完成しましたので、WordPressの「投稿を編集」の画面で「吹き出し」の項目をクリックして確認してみますと、
①のように「ゾロ 左」がリストに保存されています。大成功です。お疲れさまでした。これで、ゾロの「吹き出し」も、いつでも使えます。⇩
「ゾロ 左」をクリックしてみますと、こんな感じです。
内容を入力してください。
自作の「吹き出し」もカスタマイズが可能
「ゾロ」の「吹き出し」をもっとカスタマイズしてみると、
内容を入力してください。
内容を入力してください。
など、自由な組合せで「吹き出し」を作ることができます。
まとめ
WordPressのテーマCocoonで、オリジナルの「吹き出し」を作ってみました。
自分で「吹き出し」を作るのはと、何やら大変そうに感じますが、意外と簡単に作ることができました・・・よね！笑
「吹き出し」アイコン画像のデザインに悩む方は、手軽にプロのイラストレーターに頼める、ココナラ をおすすめいたします。希望のデザインを伝えるだけでチャチャッと完成度の高いあなただけの一味違う「吹き出し」で、他のWebサイトと差をつけるのも効果的です。
出来上がりが楽しみですね！
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：すぐできる「Cocoon 吹き出し」使い方とスタイル一覧
関連記事：Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方
関連記事：【開梱レビュー】ケンジントン スリムブレード K72327JP
