WordPressのテーマ『JIN』で吹き出しを表示させる方法

テーマを「JIN」に変えてからというもの、試行錯誤の日々を送っております。

ひつじさんは丁寧に解説してくださってます。

理解出来ない私が悪いんです・・・

今回の課題は　「吹き出し」　です。

こんなのです。

簡単にできます。って書いてあるけど、結構時間がかかりました。

スーパー初心者でも設定出来るように解説してみたいと思います！！

ひつじさんが解説しているのを一緒に読んで下さいね。

吹き出しの使い方｜WordPressテーマ「JIN」の設定マニュアル

https://jin-theme.com/manual/atlas-editor03/

ここではJINでの吹き出し機能（会話）の使い方について解説します。 こういった吹き出しを使えるようになると表現

吹き出しの下準備

まず、吹き出しに使いたい画像を選びます。

メディアに新規登録してしまうと、編集が出来なくなるので、ダウンロードをした時点で画像を加工しておいて下さい。

全身を使うことは少ないと思いますので、顔の部分になりますよね。

3Dペイントなどでトリミングをして、いらない部分は消しておくといいです。

また、画像の大きさは表示の重さに関係してきます。

吹き出し用の画像は小さくても良い、といいますか、表示サイズは小さなものです。

画像圧縮をして100×100くらいの小さな画像にしておいて下さい。

アップロードする画像は正方形に加工しておきましょう。

上下左右が非対称になるか、どこかが切れた表示になってしまいます。

画像の圧縮はどうしたら良いの？という方がいらっしゃればご連絡下さい。

また、別の記事にしてみます。

AddQuicktagというプラグインがあると、作成した吹き出しを簡単に呼び出せるので、入れておくと便利です。

メディアから新規追加する

＜メディア＞から＜新規追加＞へと進み、

メディアのアップロード

＜ファイルを選択＞をクリックして、加工しておいた画像をアップロードします。

アップロードすると、このようになります。

ファイル名の右側（黄色で囲んだ部分）をコピーしておきます。

ヒツジさんは短い方が良いと言われていますが、短くする方法が分かりませんでした。

私の場合、長いですが、特に問題は起きませんでした。

ファイル名を短くする方法

ファイル名を短くする方法が分かりました。

画像をアップロードしてしまうと、ファイル名を短くする事は出来ません。

アップロードする前にファイル名を短くしておきます。

ファイル名を短くしたい画像を右クリックし、『名前の変更』をクリックします。

青く表示されている部分を削除し、新しく名前をつけます。

このとき、日本語では無く、アルファベットかローマ字のように英語表記にしておきます。

すると、

このように、短くなります。

すでにアップロードし、オリジナル画像がない場合の対処法

画像をアップロードし、やれやれ一安心と、パソコン上のオリジナル画像は削除してしまった・・・

ワードプレスあるあるですよね。

ご安心ください。

アップロードした画像を左クリックすると、添付ファイルの詳細という画面になります。

そこに表示されている画像を右クリックして、名前を付けて保存を選ぶとドキュメントかピクチャに保存されます。

そこで、名前を短くして再度アップロードすれば大丈夫です。

吹き出しのコードの設置

いよいよコードを設置していきます。

コードの設置方法

投稿画面のビジュアルモードに＜CHAT＞という吹き出しマークのところをクリックします。

クリックするとこうなります。

{chat face=”man1″ name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

他の文字と区別するために着色しましたが、黒く表示されます。

前後はわざと｛｝にしています。

テキストモードに切り替える

テキストモードに切り替えたら、先ほどコピーした、画像のファイル名を

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

man1の部分を消して、先ほどコピーしたもの（黄色で囲んだ部分）を貼り付けます。

この時に半角スペースや全角スペースが入らないように気をつけて下さいね。

私はここに半角スペースが入っていたために画像の表示が出来ず、何が原因なのか調べまくりました。

答えが書いてある記事に出会えませんでしたけど、自分で気づいたなんて奇跡です。

名前を入れる

画像の下に名前を表示させたい場合は、name=の次にある　””　の真ん中に入れます。

name=”ももこ”　のようになります。

くれぐれもnameは消さないように。

名前はあっても無くてもいいですが、あった方が親切かな？と思います。

吹き出しの位置を決める

おおかみくんのように左に出す場合は align=”left” 

ひつじくんのように右に出す場合はalign=”right”　にします。

ももこ

次男坊！右から出ておいで～

｛chat face=”momoko_6.jpg” name=”ももこ” align=”left” border=”green” bg=”none” style=”maru”]次男坊！右から出ておいで～[/chat｝

次男

右ってこっちかな？お母さん、呼んだぁ？

｛chat face=”jinan.jpg” name=”次男” align=”right” border=”yellow” bg=”none” style=”maru”] 右ってこっちかな？お母さん、呼んだぁ？[/chat｝

実際のコードと吹き出しの内部が分かりますよね。

吹き出しの画像を丸く表示したい

なにもしなければ、画像は正方形で表示されます。

ひつじさんの吹き出しは正方形です。

わたしは丸く表示させたかったので、コードを足して丸くしています。

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=””]ここに文字を入力してください[/chat}

最後のstyle=”” の　”” 部分を　“maru”　とすると、画像が丸く表示されます。

{chat face=”man1” name=”” align=”left” border=”gray” bg=”none” style=“maru”]ここに文字を入力してください[/chat}

後半はひつじさんにトス

枠のカラー（言葉が入る部分）などは、ひつじさんの記事が最高によくわかるので、ここはひつじさんの記事を参考になさってください。

AddQuicktagの設定

AddQuicktagを設定すると吹き出しが簡単に呼び出せます。

こんな感じです。

今後、他にも登録する可能性があるので、種類＝吹き出し　吹き出しの種類＝ももこ、次男など自分で分かりやすいようにしておきます。

では、始めていきましょう。

AddQuicktagをインストールする

プラグインから新規追加をクリックします。

キーワードにAddQuicktagと入力し、左側の葉っぱのマークの方を「今すぐインストール」します。

インストール出来たら、有効をチェックして下さい。

AddQuicktagの設定方法

AddQuicktagの設定をクリックします。

このような画面に変わります。

吹き出しを設定していく　ボタン名

[ボタン名]のところに　「吹き出し　任意の名前」を入力します。

他にも設定していく可能性がある場合は、最初に「吹き出し」など分かりやすくしておくと

あとあと自分が楽です。

吹き出しを設定していく　開始タグと終了タグ

開始タグは、最初に設定したコード

{chat face=”man1″ name=”” align=”left” border=”gray” bg=”none” style=””｝

　{chat face~style””}　まで。

終了タグは、{/chat}　になります。

{　}　としている部分は、本当は　[　]　です。

吹き出しを設定していく　チェックと保存

右側のチェック一覧にチェックを入れていき、最後に『変更を保存』をクリックしたら終了です。

右端にチェックを入れると、全てを一度にチェックする事もできます。

吹き出しが出てくるか確認

最後に投稿の新規追加をクリックして、ビジュアルモードのQuicktagsをクリックしてボタン名で入力した名前が出てくるか、さらにそれをクリックして、正しく表示されているかを

プレビューで確認して下さい。

これで設定は完了です。

大変お疲れ様でした。

ひぃ～設定方法の説明って、超大変ですね～・・・

分かりやすく説明してあるみなさまに大変感謝とねぎらいを送りたいと思います。

疲れた・・・