「吹き出し」の作り方｜キャラクター会話文を作って記事をもっと読みやすく仕上げよう！

吹き出しのサンプル

こういったキャラクター会話文の作り方について解説していきます。

吹き出しの作り方

画面右上の「＋」ボタンを押して、「吹き出し」をクリックしましょう。

すると、このように吹き出しが出来上がります。

ただ、毎回「＋」を押して呼び出すのはめんどくさいです。

次で紹介する【時短方法】をおすすめします。

ひつじくん

【時短方法】吹き出しの作り方【こっちがおすすめ！】

作り方：/ ＋ 吹き出し と入力

半角のスラッシュ（/）を押してから、「吹き出し」と入力すると、JIN:Rの吹き出しをすぐ呼び出せます。

少しお時間をいただきますが、↑の動画をじっくり見てもらうのがわかりやすいと思います。

一応、デフォルトで６キャラが登録されていますが、そのままでは使いにくいはず。オリジナルキャラを登録して使ってもらえると良いでしょう

キャラクターを登録しておこう

吹き出しブロックを執筆画面で使う前に、「カスタマイズ」>「吹き出し」に進んで、キャラクターを登録しておきましょう。

キャラクター設定

ひとまず、キャラクターの設定（画像・キャラ名）だけ終わらせておけばOKです↓

吹き出しタイプ

吹き出しタイプは「ノーマル」「こころの声」「インタビュー」の３タイプから選べます。

吹き出し色

吹き出しの色もプレビューを見ながら変更可能です。

こういった部分を作り込んで、オリジナルの吹き出しに仕上げてもらえるといいでしょう。

吹き出しが10個では足りない場合

「サイトで使うキャラクターが多すぎて10個じゃ全然足りないよ😭」という場合、ショートコードを使って吹き出しを作ることができます。

[jinr_fukidashi1 image="画像URL" name="ここにキャラ名"]<p>吹き出し内容</p>[/jinr_fukidashi1]

このショートコードの場合、「吹き出し登録１」のデザイン（枠色・キャラ配置）を引き継ぎながら「キャラクター画像」と「キャラクター名」を変更しています。

[jinr_fukidashi1]<p>吹き出し内容</p>[/jinr_fukidashi1]

[jinr_fukidashi2]<p>吹き出し内容</p>[/jinr_fukidashi2]

[jinr_fukidashi1 name="名前" image="画像パス"]<p>吹き出し内容</p>[/jinr_fukidashi1]

//会話形式
type="d--fukidashi-chat"

//心の声形式
type="d--fukidashi-innervoice"

//インタビュー形式
type="d--fukidashi-interview"

1//ショートコード作成例//
2[jinr_fukidashi1 name="名前" image="画像パス" type="d--fukidashi-chat"]<p>吹き出し内容</p>[/jinr_fukidashi1]

//左
layout="d--fukidashi-left"

//右
layout="d--fukidashi-right"

ひつじ

ブロガー / デザイナー

Twitter

WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。