注目キーワード
  1. the thor
  2. WordPress
  3. Google
  4. プラグイン
THE THOR(ザ・トール)で吹き出しの画像変更と設定のまとめ

THE THOR(ザ・トール)で吹き出しの画像変更と設定のまとめ

こんにちは、テンテンです。

 

今回は、THE THORで吹き出し画像の使い方やデザイン変更についてのまとめを解説させていただきます。

 

【吹き出し事例】

テスト太郎
テキストテキストテキストテキストテキストテキストテキストテキスト

 

通常、吹き出しなどはプラグインなどを導入して活用する場合が多いですが、THE THORの場合、デフォルトで吹き出しが入っているので、プラグインなどを導入することなく使用することができます。

 

今回は、大きく3つのテーマで解説させていただきます。

 

THE THORでの吹き出しの使い方について

吹き出し画像の変更方法について

吹き出しデザインの変更方法について

 

あらかじめ、吹き出しに使う画像を用意しておいてくださいね!

 

では、早速解説に進みます。

 

THE THOR(ザ・トール)の吹き出しの使い方について

 

吹き出しの使い方自体は、とても簡単です。まずは、記事の投稿画面を開きましょう。

 

「プリセットパーツ」→「吹き出し」から吹き出しのスタイルを選ぶことができます。

プリセットパーツのスクショ

 

デフォルトの背景スタイルは、背景がグレーになっている吹き出しで、デフォルトのボーダースタイルは、背景が白の吹き出しとなっています。

 

下記に、各デフォルトの吹き出しの画像を載せておきます。

 

【吹き出しデフォルトの状態】

 

Tenten

このままでも使えなくはないですが、やはりオリジナルの画像に変更したいですよね!

吹き出しの画像変更やデザイン変更もできるので、ここから解説していきますね。

 

使い方自体の解説は以上となります。

 

THE THOR(ザ・トール)の吹き出しの画像を変更する方法について

 

吹き出しの画像変更方法には、主に2つのやり方があります。


基本的には、①の設定が今後使いやすくなるので、そちらの方法で設定しておきましょう。

 

①カスタマイズから吹き出し画像を変更する方法

 

カスタマイズから吹き出し画像を設定しておくことで、吹き出しのデザイン固定して使うことができます。


なので、まずはこちらの方法で設定しておきましょう。

 

①「外観」→「カスタマイズ」に進みます。

WordPress外観からカスタマイズのスクショ

 

②「パーツスタイル設定[THE]」に進みます。

パーツスタイル設定のスクショ

 

③「吹き出し設定[個別ページ用]」に進みます。

吹き出し設定のスクショ

 

 

④「画像サイズを選択」、「吹き出し画像の設定」、「名前を入力」をします。
※今回は左画像のみの設定をしております。

赤枠で囲っている箇所は、必ずするべき設定で、青枠で囲っている箇所は必要に応じて設定をしてください。

the thor吹き出し画像変更のスクショ

 

 

Tenten

ちなみにnameの部分は、手打ちで変更していきましょう。

名前も入力ができるようになったので、入力しておくことをオススメします。

 

【吹き出しの画像サイズの参考例】

・ノーマル

吹き出しノーマルサイズのスクショ

・ビッグ

吹き出しビッグサイズのスクショ

 

②メディアを追加から吹き出し画像を変更する方法

 

次に、メディアを追加から吹き出し画像を変更する方法についてです。

 

この方法は、毎回吹き出し画像を設定する必要があるので、決まった画像以外を吹き出し画像として変更する際に使うのがオススメです。

 

まずは、下記画像をご覧ください。

 

この状態で画像にカーソルを合わせて、「メディア追加」します。

吹き出し画像の変更方法のスクショ

 

後は、変更したい吹き出し画像を指定するだけです。 THE THORでの吹き出し画像変更方法は以上となります。

 

THE THOR(ザ・トール)で吹き出しのデザインを変更する方法

 

THE THORでは、吹き出しのデザインを変更することができます。

 

【吹き出しデザイン変更の参考例】

テスト太郎
テキストテキストテキストテキストテキストテキストテキストテキスト
Tenten

上記の吹き出しは、当ブログで使っている一つの吹き出しデザインです。

LINEをイメージして作成しています。

 

THE THORは、吹き出しの背景色や文字色、枠線の色など変更することができます。

 

先ほどと同様に、カスタマイズの「吹き出し設定[個別ページ用]」に進みましょう。
※「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「吹き出し画像の設定」

吹き出しデザイン変更のスクショ

 

【THE THORの吹き出しのタイプ2種類】

・背景吹き出しのスタイル

・ボーダー吹き出しのスタイル

 

後は、自分のオリジナルの吹き出しデザインを作るだけです。自由に好きなデザインを作ってみてください!

 

さいごに

 

吹き出しデザインは、割と多く使うCSSの一つなので、しっかり覚えるようにしておきましょう!

 

THE THOR(ザ・トール)は細かい設定もたくさんあって、なかなか覚えられにくい点もありますが、使いこなしていくことで、よりデザイン性が優れたブログができますよ。

 

最後まで読んでいただき、ありがとうございました。

THE THOR(ザ・トール)で吹き出しの画像変更と設定のまとめ
最新情報をチェックしよう!