Cocoonの吹き出し機能の設定と使い方

ブログでよく見かける吹き出し。Cocoonには標準で吹き出し作成機能が備わっているので、簡単に記事に吹き出しを入れ込むことができます。

吹き出しってなんのことだにゃ？

これがCocoonの機能で作った吹き出しだよ。長文をずらずらと書くより、吹き出しを効果的に使うと読みやすくなるし、親しみもわきやすくなるにゃ！

吹き出しの設定方法と使い方を説明していきます。

この記事の目次

Cocoonの吹き出し設定
作成した吹き出しを記事に挿入する
色をデフォルトで設定しておきたい場合
- アイコンの背景色・ボーダー色を変える
- 吹き出しの背景色・ボーダー色・文字色を変える
まとめ

Cocoonの吹き出し設定

管理画面から「Cocoon設定」→「吹き出し」に進みます。すると、デフォルトで用意されている吹き出しデザインが複数出てきます。サンプルはそのまま残して新たに追加したい場合は「新規追加」を、サンプルを編集したい場合には編集したいサンプルの「編集」をクリックしてください。

今回はこちらの猫ちゃんをアイコンに使用して、吹き出しを新規追加する手順を解説します。

こちらの可愛くて何とも言えない味わい深い表情の猫ちゃんはガーリー素材様よりお借りしました。ふんわり優しいタッチのフリーイラスト素材が利用できます。

ガーリー素材

商用利用も可能な、ガーリーでかわいいベクターイラストを配布しています。資料作成やデザインにご利用いただけます。

アイコンはご自身でフリー素材を利用するか自作されてくださいね。フリー素材を利用される場合は利用規約をしっかり確認しましょう。個人利用と商用利用では条件が異なったり、無料でもクレジット表記が必要な場合もあります。

「新規追加」をクリックすると次の画面に遷移します。

各設定は下記の通りです。なお、ここで設定したアイコンや吹き出しスタイルなどは個別記事でも変更できるので、仮の設定でも大丈夫です。

設定を入力したら最後に下部の「保存」をクリックしてください。

作成した吹き出しを記事に挿入する

ビジュアルエディターで吹き出しを挿入したい場所にカーソルを置き、左上にあるブロック挿入ツールをクリックします。Cocoonブロックというところに「吹き出し」があるのでそれをクリックします。「吹き出し」で検索しても出てきます。

記事に吹き出しが追加されます。右側の「スタイル設定」をいじることで、吹き出しのスタイルなどを自由に編集できます。「吹き出し色設定」では吹き出しの背景色、文字色、ボーダー色も変更可能ですので、かなり自由に吹き出しのデザインを変えることができます。

「セリフの入力」のところにテキストを入力して完成です。

ムッとする猫さん

上手くできたかな？背景色や文字色はご覧の通りかなり自由に変更できるよ。ただ、色をデフォルトで設定しておきたい場合はCSSを使う必要があるんだ

色をデフォルトで設定しておきたい場合

毎回個別に色を設定するのではなく、オリジナルの色をデフォルトで使用したい時はCSSで指定しましょう。まずは、色をカスタマイズしたい吹き出しのidを調べます。「Cocoon設定」→「吹き出し」と進み、色をカスタマイズしたい吹き出しの「編集」をクリックしてください。そのページのURLを見ると、最後に数字が表示されています。その数字が吹き出しに割り当てられたidになります。

Cocoonの吹き出しには「sb-id-**」というクラスが振られています。**の部分に、確認したidを入れてください。

アイコンの背景色・ボーダー色を変える

アイコンの背景色・ボーダー色を変えるには下記のCSSを利用してください。管理画面から「外観」→「カスタマイズ」と進んだところにある「追加CSS」に記述するか、「テーマファイルエディター」からstyle.cssに記述します。

ムッとする猫さん

これはCSSでアイコンにボーダーと背景色を指定したサンプルだよ

.sb-id-** .speech-icon-image{
  border: 1px solid #92638d;/*ボーダーの太さ、スタイル、色の指定*/
  background-color: #e1badd;/*背景色の指定*/
}

なお、背景色はアイコンの背景が透過されていないと反映されませんのでご注意ください。

吹き出しの背景色・ボーダー色・文字色を変える

吹き出しの背景色・ボーダー色を変えるには下記のCSSを利用します。

ムッとする猫さん

これはCSSで吹き出しの背景色・ボーダー・文字色を指定したサンプルだよ

.sb-id-** .speech-balloon{
  background-color: #e1badd;/*背景色の指定*/
  border: 2px solid #92638d;/*ボーダーの太さ・スタイル・色の指定*/
  color: #650220;/*文字色の指定*/
}
.sb-id-** .speech-balloon::before{
  border-right-color: #92638d;/*左向き吹き出しの三角部分のボーダー色指定*/
}
.sb-id-** .speech-balloon::after{
  border-right-color: #e1badd;/*左向き吹き出しの三角部分の背景色指定*/
}
.sb-id-**.sbp-r .speech-balloon::before{
  border-left-color: #92638d;/*右向き吹き出しの三角部分のボーダー色指定*/
}
.sb-id-**.sbp-r .speech-balloon::after{
  border-left-color: #e1badd;/*右向き吹き出しの三角部分の背景色指定*/
}

考え事のスタイルは上記では変更できません。こちらを追加してください。

ムッとする猫さん

これはCSSで考え事の吹き出しの背景色・ボーダー色・文字色を指定したサンプルだよ

.sb-id-** .speech-balloon{
  background-color: #e1badd;/*背景色指定*/
  border: 1px solid #92638d;/*ボーダーの太さ・スタイル・色指定*/
  color: #300112;/*文字色の指定*/
}
.sb-id-**.sbs-think .speech-balloon::before,
.sb-id-**.sbs-think .speech-balloon::after{
  border: 1px solid #92638d;/*ふたつの〇のボーダーの太さ・スタイル色指定*/
  background-color: #e1badd;/*ふたつの〇の背景色指定*/
}

ボーダースタイルを破線や点線に変えても可愛い吹き出しが作れますね。オリジナルの吹き出しを作りたい時にはCSSを使ってください。

まとめ

Cocoonはデフォルトで手軽に吹き出しが使えてとても便利ですね。是非、ご自身のサイトに合わせて吹き出しをカスタマイズしてみてください！

ムッとする猫さん

ところで、ぼくはこの記事にしか登場しないの…？

タイトル	吹き出しのタイトルを、ご自身がわかりやすいようにつけて下さい。ビジュアルエディター利用時に、タイトルが五十音順で表示されるようになります。
名前	アイコンの下に表示される名前です。空のままにすると名前は表示されません。
アイコン画像	アイコンにしたい画像を選択します。160px以上の正方形の画像を指定してください。
吹き出しスタイル	「デフォルト」「フラット」「LINE風」「考え事」の4つから選択できます。
人物位置	アイコンを左右のどちらにおくかです。
アイコンスタイル	アイコンを四角にするか丸にするか、枠線をつけるかつけないかを選択できます。
TinyMCE	「エディターのリストに表示」にチェックを入れておいてください。逆に、使わない吹き出しはここのチェックを外してもOKです。