PR
※当サイトには、アフィリエイト広告等が含まれています。閲覧者様が商品の購入やクリックした広告を見ていただくだけで広告主からの収益が発生します。閲覧者様には心から感謝の念に堪えませんが、当サイトは広告主から収入を得ることで記事内容が左右されることは一切ありません。令和5年10月1日からステルスマーケティングは景品表示法違反となります。消費者庁
★ワードプレスバージョン6.8-jaから「投稿を編集」の画面で「ビジュアル」隣の「テキスト」の表示
が「コード」に変更されてしまいました。以前の解説では「テキスト」と表現しておりますのでご留意いただければ助かります。

すぐできる「Cocoon 吹き出し」使い方とスタイル一覧

スポンサーリンク

Cocoon「吹き出し」の使い方のロゴ画像

こんにちは、解説ゾロです!

WordPressの「Cocoonテーマ」は、予め「吹き出し」のアイコン画像が用意されていますので、今すぐに「吹き出し」を使うことができます。

「吹き出し」を使うことで、
  • 会話形式の短いコメントでわかりやすくなる
  • 親しみやすさがある
  • アクセントになる
  • 内容の補足をストレートに表現できる
  • 心の声を表現できる
などなど、あなた様のアイディアで無限のメリットを生み出せます。
今日は、WordPressのCocoonテーマに標準装備されています吹き出し機能をすぐに利用することができる解説と、予め用意されている吹き出しアイコンの画像一覧をご紹介いたします。多くの方が使い慣れている「クラシックエディター」で簡単に使えますので一緒にやりましょ!
スポンサーリンク
スポンサーリンク
スポンサーリンク

「Cocoon 吹き出し」の使い方「手順」

「Cocoon 吹き出し」は「秒」で使えます!笑

手順は、
  1. サンプルの「吹き出し」を選ぶ
  2. 「吹き出し」にセリフ(言葉)を入力する
だけです。では、実際の作業を見ながら、順に詳しく解説していきます。

サンプルの「吹き出し」を選ぶ

それでは、Cocoonにデフォルトで装備されている吹き出しのアイコン画像を解説いたします。
WordPressのテーマCocoonをダウンロードして「子テーマ」を有効化にしますと、WordPressダッシュボードのいつも記事を書いています、
の「投稿を編集」の画面に、
の「赤枠」で囲まれたCocoonのツールが表示されます。その中の一番左に位置する、
の「吹き出し」の枠をクリックしますと、
のように、デフォルトで既に吹き出しのアイコンが10種類ほど用意されています。記事の「吹き出し」を表示したい場所でマウスカーソルを1回クリックし、この中から使いたいサンプルをクリックしますと「吹き出し」がマウスカーソルをクリックした場所に表示されます。

Cocoon「吹き出し」はどこにある?

「吹き出し」にセリフを入力する

例として、一番上の [SAMPLE 001]男性(左)をクリックしてみますと、次のような登場人物が現れます。

内容を入力してください。

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

この中にセリフや言葉を入れてください。

ハイ、出来上がりです。秒でしょ!笑

でも、残りの9人の顔も気になります・・・よね!

では、登場人物全員のお顔を上から順にお披露目いたします。

スポンサーリンク

「Cocoon 吹き出し」の「アイコン画像」一覧

登場人物の10人の「アイコン画像」です。

Cocoon「吹き出し」の既存の登場人物

ご自分のシチュエーションに合うお顔を登場させてくださいませ。

さらに、Cocoon 吹き出しには、「吹き出しスタイル」も選べます。

スポンサーリンク

「Cocoon 吹き出し」の「吹き出しスタイル」一覧

吹き出しのスタイルは、次の「4種類」が用意されています。

  1. デフォルト
  2. LINE風
  3. フラット
  4. 考え事

「吹き出しスタイル」を画像で確認してみますと下図のようになります。「LINE風」は、実際のLINEと同じように右側だけが緑色の背景色になり、他の3種類は左右とも同じスタイルです。

Cocoon「吹き出し」のスタイル

 

「吹き出しスタイル」は「Cocoon設定」の画面で自由に組合せができますので後ほど解説いたします。

「Cocoon 吹き出し」の10種類の画像「一覧」

予め用意されている10種類を表示してみます。お好きな番号の吹き出しを選択することで下図の吹き出しが表示されます。

Cocoon「吹き出し」の予め用意されている登場人物

\\Amazon限定の一目惚れマウスです!//


【Amazon.co.jp 限定】Kensington ケンジントン SlimBlade Pro EQトラックボール ホワイト K72084JP Bluetooth・2.4GHzワイヤレス・有線接続対応 再生プラスチック使用

「Cocoon 吹き出し」は左右の人物を自由に組み合わせOK

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

患者さん
患者さん

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

歯医者さん
歯医者さん

イタイのイタイの飛んでけ~。

こんな感じで、カスタマイズが可能です・・・どこが違うのかわかりますか?笑
「左右の位置」やアイコン枠の「丸と四角」なども自由にカスタマイズすることができます・・・が、その場合デフォルトのアイコンが上書きされますので、上書きをしたくない場合は新規で作成すればOKです。それでは、これらのカスタマイズ方法を解説していきます。

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

WordPressのダッシュボードの画面から、
の「Cocoon 設定」にマウスポインターを乗せますと、メニューが表示されますので、
の「吹き出し」をクリックしてください。

Cocoon「吹き出し」の編集画面

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

Cocoon「吹き出し」のどや顔の女性をカスタマイズ

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

Cocoon「吹き出し」のオリジナルの設定画面

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

Cocoon「吹き出し」の設定方法

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

Cocoon「吹き出し」のオリジナルを確認

コレ、いいなぁのマウス!今はスリムブレードで最高だけと!笑


【Amazon.co.jp 限定】Kensington ケンジントン SlimBlade Pro EQトラックボール ホワイト K72084JP Bluetooth・2.4GHzワイヤレス・有線接続対応 再生プラスチック使用

まとめ

WordPressのCocoonテーマで「吹き出し」の使い方とSAMPLE画像の一覧をご紹介いたしました。

通常の文章よりも、「吹き出し」ならば、会話形式で端的に伝えることができ、独り言のようにボソボソ言えるのもメリットの一つです。

今日は、予めCocoonが用意してある吹き出しアイコンを使っての解説でしたが、この「吹き出しアイコン」をオリジナルの画像で「吹き出し」を作ることができます。自分で作るのもいいのですが、完成度が違う「ココナラ 」でプロのイラストレーターで差別化を図るのも効果的です。

当サイトの「解説ゾロ」も完成度の高いオリジナルの「吹き出しアイコン」を使っています。

ゾロ
ゾロ

私が「ゾロ」です!

エレナ
エレナ

こんにちは「エレナ」です!

「吹き出し」って「簡単」「便利」「楽しい」ですので、ぜひお試しくださいませ!

最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした!

関連記事:Cocoon マイクロコピーでボタン近くの文字や吹き出しの作り方
関連記事:【超簡単】ワードプレスの文字にルビ(フリガナ)を付ける方法

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