吹き出しの入れ方とカスタマイズ

「THE THOR」吹き出し機能の使い方、画像のカスタマイズ方法

  • 2021年9月18日
  • 2021年9月18日
  • THOR
 
ハテナザウルス
THORの吹き出しってどうやって使うの?
 
ヒラメキザウルス
この記事ではTHORの吹き出し機能について説明しよう!

THORで吹き出しってどうやっていれるの?とお困りの方はいませんか。

筆者はブログのテーマをCocoonからTHORへ変えてから、吹き出しの使い方が分からなくなり、困った経験があります。

この記事では、THORの吹き出し機能でお困りの方へ向けて、

吹き出し機能の使い方と、吹き出しに使う画像のカスタマイズ法を解説します。

 
ヒラメキザウルス
吹き出しを使いこなして、ブログを楽しみましょう。

THORの吹き出しの入れ方

まずは、投稿画面を開き、記事の中に吹き出しを入れていく方法を解説します。

Cocoonではブロックエディターの機能に吹き出しがありましたが、THORのブロックエディターの中には吹き出しがありません。

そこで、THORではクラシックエディターを使って吹き出しを入れます。

 
ハテナザウルス
クラシックエディター?

クラシックエディターで吹き出しを入れる方法

まずは、クラシックエディターを開いてみましょう。

ブロックの追加で「クラシック」を選びます。

ブロックの追加からクラシックを選ぶ図

このブロックだけクラシックエディターになるので、

「プリセットパート」から「吹き出し」を選択します。

プリセットパーツからの吹き出しを選択する図
  1. 左画像(背景スタイル)
  2. 左画像(ボーダースタイル)
  3. 右画像(波形スタイル)
  4. 右画像(ボーダースタイル)

これで4つのパターンの吹き出しが選べます。

吹き出しの4パターン

 
undefined
左画像(背景スタイル)
 
undefined
左画像(ボーダースタイル)
 
undefined
右画像(背景スタイル)
 
undefined
右画像(ボーダースタイル)

吹き出しのカスタマイズ方法

THORの機能で吹き出しに入れる画像、吹き出し自体の色をカスタマイズする方法を紹介します。

吹き出しカスタマイズの手順

THORでは吹き出しをカスタマイズすることが出来ます。

「外観」>「カスタマイズ」>「パーツスタイル設定」>「吹き出し設定」

パーツスタイル設定から吹き出し設定を開く図

「吹き出し設定」を開くと以下の画面になります。

ここで、「画像の選択」から好きな画像を設定します。

吹き出しに使う画像を選択する画面

吹き出しの色に関する設定も行えます。

「文字色」「背景色」「線色」それぞれクリックして、

お好みの色を指定します。

吹き出しの色に関する設定をする画面

THORの吹き出し設定は以上です。

これで吹き出しの画像の設定ができました。

 
ハテナザウルス
あれ?変だな~?本当に画像が変わっているの?

【注意】

投稿画面ではデフォルトで用意されている猫と犬の画像のままに見えます。

プレビューすると、ちゃんと画像がさし変わっています。

投稿画面とプレビューの見比べ図

このようにちゃんと表示されるので大丈夫です。

設定以外の画像を吹き出しにしたい場合

THORの「吹き出し設定」では、2種類の画像しか登録できません。

 
ハテナザウルス
2種類だけって、他にも色んな画像で吹き出しを使いたいよー。

色んな画像を使いたい方は、以下の手順で登録した画像を以外でも使えます。

  1. 「クラシックエディター」の吹き出し画像にカーソルを合わせる。
  2. 「メディアを追加」で、好きな画像を選択する。
カーソルを合わせて、メディアの追加する図

これで、自分で選んだ画像が表示されるようになります。

完成図
 
ヒラメキザウルス
以上の方法を駆使して、吹き出しを使いこなしましょう!

この記事のまとめ

この記事では、THE THORの吹き出し設定ってどうやるの?という方へ向けて、

吹き出し機能の使い方と、カスタマイズ方法を説明しました。

吹き出しの入れ方

ブロックの追加から「クラシック」を開く

「プリセットパーツ」の中にある吹き出しを選択する

吹き出し画像のカスタマイズ方法

「外観」「カスタマイズ」「パーツスタイル設定」「吹き出し設定」

吹き出しの画像や、色などを変更することが出来ます。

設定した画像以外を使う方法

画像にカーソルを合わせて「メディアの追加」で直接画像を変えることが出来ます。

当ブログで使用中のテーマ「THE THOR」はこちら