
こんにちは、解説ゾロです!
WordPressの「Cocoonテーマ」は、予め「吹き出し」のアイコン画像が用意されていますので、今すぐに「吹き出し」を使うことができます。
- 会話形式の短いコメントでわかりやすくなる
- 親しみやすさがある
- アクセントになる
- 内容の補足をストレートに表現できる
- 心の声を表現できる
「Cocoon 吹き出し」の使い方「手順」
「Cocoon 吹き出し」は「秒」で使えます!笑
- サンプルの「吹き出し」を選ぶ
- 「吹き出し」にセリフ(言葉)を入力する
サンプルの「吹き出し」を選ぶ
⇩それでは、Cocoonにデフォルトで装備されている吹き出しのアイコン画像を解説いたします。
WordPressのテーマCocoonをダウンロードして「子テーマ」を有効化にしますと、WordPressダッシュボードのいつも記事を書いています、
①の「投稿を編集」の画面に、
②の「赤枠」で囲まれたCocoonのツールが表示されます。その中の一番左に位置する、
③の「吹き出し」の枠をクリックしますと、
④のように、デフォルトで既に吹き出しのアイコンが10種類ほど用意されています。記事の「吹き出し」を表示したい場所でマウスカーソルを1回クリックし、この中から使いたいサンプルをクリックしますと「吹き出し」がマウスカーソルをクリックした場所に表示されます。⇩

「吹き出し」にセリフを入力する
例として、一番上の [SAMPLE 001]男性(左)をクリックしてみますと、次のような登場人物が現れます。

内容を入力してください。
そして「吹き出し」の中でマウスカーソルを一度クリックすれば消したり書いたりの編集ができますので、

この中にセリフや言葉を入れてください。
ハイ、出来上がりです。秒でしょ!笑
でも、残りの9人の顔も気になります・・・よね!
では、登場人物全員のお顔を上から順にお披露目いたします。
「Cocoon 吹き出し」の「アイコン画像」一覧
登場人物の10人の「アイコン画像」です。

ご自分のシチュエーションに合うお顔を登場させてくださいませ。
さらに、Cocoon 吹き出しには、「吹き出しスタイル」も選べます。
「Cocoon 吹き出し」の「吹き出しスタイル」一覧
吹き出しのスタイルは、次の「4種類」が用意されています。
- デフォルト
- LINE風
- フラット
- 考え事
「吹き出しスタイル」を画像で確認してみますと下図のようになります。「LINE風」は、実際のLINEと同じように右側だけが緑色の背景色になり、他の3種類は左右とも同じスタイルです。

「吹き出しスタイル」は「Cocoon設定」の画面で自由に組合せができますので後ほど解説いたします。
「Cocoon 吹き出し」の10種類の画像「一覧」
予め用意されている10種類を表示してみます。お好きな番号の吹き出しを選択することで下図の吹き出しが表示されます。

「Cocoon 吹き出し」は左右の人物を自由に組み合わせOK
上記では、同じスタイルを左右で表示していますが、もちろん、左右の登場人物やスタイルは自由に組み合わせることが可能です。

先生!歯がすごく痛いんです・・・

イタイのイタイの飛んでけ~。
こんな感じで、カスタマイズが可能です・・・どこが違うのかわかりますか?笑
「左右の位置」やアイコン枠の「丸と四角」なども自由にカスタマイズすることができます・・・が、その場合デフォルトのアイコンが上書きされますので、上書きをしたくない場合は新規で作成すればOKです。それでは、これらのカスタマイズ方法を解説していきます。
「Cocoon 吹き出し」のカスタマイズ方法
⇩WordPressのダッシュボードの画面から、
①の「Cocoon 設定」にマウスポインターを乗せますと、メニューが表示されますので、
②の「吹き出し」をクリックしてください。⇩

⇩すると、
①の「吹き出し」の画面に変わりますので、今度の例は、
②の「[SAMPLE 010] どや顔女性(右)」をカスタマイズしてみますので、
③の「編集」をクリックしてください。⇩

⇩編集の画面の、
①の「吹き出し」に変わります。編集した「吹き出し」が編集後にその下の「デモ」に表示されます。では、
②の「タイトル」の枠には、ご自分がわかりやすい管理用のタイトルを入力してください。ここでは「どや顔女性(左)」にしました。次の、
③の「名前」は、顔の下に表示される名前です。ここで「頑張り屋さん」にしてみます。未記入でもOKです。その下には大きく、顔のイラストが表示されていますが飛ばします。⇩

⇩続いて、
①の「吹き出しスタイル」は「枠」をクリックしますと、右のメニューが表示され「デフォルト」「フラット」「LINE風」「考え事」の4つが表示されますので、選択します。この場合は「フラット」をクリックしました。
②の「人物位置」は「左」か「右」を選択します。ここでは「左」にしました
③の「アイコンスタイル」もクリックすると、右にメニューが表示されて「四角(枠線なし)」「四角(枠線あり)」「丸(枠線なし)」「丸(枠線あり)」の4つです。ここでは「四角(枠線あり)」にしてみました。
④の「TinyMCE(ティニーエムシー)」は、WordPressの「投稿を編集」の画面に設置されている「吹き出し」のリストに表示するか、しないか、です。表示して使いたいので、□に✓を入れました。最後に、
⑤の「保存」のクリックをお願いします。

⇩すると、先ほどの
①の「デモ」の画面に、今編集した、
②の「四角(枠線あり」で、
③の「フラット」の「吹き出し」で、
④の「頑張り屋さん」の名前が表示されています。
このように、登場人物から「吹き出し」のスタイルまで自由な組み合わせを設定して使うことができます。⇩

まとめ
WordPressのCocoonテーマで「吹き出し」の使い方とSAMPLE画像の一覧をご紹介いたしました。
通常の文章よりも、「吹き出し」ならば、会話形式で端的に伝えることができ、独り言のようにボソボソ言えるのもメリットの一つです。
今日は、予めCocoonが用意してある吹き出しアイコンを使っての解説でしたが、この「吹き出しアイコン」をオリジナルの画像で「吹き出し」を作ることができます。自分で作るのもいいのですが、完成度が違う「ココナラ
」でプロのイラストレーターで差別化を図るのも効果的です。
当サイトの「解説ゾロ」も完成度の高いオリジナルの「吹き出しアイコン」を使っています。

私が「ゾロ」です!

こんにちは「エレナ」です!
「吹き出し」って「簡単」「便利」「楽しい」ですので、ぜひお試しくださいませ!
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!
関連記事:Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方
関連記事:【超簡単】ワードプレスの文字にルビ(フリガナ)を付ける方法



