エディターの使い方

吹き出しの使い方

記事内に商品プロモーションを含む場合があります

ここではJINでの吹き出し機能(会話)の使い方について解説します。

ひつじくん
ひつじくん
こんな吹き出しを作れるよ!
おおかみくん
おおかみくん
おなじみのやつだな

こういった吹き出しを使えるようになると表現の幅が広がりますので、ぜひご活用をください!

吹き出し機能を使う準備

まずは吹き出しで使いたいキャラクターの画像をアップロードしましょう。

メディアの新規追加

メディアファイルアップロード

WordPressの管理画面から「メディア」>「新規追加」を選んでください。

画像ファイルをアップロード

画像アップロード

そうすると画像をアップロードできる画面に移りますので、任意のキャラクター画像をアップロードしてください!

そして画像をアップロード後に「編集」へと移ってください。

画像ファイル情報をひかえる

ファイル情報

キャラクターの吹き出しを作るために、事前に画像ファイルの情報を控えておきます。

「ファイル名」と書かれた項目の文字列(今回の場合は『hituji4.jpg』)をコピーして控えておきましょう。

吹き出しのコードを設置


[chat face="画像情報" name="キャラクター名" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]

ここまでで下準備は完了です。では上記コードを投稿画面(テキストエディター)に貼り付けて、吹き出しを設置してみましょう。

【3】キャラクターの画像情報を入力

まずは先ほどメモした画像ファイルの情報(例:hituji4.jpg)をショートコード内の「face=”画像情報”」の項目に入力しましょう。

そうすると、キャラクター画像の情報を取得してくれます!

【4】キャラクター名を入力

次にキャラクターの名前を入力します。ショートコード内の「name=”キャラクター名”」という項目に、任意の名前をつけてみてください!

ひつじくん
ひつじくん
キャラクター名は画像の下に反映されるよ!
おおかみくん
おおかみくん
おお!これのことか!

【5】「右」か「左」かを決める


次はキャラクターの配置を決めます。ショートコード内の「align=”配置場所”」という項目に、「left」または「right」と入力してください。

おおかみくん
おおかみくん
左なら「left」
ひつじくん
ひつじくん
右なら「right」

【6】吹き出しの色を決める


ではいよいよ大詰めです。「枠の色」と「背景色」をそれぞれ入力して、好みの吹き出しに仕上げましょう!

グレー

おおかみくん
おおかみくん
枠なしグレーは「none」「gray」だ
ひつじちゃん
ひつじちゃん
背景なしグレーは「gray」「none」ね
ひつじくん
ひつじくん
枠ありグレーは「gray」「gray」

ブルー

おおかみくん
おおかみくん
枠なしブルーは「none」「blue」だ
ひつじちゃん
ひつじちゃん
背景なしブルーは「blue」「none」ね
ひつじくん
ひつじくん
枠ありブルーは「blue」「blue」

レッド

おおかみくん
おおかみくん
枠なしレッドは「none」「red」
ひつじちゃん
ひつじちゃん
背景なしレッドは「red」「none」ね
ひつじくん
ひつじくん
枠ありレッドは「red」「red」

イエロー

おおかみくん
おおかみくん
枠なしイエローは「none」「yellow」だ
ひつじちゃん
ひつじちゃん
背景なしイエローは「yellow」「none」ね
ひつじくん
ひつじくん
枠ありイエローは「yellow」「yellow」

グリーン

おおかみくん
おおかみくん
枠なしグリーンは「none」「green」だ
ひつじちゃん
ひつじちゃん
背景なしグリーンは「green」「none」ね
ひつじくん
ひつじくん
枠ありグリーン「green」「green」

【7】キャラクターの枠


最後にオプションですが、styleに「maru」というコードを追加すると、キャラクターの「丸枠」も用意できるようになっています。

ひつじくん
ひつじくん
こんな風に丸枠をつけることもできるよ!
おおかみくん
おおかみくん
なるほど、こっちも使いやすそうだな。

コードを置いておきますので、こちらをコピペしてお使いください↓

style="maru"

吹き出しの設定完了!

これで吹き出しは完成です!お疲れ様でした。

ひつじくん
ひつじくん
完成したショートコードはAddQuickTagに登録しておくと便利だよ!
おおかみくん
おおかみくん
ほほう。りょうかいしたぞ。

最後に、吹き出しショートコードはよく使うものなのでプラグインの「AddQuickTag」に登録しておきましょう。

AddQuickTagに登録しておくと、すぐにエディタに吹き出しを呼び出せます。同じ手順で作る手間が省けるので、かなり便利ですよ…!

【補足】口コミ用キャラクターも設定可能

JINでは口コミ用キャラクターを設置することができます。

男性
男性
男性の口コミです
女性
女性
女性の口コミです

画像を用意することなく、このような口コミが作れます。

こちらも必要に応じて利用をしてもらえるといいでしょう。

【補足2】吹き出しのアイコン画像を大きくすることも可能

吹き出しのキャラの画像を大きくするカスタマイズ」も用意しています。必要に応じてご利用ください。

吹き出しがうまく表示されない場合

なお「吹き出しがうまく表示されない・・・」という場合は、こーへいさんの「JINの吹き出し画像が表示されないときの対処法」を参考にしてください。

とてもわかりやすく解説してくれているので、これを読めば基本的に解決できるはずです。

また、お問い合わせの多い項目であるため、JIN公式でも「吹き出しが表示されない時の対処法」についてまとめました。あわせてご参考にしてください。

JIN限定コミュニティ「BLOG CAMP」
BLOG CAMP

JINユーザー限定のブログコミュニティ「BLOGCAMP」をオープンしました!

・JINユーザーならずっと参加無料!
・ブログ診断など定期的なイベントあり
・稼ぐためのノウハウをコミュニティ内でシェア

という、本来なら月額かかるような有益なコミュニティをJIN公式でやっています。

ひつじくん
ひつじくん
本気でブログで稼ぎたい人はぜひ参加してください!

BLOGCAMPへの参加方法はこちら↓