エディターの使い方

吹き出しの使い方

ここでは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では口コミ用キャラクターを設置することができます。

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

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

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

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

なお「吹き出しがうまく表示されない・・・」という場合は、こーへいさんの「JINの吹き出し画像が表示されないときの対処法」の記事を読んでください!

丁寧にまとめてくださっており、こちらの方法で基本的に解決されるはずです。