WordPress

【JIN】吹き出しの設定方法・AddQuicktagを使って面倒くさいコードの設置を簡単に!

JINユーザーの皆様、こんにちは!

はにー
はにー
突然ですが、JINの吹き出し活用していますか?

↑こういうやつです^^;

画像をアップロードして吹き出しを使えば、キャラクターがお喋りしてるように見えます。

設定方法はすごく簡単なので、この機会に是非吹き出しデビューしてみてください!

 

こんな方に!

1.JINの吹き出し設定が分からない
2.使っているけど画像が多くて面倒くさい
3.簡単にコードの設置がしたい

画像ファイルをアップロードする方法

まずは、吹き出しに使用する画像ファイルをアップロードしましょう!

JIN 画像アップロード方法

① ↑ワードプレスのホーム画面から【メディア】→【ライブラリ】をクリック。

 

ワードプレス 画像のアップロード

② ↑の画面に切り替わったら、赤枠で囲んだ【ファイルを選択】を押して、目的の画像をアップロードするか、左右の空白の部分に画像をドロップします。

 

JIN 吹き出し設定

③ ↑アップロードが終わりましたら、画像をクリックして赤枠で囲んでいる【ファイル名】の横の文字をコピー、またはメモしておいてください。

上の画像だと、”IMG_6598.png”の部分ですね。

すでにアップロード済のプロフィール画像を吹き出しに使いたい場合は、新たにアップロードする必要はありません。

その場合、【メディア】→【ライブラリ】から目的の画像を探し、【ファイル名】をコピーまたはメモしてください。

JIN 吹き出しコードの設置

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

JIN 吹き出し設定

① ↑ワードプレスの投稿画面にある【CHAT】をクリックすると、吹き出しを設置するためのコードが現れます。

JIN 吹き出し設定

まずは、先程コピーしたファイル名を【chat face=”ここに入力”】してみましょう。

キャラクターの名前を入力

【name=”好きな名前”】を入力します。

はにー
はにー
こんなふうに、キャラクターの下に名前が反映されるよ!

左右の配置を決める

キャラクターを対話形式にしたい場合は、左右の配置を設定できます。

【align=”配置場所”】の欄に、左なら【left】右なら【right】と入力。

はにー
はにー
はにーはいつも左側よ♥
秘密の女
秘密の女
わたしは右側ね♥

↑すみません、画像が他になかったので、JINの口コミキャラを使用させて頂きました(笑)

吹き出しの枠の色と背景色

↑の吹き出しでは、デフォルトのままなので枠の色がグレー、背景色(枠の中)は、なしです。

枠の色を設定したい場合は、それぞれお好みの色を入力します。
例えば、枠が青で背景色が白なら、

【border=”blue” bg=”none”】と入力、そうすると・・・

はにー
はにー
青の枠に背景色は白に変わったね!

今度は、枠の色を黄色に、背景色も黄色に変更してみます!

【border=”yellow” bg=”yellow”】

はにー
はにー
全体的に色が変わって華やかな印象になったよ

ちなみに、用意されている色ですが、グレーブルーレッドイエローグリーンの5色みたいです。

試しにpinkと打ったら崩れちゃったので^^;

口コミキャラもあるよ

口コミ情報に画像を使いたい場合、または吹き出しに使用する適した画像がない場合は、口コミキャラクターが用意されています。

口コミ1号
口コミ1号
子供っぽい髪型の1号です!
口コミ2号
口コミ2号
爽やか系髪型の2号です!
口コミ3号
口コミ3号
ダンディーな雰囲気の3号です!
口コミ1号
口コミ1号
セミロングヘアの1号です!
口コミ2号
口コミ2号
わかめちゃんカットの2号です!
口コミ3号
口コミ3号
ロングヘアの3号です!

↑のように、男女3名ずつ口コミキャラクターが用意されています。

使用する場合は、【chat face=”man1″】や【chat face=”woman3″】のように書き換えるだけ!

Addquicktagを使えば、コードの設置がより簡単に!

キャラクターの表情が違う複数の画像を、吹き出しで使用している方はAddquicktagを使えばコードの設置が随分ラクになると思います。

【Addquicktag】のインストール手順

addquicktag インストール

① ↑【プラグイン】からキーワードに【AddQuicktag】と入力し、【今すぐインストール】をクリック。

 

addquicktag インストール

② ↑インストールは数秒で終わるので、忘れずに【有効化】します。

 

addquicktagインストール

③ ↑インストールしているプラグイン一覧へ行き、AddQuicktagの【設定】をクリック。
次は、細かな設定を見ていきますね!

AddQuicktag 設定

addquicktag 吹き出し

① ↑設定が必要な4箇所です。

キャラクターの配置場所や枠の色、背景色を変更したい場合は、【変更を保存】をクリックする前に書き換えておいてくださいね(^^)

ボタン名、開始タグ、終了タグの入力ができたら、一番右の□にチェックを入れます。
そうすると、全部の□に一気にチェックが入ったかと思います。

チェックが入れば、忘れず【変更を保存】を押して終了です。

投稿画面へ戻り、AddQuicktagがきちんと反映されているか確認してみましょう!

addquicktag

↑ きちんと、『はにー』という名前で登録されています!

addquicktag

↑ テキストエディタにも『はにー』が追加されました。

吹き出しを使いたいときに、登録されている名前をポチッと押せば、簡単にコードが現れ、あとは台詞を入力するだけなので手間が省けますね(^^)

AddQuicktagへのキャラクター登録は、ひとつひとつしかできません(泣)

もし吹き出しが表示されない場合は?

色々考えられる原因はあるようですが、わたしの場合だいたいいつも同じ原因です。

例えば、【chat face=”ファイル名”】←ファイル名の場所にコピペしたとき、無駄な空白が入ってしまったり、【”】がひとつ消えていたりと、単純な理由が多いです。

なので、画像が表示されなかったり、崩れて表示される場合は、まず落ち着いて空白や【”】を確認してみましょう。

あと、必ずテキストエディタで入力してください!

まとめ

キャラクター設定をしておけば、読者さんに覚えてもらえるし、なにより読みやすくなって良いことだらけだとおもいます。

慣れてしまえば設定も簡単なので、よければ参考にしてみてくださいね!