【THE THOR】吹き出しキャラをコピペでカスタマイズ

【THE THOR】吹き出し画像2つしか設定できないの?と思った方、私の仲間ですwww。

 

この記事では、私の吹き出しのカスタマイズについてを紹介しています。

もちろん、初心者向けなので、画像たっぷりコピペ文とともに紹介していきます♪

 

 
sora
必要になるのは、吹き出しで使いたい画像とコピペ技能です

 

カスタマイズについては自己責任でお願いいたします

 

吹き出しの基本的な設定については下の記事を参考にしてください。

>>>【THE THOR】吹き出しが消えた!を回避する♪設定と使い方

 

本記事の内容

  1. THE THOR吹き出しの画像を変える手順
  2. THE THOR吹き出しの画像を変える
  3.  THE THOR吹き出しの画像を丸く表示させる

 

 

 

「メディアを追加」から3人目のキャラクターの画像選択してください。

私はくまくまの手を上げないバージョンを用意しました。

 

 

ノーマルの吹き出しの場合は80×80pxの画像を使用しています。

 

 

「左画像(背景スタイル)」の画像を変える場合は、表示させた画像をクリックして左寄せをクリックしてください。

 

THE THOR変更したい吹き出しを表示させる

 

使用したい画像の下に「左画像(背景スタイル)」の画像を表示させてください。

 

 
sora
上の画像と、この吹き出しの画像をコピペで差し替えます(笑)

 

吹き出し画像のコードを表示させる

クラシックエディタの場合

 

次に画面右上の「テキスト」をクリックしてください。

 

 
そら
小さくした画像と吹き出しの部分の文を見つけてください。
 
<p><img class=”size-full wp-image-15446 alignleft” src=”https://soramanabrog.com/wp-****くま4.png” alt=”” width=”80″ height=”80″ /></p>
<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”>ここに水色の部分を切り取り貼り付けます。

 

下のコードになるようにします。

<div class=”balloon”>
<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>

 

上のようにコードの移動が終わりましたら、下のくまくまの吹き出しのようになっているかと思います。

 

 
sora
コメント

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

 

sora
コメント

 

ブロックエディタの場合

ブロックの「クラシック」スタイルを使用します。

「クラシック」で同じように画像と吹き出しを表示させてください。

「HTMLとして編集」をクリックして、クラシックエディタで説明したのと同じようにコピペ編集します。

編集後に「ビジュアル編集」をクリックして完了です(^^♪

 

CSSをで四角い吹き出し画像を丸くする

 
「外観」→「カスタマイズ」→「追加CSS」の順にクリックしてください。
 
下のコードをコピペして「公開」をクリックしてください。
 
.maru{
border-radius: 50%;
}
 
「maru」というのがコードの名前になります。
このコードを設定しておくと、正方形の画像なら正円になります。
長方形なら楕円になります。
webpの画像でもpngの画像でも円になります。
 
 
sora
エディターでは四角のままですが、プレビューでみると丸くなっています。
 

吹き出し画像にCSSの設定をする

 

 
画像をクリックして「鉛筆マーク」をクリックしてください。
 
 
「上級者向け設定」の中の「画像CSSクラス」に「maru」と記入して右下にある「更新」をクリックしてください。
 
sora
丸くしたよ
 

【THE THOR】吹き出しキャラをコピペでカスタマイズ まとめ

 

「THE THOR」の吹き出しキャラ、カスタマイズできましたか?

以前吹き出しの設定の記事で書いてあったものを、カスタマイズの記事として分けました。

この吹き出しの背景の色もキャラごとに変更できるといいなと思いながらこの記事を書いています。だれか知っていたらコメントで教えてくださいwww。