【THE THOR】吹き出しの設定・変更・入れ替え方法は?

(この記事は、2021年10月13日に更新しました。)

困った男の子

THE THORを使い始めた人

「THE THORの吹き出し設定方法が知りたい。Cocoonだったら迷わずできたのに、なんだかよく分からない!初心者でも分かるように解説してほしい。」

この記事では、この悩みに寄り添い、やさしく解説します^^

※わたし自身がめっちゃ苦労したポイントなので、よ~く分かります!

ぜひ参考にして下さい!

本記事の内容

  • THETHORの吹き出し設定手順(設定、挿入、変更、入れ替え)
  • THE THORの吹き出しの削除手順

【THE THOR】吹き出し設定

吹き出し設定の全体像

overview_unsplash

吹き出し設定の全体像

  1. カスタマイズ画面の設定
  2. 記事に吹き出しを入れる
  3. 吹き出し画像を変更する

吹き出し画像の変更には「画像の上乗せ」と「画像の入れ替え」の2パターンが存在します。

①カスタマイズ画面の設定

まずはWordPressのカスタマイズ設定からはじめましょう!

カスタマイズ画面の設定手順

  1. 外観➡カスタマイズ➡パーツスタイル設定[THE]➡吹き出し設定(個別ページ用)
  2. 左右の吹き出しの画像を選択する
  3. 名前、文字色・背景色・線の色を設定する

②記事に吹き出しを入れる

つぎに、実際に記事の中に吹き出しを入れていきます。

記事に吹き出しを入れる手順

  1. クラシックエディターで記事を開く
    ※ブロックエディターでも、クラシックのブロックを入れれば使える
  2. プリセットパーツ➡吹き出し➡左画像か右画像を選択
    ※背景スタイルは線なし、ボーダースタイルは線あり

 吹き出しを使いたい場合は、クラシックエディターを強くオススメします。

ブロックエディターでは手間が増えるからです。

たとえば、ブロックエディターで吹き出しを入れた場合、設定した名前(例:はやぶさ)が表示されず、
下の吹き出しのように『undefined』と表示されます。

毎回手入力で入れ直すのは時間の無駄ですよね。

 
undefined
左画像背景スタイル

しかも、吹き出し用に設定した画像が表示されず、デフォルトの動物の写真が表示されます。プレビューで見るとちゃんと反映されているのですが、個人的にはかなり残念なポイントです。

③吹き出し画像を変更する

つぎに、吹き出し画像を変更していきます。

吹き出し画像の変更方法は2種類あります。

  1. 画像の上乗せ
  2. 画像の入れ替え

まずは画像の上乗せ方法です。

吹き出し画像の上乗せ手順

  1. 下図の位置にカーソルを持ってきてクリック
  2. 『メディアを追加』で好きな画像を選択
THE_THOR_吹き出し

<注意>
この場合、吹き出し画像は入れ替わるのではなく、単に『元の画像の上に乗せただけ』です。 背景透過型の画像を上乗せする場合、上下の画像が合わさる形になります。

つぎに、画像の入れ替え方法です。

吹き出し画像の入れ替え手順

  1. 下図の位置(名前の一番左)にカーソルを持ってきてクリック
  2. Backspaceで吹き出し画像を消す
  3. 『メディアを追加』で好きな画像を選択
THE THOR 吹き出し設定
▲カーソルを名前の一番左へ
THE THOR 吹き出し設定
▲吹き出し画像が消えた状態
THE THOR 吹き出し設定
▲メディアを追加すれば、完成!

【THE THOR】吹き出しの削除手順

eraser

THE THORの吹き出しは設定時もクセがありましたが、
削除するときもクセがあるので注意が必要です。

①変更した画像を削除する

まずは、吹き出し画像の削除方法です。

変更した画像の削除方法

  1. 画像の上でクリック
  2. 画像が選択されている状態でDeleteキーを押す

②吹き出しそのものを削除する

つぎに、吹き出しそのもの(画像と吹き出しコメント)の削除方法です。

吹き出しそのものの削除方法

  1. ブロックエディターの場合は、ブロックごと削除するのがラク
    ※一つのブロックに複数の吹き出しを設定している場合、全て削除される
  2. クラシックエディターの場合は、吹き出しのコメントの終点にカーソルを合わせ、Backspaceキーで消していく。
吹き出し

<ここがNG>
吹き出し画像とコメント部分をドラッグして、全選択した状態でDeleteキーを使っても削除できるが、その場合中途半端に消えない部分が残ったりする。正直、使い勝手が悪い。

まとめ:THE THORの吹き出しはちょっと使いにくい

THE THORの吹き出し設定の全体像、設定の仕方、削除の仕方を解説しました。

ちょっとクセがあって使いにくい部分はありますが、やり方さえ覚えてしまえば、スムーズに作業できますよね。

もっとスマートなやり方を見つけたら、随時更新していきます!

the thor 吹き出し設定
フォローはこちらから