Roots Lab.編集部

【連続で吹き出し生成】JINでチャット吹き出しのソースコードを簡単に生成するツール

Roots Lab.編集部のSky Hand(@theskyhand)です。

この記事では、JINで簡単に吹き出しを生成できるツールを紹介をしています。
これを使えば簡単に連続で吹き出しが作れます!

ゆるま
ゆるま
吹き出しってこれのことね
こんな人に読んでほしい

・簡単に対談ブログを作りたい
・吹き出しを連続で作成するのがめんどくさい

皆さんご存知のとおり、JINで吹き出しを作ること自体は非常に簡単です。

通常であれば下記のコードをコピペします。

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

そして、上記の「画像情報」「キャラクター名」「配置」「吹き出しの内容」・・・などを埋めることで簡単に吹き出しが出来上がります。

しかし、複数の吹き出しを作るときには、上記のコードを何回もコピペしたり、画像情報(ファイル名)をどこかに控えておいたり・・・と若干作業が煩わしいですよね。

ルー君
ルー君
例えば、
ゆるま
ゆるま
こんな感じで、私たち二人が
ルー君
ルー君
順番に話をする対談形式の場合
ゆるま
ゆるま
ソースコードをコピペして、控えておいたファイル名を入れて、名前を書き換えて・・・
ルー君
ルー君
そんなことしてると大変じゃない?

上記のように、対談形式だと非常にめんどくさいですよね?

そこで今回、そのめんどくささを無くし簡単に複数の吹き出しを作ることができるツールを作りました。

ツールと言っても作りは非常に簡単で、Excel形式になっているので皆さん適宜修正してご活用ください。

使い方

①下記のボタンからファイルをダウンロード

ダウンロードしたら、ファイルを開いてください。

2020.01.20追記
スプレッドシート版を以下に用意しました

※スプレッドシート版を使用する場合は[ファイル]-[コピーを作成]でご自身のアカウントで編集できるようにしてください。

②必要な項目(B列~E列)を埋める

下記のようなファイルが開きます。

ファイル2行目にある例のように、下記を埋めてください。

ファイルに埋める内容

・B列 : 画像ファイル名
・C列 : キャラクターの名前
・D列 : キャラクターの配置をドロップダウンリストから選択
(左であれば「left」、右であれば「right」)
・E列 : 吹き出しの内容

上記を埋めるとF列に自動でソースコードが生成されます。

③F列の「ソースコード」をコピペ

そのままワードプレスにコピペ(※)して使用してください。
※ビジュアルエディタではなくテキストエディタにコピペしてください。

具体例

ルー君
ルー君
例えば僕の場合は次のように埋めると良いよ

画像ファイル名のみ、下記から確認する必要があります。

ここではファイル名は「admin-ajax.jpg」となります。
したがって、Excelには以下のように埋めます。

そうすると、F列には以下のコードが自動で生成されます。

[chat face="admin-ajax.jpg" name="ルー君" align="left" border="gray" bg="none" style="maru"]例えば僕の場合は次のように埋めると良いよ[/chat]



そのままワードプレスにコピペすれば下記の吹き出しができます。

完成品
ルー君
ルー君
例えば僕の場合は次のように埋めると良いよ

したがって、あらかじめ以下のように情報を埋めておけば、

F列をコピぺするだけで以下のように連続した吹き出しが簡単に生成できます。

完成品
ルー君
ルー君
これで
ルー君
ルー君
簡単に
ルー君
ルー君
吹き出しが
ルー君
ルー君
できるね
ルー君
ルー君
やったーーーー!

まとめ

いかがでしたでしょうか?
簡単なツールですが、ぜひご活用ください。

要望あれば吹き出しの色や枠も一緒に変更できるようにバージョンアップも考えています。

<文・画像・編集=Sky Hand(@theskyhand)>

ABOUT ME
アバター
Sky Hand
某企業でUI・UXの設計 /  テクニカルライター / 趣味でWebマーケティング / / VBAマスター / Roots Lab.の運営・企画 / 趣味:カメラ・写真 / 座右の銘は「仕事は最高か最速」/ とにかく何にでも興味を持っており、楽しいことでも、辛いことでも、つまらないことでも、難しいことでも、一回はやってみる質です。
イベント情報

Roots Lab.では定期的にイベントを開催しています。興味のあるテーマがあればぜひご参加ください!

イベントを見る

COMMENT

メールアドレスが公開されることはありません。