Roots Lab.編集部のSky Hand(@theskyhand)です。
この記事では、JINで簡単に吹き出しを生成できるツールを紹介をしています。
これを使えば簡単に連続で吹き出しが作れます！
・簡単に対談ブログを作りたい
・吹き出しを連続で作成するのがめんどくさい
皆さんご存知のとおり、JINで吹き出しを作ること自体は非常に簡単です。
通常であれば下記のコードをコピペします。
[chat face="画像情報" name="キャラクター名" align="配置" border="枠の色" bg="背景色"] 吹き出しの内容 [/chat]そして、上記の「画像情報」「キャラクター名」「配置」「吹き出しの内容」・・・などを埋めることで簡単に吹き出しが出来上がります。
しかし、複数の吹き出しを作るときには、上記のコードを何回もコピペしたり、画像情報(ファイル名)をどこかに控えておいたり・・・と若干作業が煩わしいですよね。
上記のように、対談形式だと非常にめんどくさいですよね？
そこで今回、そのめんどくささを無くし簡単に複数の吹き出しを作ることができるツールを作りました。
ツールと言っても作りは非常に簡単で、Excel形式になっているので皆さん適宜修正してご活用ください。
JINチャット吹き出しツールの使い方
①下記のボタンからファイルをダウンロード
ダウンロードしたら、ファイルを開いてください。
2020.01.20追記
スプレッドシート版を以下に用意しました
※スプレッドシート版を使用する場合は[ファイル]-[コピーを作成]でご自身のアカウントで編集できるようにしてください。
②必要な項目（B列～E列）を埋める
下記のようなファイルが開きます。
ファイル2行目にある例のように、下記を埋めてください。
・B列 : 画像ファイル名
・C列 : キャラクターの名前
・D列 : キャラクターの配置をドロップダウンリストから選択
（左であれば「left」、右であれば「right」）
・E列 : 吹き出しの内容
上記を埋めるとF列に自動でソースコードが生成されます。
③F列の「ソースコード」をコピペ
そのままワードプレスにコピペ（※）して使用してください。
※ビジュアルエディタではなくテキストエディタにコピペしてください。
JINチャット吹き出しツールの使用例
画像ファイル名のみ、下記から確認する必要があります。
ここではファイル名は「admin-ajax.jpg」となります。
したがって、Excelには以下のように埋めます。
そうすると、F列には以下のコードが自動で生成されます。
[chat face="admin-ajax.jpg" name="ルー君" align="left" border="gray" bg="none" style="maru"]例えば僕の場合は次のように埋めると良いよ[/chat]
そのままワードプレスにコピペすれば下記の吹き出しができます。
したがって、あらかじめ以下のように情報を埋めておけば、
F列をコピぺするだけで以下のように連続した吹き出しが簡単に生成できます。
まとめ
いかがでしたでしょうか？
簡単なツールですが、ぜひご活用ください。
要望あれば吹き出しの色や枠も一緒に変更できるようにバージョンアップも考えています。
＜文・画像・編集＝Sky Hand(@theskyhand)＞
Roots Lab.では定期的にイベントを開催しています。興味のあるテーマがあればぜひご参加ください！
