【ザ・トール】吹き出しの使い方♪画像変更&追加方法を紹介

吹き出しを使って2人で話し言葉で説明をしているサイト、よく見かけますよね?
2人の掛け合いは、私にはまだ難しくて上手く使えていません(笑)
でも、固定の画像っていうのが寂しくて( ̄▽ ̄;)

人間の画像が使いたいなあという時と、動物の掛け合いが可愛くていいなぁという時があるかもしれない(`・ω・´)キリッツ
この記事では、まず基本となる【THE THOR】ザ・トールの「吹き出しの」の設定についての紹介をしていきます♪

後半では、吹き出しの画像を固定ではなく任意の画像に変えちゃう方法を紹介します(^^

【THE THOR】ザ・トール吹き出しの種類の説明

【THE THOR】では画像を2人までしか登録はできません。
その設定はブログ全体に設定されます。
ブログの全部のページで同じ子を登場させるのはちょっと・・・という方は、工夫が必要になります。
その工夫をつかうと、3人以上での会話もできます。
ページごとに、違う画像で会話することもできます♪
その方法は後半に紹介させていただきます(^^)/

そら
いつもと同様コピペでOKです。

この記事では標準装備の設定方法と、個別で吹き出しの画像を変更する方法を紹介します♪

クラシックエディタでブログを書いている方にちょっとだけ、お知らせが。
このエディタで表示される吹き出し画像の下部分の表示がおかしいと焦った方いませんか?
(私は、なぜ~~~~と画像を修正しまくりました( ̄▽ ̄;) )
そんな時は、プレビューを確認してみてください。
そう、気にしちゃいけなかったんです(;^_^A

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

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

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

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

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

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

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

うみ
右画像のボーダースタイルです。

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

刷毛のマーク「外観」→「カスタマイズ」をクリック

「パーツスタイル」→「吹き出し設定(個別ページ用)」をクリック

吹き出し設定(個別ページ用)の画面が表示されます。
ここで設定をしていきます。
画像のサイズは「ノーマル」と「ビック」の2類のサイズから選択します。
私の表示させているサイズが「ノーマル」のサイズです。
「80×80」位で表示されます。

「画像を変更」をクリックすると、メディアの選択画面になりますので、選択してください。
名前も入力しましょう。
右画像の下に左画像の設定がありますので、同じように「画像を変更」をクリックして右画像を設定し名前を入力してください。
名前が思い浮かばい場合はそのままでもかまいません。
(ぺージに吹き出しを挿入した後に個別に変更可能です。)

【THE THOR】ザ・トール吹き出しの背景色の変え方

下にスクロールしていくと、「背景吹き出しの設定」があります。
ここが「背景スタイル」の設定になります。
背景スタイルの文字色と背景色をここで設定します。
「色を選択」をクリックして色を選択して下さい。

【THE THOR】ザ・トール吹き出しの枠線の色の変え方

枠線が付く「ボーダースタイル」の設定は、「ボーダー吹き出しの設定」になります。
ここで、吹き出しの中の文字色、背景色、枠線の設定をします。
「色を選択」をクリックして色を選択して下さい。

設定が終わりましたら、スクロールして上に戻り「公開」ボタンをクリックしてください。

【THE THOR】ザ・トール吹き出し画像のサイズ変更

まず画像を準備します。

「メディアを追加」からエディタに画像を表示させてください。

ここではこの画像を使って説明させていただきます。
次に画像を吹き出しのサイズに変更します。
画像の表示サイズの変更の仕方は

wordpress画像を囲み枠で装飾♪画像編集ソフトはいらない?

の ②画像を囲み枠で装飾の確認2 wordpress画像の設定の説明 で紹介しています。
画像のサイズ変更の方法がわからない方はどうぞ♪

↑ 画像を80に変更しました。
(縮小の倍率が高すぎると画像の表示がよくないですね(;^_^A )

【THE THOR】ザ・トール右側の子の吹き出し変更画像を作成

これで吹き出しの子が出来ました。
この画像の上で右クリックしてください。

左側の子にしたい時はこの赤丸をクリックしてください。
次に吹き出しの準備です。

【THE THOR】ザ・トール右側の子の吹き出し画像を下に作成

画像の下に吹き出しを追加してください。

 

そら
コメント

 

この様に縦に並んで表示されましたか?
この2つの画像をコピペを使って、画像変更しちゃいます♪

【THE THOR】ザ・トールコピペ♪吹き出しの画像変更

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

 

コピペ文を探す

そら
右の子の画像と右の吹き出しの部分の文を見つけてください。
<p><img class=”alignleft “ src=”https://soramanabrog.com/******/******/******/自画像********.png” alt=”” width=”80″ height=”72″ /></p>
<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>

上から2行が変更用の画像で、それから下の文が吹き出しの文になります。
ちょっと大変かもしれませんが、探してください。

【THE THOR】ザ・トール元の吹き出し画像を削除

ここからは6-1の文を使っての説明になります。
順番に加工していってください。
まず、黄色のラインを引いてある文の説明です。
黄色の線部分が、吹き出し画像の文となります。
この黄色のライン文を削除して、青のラインの文 「 class=”alignleft “ 」を コピペします。

【THE THOR】ザ・トールいらない文を削除

次に赤色のラインを引いてある文の説明です。

赤ラインを引いてある <p></p> <div></div> を削除してください。

変更したい画像をコピペする

6-2 で使用した、青のラインを引いてある部分は削除してください。

そして、残った文を今度は使用します。
青のラインのある<>で囲まれている残りの文 ↓↓ をにコピペします。

<img  src=”https://soramanabrog.com/******/******/******/自画像********.png” alt=”” width=”80″ height=”72″ />

画像と名前の位置調整

緑のラインの文「 <br /><br /> 」を「そら」と書かれている部分の前にコピペしてください。
「そら」をにつけたい名前に変更します。

変更後の文

↓↓↓ このような文にしてください。

<div class=”balloon balloon-boder”>
<figure class=”alignleft”><img src=”https://soramanabrog.com/wp-content/uploads/****/**/自画像4-300×270.png” alt=”” width=”80″ height=”72″ />
<figcaption class=”balloon__name”><br /><br />そら</figcaption></figure>
<div class=”balloon__text balloon__text-right”>コメント</div>

</div>

加工が終わりましたら、「ビジュアル」戻って確認してください。

「コメント」を自分の言葉に変更して完了です(^^♪

そら
コメント

同じ画像で吹き出しを何度も使うなら登録しちゃおう

これをがポイントになるかも♪

今紹介したコードを、プラグインを使って保存してクリック1つで張り付けて使用しましょう!

使用するプラグインは「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"><br /><br />名前を入力</figcaption></figure>
<div class="balloon__text balloon__text-right">

③の部分には

</div></div>
そら
を張り付けて保存して使用してください。

コメントに入れたい文を先に書いて、選択した状態でクイックタグを指定してあげると、吹き出しに文が入ります。

 

wordpress【THE THOR】ザ・トール吹き出し♪画像変更&追加方法を紹介 まとめ

そら
吹き出しの紹介ページを作ってみました(^^♪


ご自分で画像を準備する場合、画像は大きすぎないものを準備することをお勧めいたします。
その方が、表示がきれいです♪

無制限機能盛りだくさんのレンタルサーバー


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

人気ブログランキング

私が無料で登録している2つのアフェリエイトの会社です。

どちらもメリットがあるので、アフェリエイトに興味があるなら登録をお勧めします。

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

物販のアフェリエイトに興味がある方は、アソシエイトに応募と同時に(保険として)もしもからも申請することをお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここは取り扱っている商品が沢山あります!無料の初心者用のアフィリエイトブログ作成の無料セミナーがあるので、ここに登録してセミナーに参加することをオススメします!

アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。 子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。 エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。