THE THOR で吹き出しの種類を増やす方法

これでは、喜怒哀楽をいろんな表情で表したり、3人以上の人物を登場させることができません。

そこで今回は、THE THORの吹き出し機能を増やす方法をご紹介します。

この方法であればいくつでも増やせるので、たくさんの人物をいろんな表情で登場させることができます。

ちなみにこのブログでは

THE THORで吹き出し機能を増やす方法

さっそく吹き出し機能を増やしていきましょう。
この方法ではCSSの知識が必要となりますが、ほぼコピペで実装できますのでご安心を。

１．吹き出しに使いたい画像をアップする

まずは、吹き出しに使いたい画像をアップします。
Wordpressのメディアにふつうにアップしてください。

（N）メディア＞新規追加

「ファイルのURL」の部分をあとで使います。

画像サイズはあまり大きくなくていいと思います。
私は「ノーマル」サイズの吹き出しを使ってますが、80x80pxのサイズでちょうど良いです。

あと画像は丸くなくて大丈夫です。
CSSが勝手に丸くしてくれます。

２．class名を決める

吹き出しに表示する画像はCSSでコントロールします。

なので、表示したい画像ごとにCSSのclass名を決めてください。

たとえば、人物ごとに分けたいのであれば「male01」「male02」「female01」「female02」みたいなかんじです。
表情で分けたければ、「male01-smile」「male01-anger」「male01-sad」「male01-joy」とかでしょうか。

以下、「your-class」というclass名を設定したとして説明していきます。

３．CSSを追加する

吹き出しの画像を切り替えるために、CSSを追加します。

追加する場所は、
（N）外観＞カスタマイズ＞追加CSS
で大丈夫です。
（※私はSimple Custom CSSというプラグインを使ってますが）

ここに下記のCSSを追加します。

.content .balloon .balloon__img-right div.your-class,
.content .balloon .balloon__img-left div.your-class{
    background-image: url(https://your-domain.com/wp-content/uploads/2022/09/your-file.png);
}

※「your-class」のclass名と、画像のURLは自分のものに変更してください。
画像URLは先ほどメディアにアップしたものです。

４．吹き出しを表示する

あとは実際に使用するだけです。

投稿画面で吹き出しを選択して挿入してください。
ここでは「左画像（ボーダースタイル）」を選びます。

そうすると↓のような吹き出しが表示されると思います。

そしたら「テキストエディタ」に切り替え、吹き出しのHTMLソースを表示します。

このHTMLの一部を書き換えて、先ほどのclass名を追加します。

<div class="balloon balloon-boder">
<figure class="balloon__img balloon__img-left">
<div class="your-class"></div>
<figcaption class="balloon__name">Name</figcaption></figure>
<div class="balloon__text balloon__text-right">コメント</div>
</div>

※「your-class」のclass名は自分のものに変更してください。

「ビジュアルエディタ」に戻ります。

ビジュアルエディタ上では画像は反映されませんが、プレビュー画面で確認すれば設定した画像の吹き出しが表示されているはずです。

５．Add Quick Tag に登録する（オプション）

上記までで吹き出し機能の追加は完了ですが、使用するたびにいちいちHTMLソースをいじるのもめんどくさいですよね。

そういう場合は「Add Quick Tag」というプラグインに登録しておくことをおすすめします。

このように登録しておけば、

投稿画面から呼び出して一発で入力できます。

いくつでも登録できるので、たくさんの吹き出しを登録しておきたいときにはおすすめです。

まとめ

THE THORの吹き出し機能で、いろんなバリエーションを表示する方法をご紹介しました。

class名と画像を変えて手順１〜３を繰り返せば、いくつでも吹き出しの種類を増やせます。

吹き出し機能をうまく使って読みやすい記事を作ってくださいね！

＼応援クリックお願いします／