【THE THOR】吹き出し画像2つしか設定できないの?と思った方、私の仲間ですwww。
この記事では、私の吹き出しのカスタマイズについてを紹介しています。
もちろん、初心者向けなので、画像たっぷりコピペ文とともに紹介していきます♪
吹き出しの基本的な設定については下の記事を参考にしてください。
>>>【THE THOR】吹き出しが消えた!を回避する♪設定と使い方
- THE THOR吹き出しの画像を変える手順
- THE THOR吹き出しの画像を変える
- THE THOR吹き出しの画像を丸く表示させる
THE THOR吹き出しの画像を変える手順
- 使用したい画像を表示させる
- THE THOR変更したい吹き出しを表示させる
- テキストエディタでコードをコピペ
THE THOR使用したい画像を表示させる
「メディアを追加」から3人目のキャラクターの画像選択してください。
私はくまくまの手を上げないバージョンを用意しました。
ノーマルの吹き出しの場合は80×80pxの画像を使用しています。
「左画像(背景スタイル)」の画像を変える場合は、表示させた画像をクリックして左寄せをクリックしてください。
THE THOR変更したい吹き出しを表示させる
使用したい画像の下に「左画像(背景スタイル)」の画像を表示させてください。
吹き出し画像のコードを表示させる
クラシックエディタの場合

次に画面右上の「テキスト」をクリックしてください。
<div>
<div class=”balloon”>
<figure class=”balloon__img balloon__img-left“>
<div> </div>
<figcaption class=”balloon__name”>sora</figcaption>
</figure>
<div class=”balloon__text balloon__text-right”>上の画像と、この吹き出しの画像をコピペで差し替えます(笑)</div>
</div>
</div>
水色の部分が、手をあげてないくまくまの画像。
ピンクの部分が吹き出しの画像部分になります。
吹き出しコードを切り張り
赤太文字の「balloon__img balloon__img-left」を削除して青太文字「alignleft」を切り取り貼り付けてください。
<figure class=”alignleft”>ここに水色の部分を切り取り貼り付けます。
下のコードになるようにします。
<figure class=”alignleft”><img class=”size-full wp-image-15446 ” src=”https://soramanabrog.com/wp-content/uploads/2020/04/くま4.png” alt=”” width=”80″ height=”80″ />
<div> </div>
<figcaption class=”balloon__name”>sora</figcaption>
</figure>
<div class=”balloon__text balloon__text-right”>コメント</div>
</div>
上のようにコードの移動が終わりましたら、下のくまくまの吹き出しのようになっているかと思います。

画像と名前が離れているので、画像と名前の間をマウスでクリックして「BackSpace」をクリックしてください。

ブロックエディタの場合
ブロックの「クラシック」スタイルを使用します。
「クラシック」で同じように画像と吹き出しを表示させてください。
「HTMLとして編集」をクリックして、クラシックエディタで説明したのと同じようにコピペ編集します。
編集後に「ビジュアル編集」をクリックして完了です(^^♪
CSSをで四角い吹き出し画像を丸くする
border-radius: 50%;
}
吹き出し画像にCSSの設定をする



【THE THOR】吹き出しキャラをコピペでカスタマイズ まとめ
「THE THOR」の吹き出しキャラ、カスタマイズできましたか?
以前吹き出しの設定の記事で書いてあったものを、カスタマイズの記事として分けました。
この吹き出しの背景の色もキャラごとに変更できるといいなと思いながらこの記事を書いています。だれか知っていたらコメントで教えてくださいwww。