こんにちは、まちゃりさです。
今回は、ワードプレステーマの「Cocoon」で「吹き出し」を使用するやり方をご紹介します。
吹き出しは、このような会話を表示したい際に使用します。
最近どうですか？
So-so！（まあまあね）
当サイトの記事内では、ほぼ全てで使用しています。
文字ばかりの記事より格段に内容が頭に入りやすくなります。
まだ使われていない方は、この記事を読んで、ぜひ使ってみてください。
それでは、どうぞ！
吹き出しとは？
キャラクターアイコンを喋っているように見せる枠のことです。
記事内で吹き出しを使う効果はこんな感じです。
- 記事が見やすくなる
- オリジナリティが出る
文字だらけの記事よりも、吹き出しがあった方が記事が格段に見やすくなります。
先輩ブロガーさんの記事では、吹き出しをたくさん使われている方が多いように思います。
▼例：先輩ブロガーさん（さとるさん）の使い方
犬と人間の会話ができたり…
一人でかっこいいことをつぶやいたり…
「1人」対「複数」での会話ができたり…
こんな感じです♪
上記の吹き出しを使用している参考サイトはこちら（※使用テーマは「Cocoon」ではありません）↓
他にも、読者の疑問点を吹き出しに記述し、それに筆者が答える形で吹き出しを使ったりする場合も。
最近、腰痛がひどいんです・・
そんなときおすすめなのが、「ストレッチ」です！
工夫次第で、吹き出しの使い方は様々あります。
【Cocoon】吹き出しの種類
Cocoonで使用できる吹き出しには、次の2種類があります。
- Cocoon標準搭載の吹き出し
- 自作の吹き出し
これらについて、順にご紹介していきます。
Cocoon標準搭載の吹き出し
まず、Cocoonで最初から入っている吹き出しのご紹介です。
Cocoonでは10種類の吹き出しパターンが用意されています。
これらは、Cocoon利用者であれば、すぐに使用できます。
【Cocoon吹き出し 10種類】
- 男性（左）
SAMPLE001 男性（左）
- 女性（右）
SAMPLE002 女性（右）
- ビジネスマン（左）
SAMPLE003 ビジネスマン（左）
- ビジネスウーマン（右）
SAMPLE004 ビジネスウーマン（右）
- 悩むおじさん（左）
SAMPLE005 悩むおじさん（左）
- 悩むおばさん（右）
SAMPLE006 悩むおばさん（右）
- 男性医師（左）
SAMPLE007 男性医師（左）
- 女性医師（右）
SAMPLE008 女性医師（右）
- どや顔男性（左）
SAMPLE009 どや顔男性（左）
- どや顔女性（右）
SAMPLE010 どや顔女性（右）
Cocoonの吹き出しは、種類が多く幅広い場面で使用することができます。
（➡Cocoon標準の吹き出しを使用する手順を先に見たい方は、こちらからどうぞ）
自作吹き出し
Cocoonで標準搭載されている吹き出し以外に、「自作の吹き出し」を作りたい場合もあります。
アイコン画像を用意すれば、簡単に作成できます。
準備：160px～200pxの正方形画像
画像サイズが大きいと見切れてしまいます。
まずは、吹き出し枠に収まる範囲の画像を準備します。
Cocoon作成者「わいひら」さんのサイトでは、画像サイズ160px～200pxくらいの正方形が推奨されています。
このサイズに収まる画像を準備します。
今回は例として、「いらすとや」さんの人物画像を使用し、吹き出しを作成してみます。
自作吹き出しの設定方法
それでは、自作吹き出しの設定手順です。
▼手順
[Cocoon設定]>[吹き出し]をクリックします。
![[Cocoon設定]>[吹き出し]](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_speech-bubble4.png?resize=580%2C612&ssl=1)
一番上の[新規追加]をクリックします。
![[新規追加]をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_speech-bubble5.png?resize=1024%2C759&ssl=1)
設定項目が７つ表示されます。
これら7つの項目を順番に設定していきます。
- タイトル
- 名前
- アイコン画像
- 吹き出しスタイル
- 人物位置
- アイコンスタイル
- TinyMCE
1つずつ設定方法をご紹介します。
タイトルは、投稿画面のドロップダウンリストに表示される名称です。
自身で「判断しやすい・分かりやすい」キーワードを設定します。
吹き出しの下に表示される名前です。
アイコンの下に「悩む女性」と表示されています。
未入力の場合は、何も表示されません。
名前は、投稿画面でも編集（変更）が可能です。（ブロックエディタを使用の場合）
推奨文字数について
推奨は５文字以内です。スマホ：６文字以上、PC：７文字以上になると２行で表示されます。
名前が５文字以上になると、２行で表示されます。
吹き出しで使用される画像です。
[選択]をクリックして、事前に準備した画像を選択します。
![[選択]をクリック](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/cocoon_speech-bubble10-1.png?resize=869%2C305&ssl=1)
※画像サイズ160px～200pxくらいの正方形が推奨されています。
吹き出し枠のスタイル設定です。
吹き出しスタイルは次の４種類から選びます。
- デフォルト
- フラット
- LINE風
- 考え事
▼それぞれの表示イメージです。
デフォルト
フラット
LINE風
考え事
投稿画面から変更することもできます。
吹き出しの表示を「左」または「右」から選択できます。
吹き出しアイコンの位置を「左」か「右」で指定します。
▼それぞれの表示イメージです。
左です
右です
投稿画面から変更することもできます。
吹き出し画像の枠のスタイル設定です。
アイコンスタイルは、次の4種類から選びます。
- 四角（枠線なし）
- 四角（枠線あり）
- 丸（枠線なし）
- 丸（枠線あり）
アイコンの周りの形と、線の[あり・なし]を選択します。
▼それぞれの表示イメージです。
四角（枠線なし）
四角（枠線あり）
丸（枠線なし）
丸（枠線あり）
デフォルトでは、「丸（枠線あり）」が選択されます。
投稿画面のドロップダウンリストに表示させるかどうかの設定です。
投稿画面の表示イメージです。
吹き出しの数がよほど多くなければ、チェックしておいてOKです。
あまり使用しないアイコンは、チェックを外して非表示にしておきます。
1～7のすべての項目の設定が完了後、「保存」をクリックします。
保存後、新しく投稿画面を開いて確認してみましょう。
投稿画面で吹き出しを使う手順
ここからは、実際の投稿画面で、吹き出しを使用するやり方をご紹介します。
※リンクをクリックすると、飛ばし読みできます。
上記それぞれ、やり方を解説していきます。
ブロックエディタを使う場合
まずは、ブロックエディタを使用する場合です。
▼ブロックエディタで吹き出しを使用する手順
ブロックの追加＞吹き出しをクリックします。
右側「ブロック」のスタイル設定「人物」リストに、吹き出し一覧が表示されます。
ここから、好きな吹き出しを選びます。
名前は、アイコン下をクリックすると変更が可能です。
吹き出しの中をクリックすると、言葉を入力することができます。
人物の位置は、「人物位置」で左右に移動が可能です。
右に移動してみました。
右側の「ブロック」で、吹き出しのスタイルを自由に変更できます。
ブロックが表示されなくなったときは・・
アイコンの下の「名前」欄をクリックしてみましょう。
右にブロックが表示されるようになります。
吹き出しの背景色、文字色、枠線の色なども変更できます。
クラシックエディタを使う場合
続いて、クラシックエディタを使用する場合です。
▼クラシックエディタで吹き出しを使用する手順
「吹き出し」をクリックすると、登録済みの吹き出しが表示されます。
ここから、好きな吹き出しを選びます。
後は、吹き出し内の文字を変更して使用します。
まとめ
いかがでしたか？
今回は、テーマ「Cocoon」で吹き出しを使用するやり方について、ご紹介しました。
ブログを始めたての頃は、記事に何を書いていいか迷います。
しかし、吹き出しがあるだけで、ブログ記事感が出るものです。
また、記事が一気にわかりやすく・見やすくなるため、ぜひ使用することをおすすめします。
記事を書く際は、ぜひ積極的に活用してみてください。
それでは、また。
最後までお読みいただきありがとうございました！
おわり。
参考記事
Cocoon作成者「わいひら」さんの以下記事を参考に作成しました。
コメント