吹き出しを使って２人で話し言葉で説明をしているサイト、よく見かけますよね？
２人の掛け合いは、私にはまだ難しくて上手く使えていません(笑)
でも、固定の画像っていうのが寂しくて(￣▽￣;)
人間の画像が使いたいなあという時と、動物の掛け合いが可愛くていいなぁという時があるかもしれない(｀･ω･´)キリッツ
この記事では、まず基本となる【THE THOR】ザ・トールの「吹き出しの」の設定と吹き出しの画像を固定ではなく任意の画像に変えちゃう方法を紹介します(^^
THE THOR（ザ・トール）ブロックエディタで吹き出しはどこ？
ブロックエディタを使用している方は、ブロックの「クラシック」スタイルを使用します。
「プリセットパーツ」に「吹き出し」の項目があります。
＜ PR ＞
【THE THOR】ザ・トール吹き出しの画像のサイズ
吹き出しの画像表示サイズは「ノーマル」と「ビック」の２種類から選択します。
- 「ノーマル」：「80px×80px」で画像は丸く切り抜かれて表示
- 「ビック」：「120px×120px」で画像が丸く切り抜かれて表示
使用する表示のサイズを参考に画像を準備してください。
【THE THOR】ザ・トール吹き出しの画像設定
【THE THOR】では画像を２人までしか登録はできません。
その設定はブログ全体に設定されます。
ブログの全部のページで同じ子を登場させるのはちょっと・・・という方は、工夫が必要になります。
その工夫をつかうと、３人以上での会話もできます。
ページごとに、違う画像で会話することもできます♪
その方法は後半に紹介させていただきます(^^)/
私が使っているこの吹き出しの画像は300px×300pxを使用しています。
（私は、なぜ～～～～と画像を修正しまくりました(￣▽￣;) ）
そんな時は、プレビューを確認してみてください。
そう、気にしちゃいけなかったんです(;^_^A
【THE THOR】ザ・トール吹き出しの種類を紹介
吹き出しは「背景色のみ」と、「背景色+枠」の２種類が準備されています。
この背景色と枠色は設定で指定して使用します。
【THE THOR】ザ・トール吹き出し左画像（背景スタイル）
背景スタイルでは枠線が表示されません。
【THE THOR】ザ・トール吹き出し左画像（ボーダースタイル）
吹き出しに枠線が付きます。
【THE THOR】ザ・トール吹き出し右画像（背景スタイル）
【THE THOR】ザ・トール吹き出し右画像（ボーダースタイル）
＜ PR ＞
【THE THOR】ザ・トール吹き出しの設定場所
刷毛のマーク「外観」→「カスタマイズ」→「パーツスタイル」→「吹き出し設定（個別ページ用）」の順にクリックしていってください。
吹き出し設定（個別ページ用）の画面が表示されます。
ここで設定をしていきます。
【THE THOR】ザ・トール吹き出しの設定項目
- 画像表示サイズ
- 使用する画像(右/左）
- 吹き出し画像の下に表示させる名前
- 「背景のみ（背景吹き出しの設定）」吹き出しの文字色・背景色
- 「吹き出し枠線付き（ボーダー吹き出しの設定）」吹き出しの文字色・枠線色・背景色
各項目の設定が終わりましたら、スクロールして上に戻り「公開」ボタンをクリックしてください。
【THE THOR】ザ・トール吹き出しの中の文字表示方法
ブロックエディタを使用して、クラシックブロックを選択して吹き出しを選択した時の私の環境での画像です。
吹き出しの名前が変わっていない？！
ブロックエディタを使用している時は、名前を設定しているのに「undefined」と表示されている場合があります。
というか、私の環境だとそうなっています。
面倒ですが、毎回名前を変更します。
「 undefined 」をマウスでドラックして選択した状態にして、選択されて色が変わっている状態の上にカーソルを持っていき、名前を記入してください。
「 undefined 」という文字を削除してからの記入でも大丈夫♪。
吹き出しのコメントの入力
「 コメント 」をマウスでドラックして選択した状態にして、選択されて色が変わっている状態の上にカーソルを持っていき、コメントを入力してください。
「コメント」という文字をバックスペースで文字を消していき、そのまま記入でも大丈夫♪。
Deleteキーで削除してからだと、吹き出しがなくなります(￣▽￣;)
【THE THOR】ザ・トール３人目の吹き出しを作成してみた
必要になるのは、吹き出しで使いたい画像とコピペです(笑)
設定で使用したように、なるべく正方形の画像を用意してください。
大きい画像を吹き出し画像に使用する場合は、縮小して使用します。
サイズが大きい画像を吹き出しに使ってみる
「メディアを追加」からエディタに画像を表示させてください。
画像を吹き出しで使用するサイズに縮小させる
クラシックエディタの場合
画像をクリックすると四つ角に小さな□が表示されますので、□をドラックして画像を小さくするか、画像をクリックしたときに、画像の上に表示される鉛筆アイコンをクリックしてください。
画像詳細設定画面が表示されますので、「設定を表示」でサイズを小さくさせてください。
画像は「左寄せ」を選択してください。
ブロックエディタの場合
「クラシック」スタイルを選択して画像を同じように小さくしてください。
小さくした画像の下に吹き出しを表示させる
それぞれのコードを表示させる
クラシックエディタの場合
次に画面右上の「テキスト」をクリックしてください。
<div class=”balloon balloon-boder”>
<figure class=”balloon__img balloon__img-left“>
㋐
<div> </div>
<figcaption class=”balloon__name”>そら</figcaption>
</figure>
<div class=”balloon__text balloon__text-right”>コメント</div>
</div>
水色の部分が、小さくした画像。
ピンクの部分が吹き出し部分になります。
吹き出しコード変更の方法
赤字の<p></p><div></div>は削除します。
オレンジ文字の「balloon__img balloon__img-left」を削除して「alignleft」にコピペしてください。
コピペした後「class=”alignleft “」も削除してください。
その後、紫の「㋐」の部分に水色の部分をコピペして完了です(^^♪
<figure class=”alignleft”><img src=”http://soramanabrog.com/wp-content/uploads/****/**/*******.png” alt=”” width=”80″ height=”72″ />
<figcaption class=”balloon__name”>そら</figcaption>
</figure>
<div class=”balloon__text balloon__text-right”>コメント</div>
</div>
ブロックエディタの場合
ブロックの「クラシック」スタイルを使用します。
「クラシック」で同じように画像と吹き出しを表示させてください。
「HTMLとして編集」をクリックして、クラシックエディタで説明したのと同じようにコピペ編集します。
編集後に「ビジュアル編集」をクリックして完了です(^^♪
ブロックエディタの吹き出しのコード
<div class=”balloon”>
<figure class=”balloon__img balloon__img-left“>
㋐
<div></div>
<figcaption class=”balloon__name”>そら</figcaption>
</figure>
<div class=”balloon__text balloon__text-right”>今度はくまと画像を入れ替えます。</div>
</div>
クラシックエディタとコードがちょこっと違いますが、同じように赤字は削除してください。
㋐の部分に水色部分を差し込みます。
オレンジ文字の「balloon__img balloon__img-left」に「alignleft」に変えます。
同じ画像で吹き出しを何度も使うなら登録しちゃおう♪
これをがポイントになるかも♪
今紹介したコードを、プラグインを使って保存してクリック１つで張り付けて使用しましょう！
クラシックエディタなら「AddQuicktag」で登録して使うのが便利
使用するプラグインは「AddQuicktag」です。
「プラグイン」→「新規追加」で「AddQuicktag」と検索してインストールして有効化してください。
このプラグインの使用方法は囲み枠の所で紹介しているので、下の記事を参考にしてください。
コピペOK【文章加工】文章を囲み枠で装飾♪基本プラグイン編
「【wordpress】文章の囲み枠で使うプラグインでタグの設定」の項目
①には自分がわかる名前を記入します。
②には上で作成した「変更後の文」を張り付けます。
<div class="balloon balloon-boder"><figure class="alignleft"><img src="https://soramanabrog.com/wp-content/**/**/**/****.png" alt="" width="92" height="92" class="alignnone wp-image-8028" /><figcaption class="balloon__name">名前を入力</figcaption></figure> <div class="balloon__text balloon__text-right">
③の部分には
</div></div>
コメントに入れたい文を先に書いて、選択した状態でクイックタグを指定してあげると、吹き出しに文が入ります。
ブロックエディタで決まったコードを使用したいときは、再生ブロックとして登録して使用するのをお勧めします。
wordpress【THE THOR】ザ・トール吹き出し♪画像変更&追加方法を紹介 まとめ
ブロックエディタでの吹き出し画像の変更方法を追記ついでに大幅にリライトしました。
プラグインを使用したり、無効にしたりしているので私が表示されている画面が訪問してくれた方と同じになっているのか不安になります(;^_^A
ご自分で画像を準備する場合、画像は大きすぎないものを準備することをお勧めいたします。
その方が、表示がきれいです♪
ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
私が無料で登録している2つのアフェリエイトの会社です。
どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。
私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。
物販のアフェリエイトに興味がある方は、アソシエイトに応募と同時に（保険として）もしもからも申請することをお勧めします♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
ここは取り扱っている商品が沢山あります！無料の初心者用のアフィリエイトブログ作成の無料セミナーがあるので、ここに登録してセミナーに参加することをオススメします！
アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
