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

吹き出しを使って2人で話し言葉で説明をしているサイト、よく見かけますよね?

 
sora
くまくま~吹き出しの説明はじめるよ~
 
くまくま
は~い!

 

この記事では、基本となる【THE THOR】ザ・トールの「吹き出しの」の設定と吹き出しの使い方画像を紹介します。

 

 
sora
設定以外のキャラを使用する設定についても紹介もしています。

 

この吹き出しの色をキャラごとに変更することはできません
 
 

本記事の内容

  1. THE THOR吹き出しの紹介
  2. THE THOR吹き出しの設定
  3.  THE THOR吹き出しの画像を記事中に変える

 

 

【THE THOR】ザ・トール吹き出しの紹介

 

 

「ビック」を選択した場合の画像

 

吹き出しの画像表示サイズは「ノーマル」と「ビック」の2種類から選択します。

 

 
sora
私のこの吹き出しの画像は125×125pxの72dpiで作成してあります。
 
 
くまくま

くまくまも125×125pxの72dpiで作成してあるよ。

 

【THE THOR】ザ・トール吹き出しの設定

 

【THE THOR】の吹き出しキャラは画像を2キャラまでしか登録はできません。


その設定はブログ全体に設定されます。

画像それぞれの「背景スタイル」、「ボーダースタイル」の設定があるのではありません。

 

掛け合いをしたとき、右の画像の吹き出しも、左の画像の吹き出しも、同じ吹き出しの見た目になります。

 

変えたい場合は、スタイルを変えて使用します。

 

 

 
sora
背景スタイルです
 
くまくま
ボーダースタイルです
 
 
編集エディタで表示される吹き出し画像の表示がおかしい場合はプレビューを確認してみてください。(エディターのみ表示がおかしい・・・)

 


PR

【THE THOR】ザ・トール吹き出しの種類を紹介

 

吹き出しは「背景色のみ」と、「背景色+枠」の2種類が準備されています。
この背景色と枠色は設定で指定して使用します。

 

【THE THOR】ザ・トール吹き出し左画像(背景スタイル)

 

 
そら
背景スタイルになります。
背景スタイルでは枠線が表示されません。

 

【THE THOR】ザ・トール吹き出し左画像(ボーダースタイル)

 

 
そら
ボーダースタイルになります。
吹き出しに枠線が付きます。
 

 

【THE THOR】ザ・トール吹き出し右画像(背景スタイル)

 

 
くまくま
背景スタイルとボーダースタイルの設定は右画像・左画像共通設定です。

 

【THE THOR】ザ・トール吹き出し右画像(ボーダースタイル)

 
くまくま
右画像のボーダースタイルです。

 

【THE THOR】ザ・トール吹き出しの設定場所

 

 

刷毛のマーク「外観」→「カスタマイズ」→「パーツスタイル」→「吹き出し設定(個別ページ用)」の順にクリックしていってください。

 

吹き出し設定(個別ページ用)の画面が表示されます。
ここで設定をしていきます。

 

 

 

吹き出しに使用できる画像はWEBPファイルは使用できません。デフォルトの猫が表示されます。

 

吹き出しの画像の名前、吹き出しの線の色、吹き出しの色、吹き出しの文字色、各項目の設定が終わりましたら、スクロールして上に戻り「公開」ボタンをクリックしてください。

 

THE THOR(ザ・トール)吹き出しの文字の入れ方

 

①吹き出し画像を表示させてからコメントを入力する

 

 
sora
コメント
 
「プリセットパーツ」→「吹き出し」→「左画像背景スタイル」をクリックすると上の画像のように、コメントと表示されます。
コメントの後ろに文字を入力してから、コメントを削除してください。
 
 
入力前にコメントを消すと吹き出しが消えます。
 
 
②吹き出しの文字を先に入力してから吹き出しをクリックする。
 
 
さきにコメントを入力します。
↑↑↑↑この文を選択したまま画像のように吹き出しをクリックしてください。

THE THOR(ザ・トール)ブロックエディタで吹き出し

 

ブロックエディタを使用している方は、ブロックの「クラシック」スタイルを使用します。
「プリセットパーツ」に「吹き出し」の項目があります。

 

【THE THOR】ザ・トール吹き出しの中の文字表示方法

 

 

 

ブロックエディタを使用して、クラシックブロックを選択して吹き出しを選択した時の私の環境での画像です。

 

吹き出しの名前が変わっていない?!

 

ブロックエディタを使用している時は、名前を設定しているのに「undefined」と表示されている場合があります。

というか、私の環境だとそうなっています。

面倒ですが、毎回名前を変更します。

 

「 undefined 」をマウスでドラックして選択した状態にして、選択されて色が変わっている状態の上にカーソルを持っていき、名前を記入してください。

「 undefined 」という文字を削除してからの記入でも大丈夫♪。

 

【THE THOR】吹き出しのキャラは記事中に変えれる

 

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

 

 

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

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

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

 

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

 

テキストエディタで、変更したい画像を探して、”balloon__img balloon__img-left”を”alignleft”に変えて、後ろに変更したい画像の部分をコピペしてあります。

 



sora
差し替えました。

用意した画像が四角なので四角く表示されています。私は丸がいいので、CSSを使って丸くしてあります。

 


名前も変更OK
丸い画像を用意しなくでも丸くするCSSを登録しておくと簡単に画像を丸くできます。
 

 

登録はできません。使用都度差し替えます。

 

このカスタマイズについては別記事で紹介しています。キャラを変えて使用したい方は下の記事を参考にしてください。

 

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

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

 

この記事では、「THE THOR」の吹き出しの設定とコメントに文字を入れる方法について解説しました。

以前は吹き出し画像のカスタマイズについてもこの記事中に詳しく書いていたのですが、基本設定の記事とカスタマイズの記事を分けることにしました。

「【THE THOR】吹き出しキャラをコピペでカスタマイズ」では「THE THOR」の吹き出しカスタマイズ方法について画像たっぷり、コピペ文つきで紹介してありますので、興味がある方は参考にしてください。


ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪

人気ブログランキング