【THE THOR(ザ・トール)】吹き出し画像の変更方法と使い方

THE THOR(ザ・トール)にはデフォルトで会話風の吹き出し機能が備わっています。

しかし、2019年3月現在では吹き出し画像と画像の名前を設定で変更することができません。

 

バージョン1.4.0より画像の変更が可能になりました。
記事編集画面では変わっていないように表示されますが、プレビューで確認すると正常に表示されています。

この記事の内容は必要なくなったかもしれませんが、別に機能しなくなった方法ではないので、こういう方法もあるよって意味で残しておきますね。

 

画像の変更方法は公式マニュアルに記載されていますが、ちょっと分かりにくい書き方でサポートフォーラムでも画像の変更方法について質問があがっています。

なので、今回は吹き出し画像の変更方法と簡単な使い方の説明をしたいと思います。

ゆず
どうせなら、オリジナルのキャラクターにしたいよね!
ネコ先生
ネコ先生
それでは吹き出しの設定方法を説明しましょう!

吹き出し機能の解説

吹き出し機能はデフォルトで画像が入っているので最初から使えます。でも使いたい画像があるのなら最初に設定しておくと楽ですよ。

吹き出し機能の設定方法

まずは吹き出し画像の登録と枠線などの色を設定していきます。

【外観】→【カスタマイズ】から【パーツスタイル設定[THE]】を選択します。

カスタマイズ画面選択画面

次は【吹き出し設定(個別ページ用)】を選択します。

吹き出し設定を選択

画像サイズ・画像・名前を設定する箇所があります。

画像サイズは【ノーマル(default】と【ビック】の2種類あり、お好みで変更してください。

 

吹き出し設定画面(画像)

吹き出しに設定できる画像は2つだけですが、普通にブログ運営するには十分でしょう。

 
ネコ先生
記事ごとに変更したい場合はあとで説明しますね。
画像サイズは極端に小さかったり大きかったりしなければ、自動的にサイズ調整されます。
ただ自動で円形にトリミングされますので、画像によっては思ったようにアイコンが表示されないかもしれません。
画像編集ソフトなどを使ってあらかじめ画像データを用意した方が良いでしょう。
次は画像設定の下に吹き出しの文字色やセリフの枠の色を設定します。
吹き出し設定画面(色設定)
吹き出しプレビュー

吹き出し機能の使い方

吹き出し機能を使う場合、エディタはクラシックタイプになります。ブロックエディタで使用する場合はクラシックブロックを使いましょう。

 
ゆず
今回は旧エディタを使って解説します。
投稿編集画面(ビジュアル)のツールバー「プリセットパーツ」⇒「吹き出し」から任意のパーツを選択します。

プリセットパーツから吹き出しパーツを選択

あとはコメント部分を消して任意のセリフを入れましょう。

コメントを編集

吹き出し画像の変更方法

吹き出し画像を変更する前に、差し替える画像を用意しておきましょう。用意する画像は、極端に小さくなければ差し替えた際に自動で調整されるので問題ありません。

画像を用意したら、まずは通常通り吹き出しパーツを挿入しましょう。

 

デフォルトの「左画像(ボーダースタイル)」を表示させました。

デフォルト左ボーダー

次に画像を変更します。

赤丸の箇所をクリックしてカーソルを移動させましょう。

カーソルの位置を移動

次に「メディアの追加」ボタンをクリックして差し替えたい画像を選択して「投稿に挿入」ボタンをクリックします。

メディアの追加をクリック

無事、画像が変更されれば成功です。

画像変更後

もし、画像が変更されない場合はキャッシュが残っている可能性があります。
キャッシュを削除して再読み込みをしてみてください。

吹き出し画像の名前を変更する

無事、画像を差し替えることができれば、次は名前を変更させましょう。

今のままでは「Name」と書かれているだけなので、あまり具合が良くありません。

デフォルト状態

赤枠の「Name」を任意の名前に変更しましょう。

ビジュアルエディタでの変更

ビジュアルモードでの変更は、「Name」の箇所にカーソルを移動させて直接編集します。

テキストエディタでの変更

画像を差し替えた状態で投稿編集画面をテキストエディタに変更します。

赤枠の箇所を探して「~”>Name</~」の部分に任意の名前に変更します。

名前を変更

試しに「ポチ」としてみましょう。

「~”>Name</~」を「~”>ポチ</~」に変更します。

名前変更

変更したら、投稿編集画面をビジュアルエディタで見てみましょう。

名前変更後

名前が変更されましたね。

右側の吹き出しも同じように赤丸の箇所にカーソルを移動させて画像を変更しましょう。

赤丸の位置にカーソルを移動して変更する

吹き出しパーツの利用上の注意点

プラグインなしで会話風吹き出し機能が使えるTHE THOR(ザ・トール)ですが、利用する際にいくつか注意点があります。

他の画像や名前を固定することはできない

プリセットパーツから選択する吹き出しパーツの画像や名前は変更した状態で固定することができません。

吹き出しパーツを使うたびにその都度画像を変更したり、名前を変更しなければいけません。

使う頻度が少なかったり、キャラクターに拘りがない人なら問題ないかもですが、今の所ちょっと面倒な仕様ですね。

今後、改善されることを期待しましょう。

1. コメント部分の変更方法

吹き出しパーツを挿入し、画像や名前を変更したらコメント部分にテキストを入力することになります。

ここで注意して欲しいのが、元から入っている吹き出し内の「コメント」というテキストです。

コメント部分の変更方法

原因は不明ですが新しいテキストを入力する前に、この「コメント」というテキストを削除してしまうと吹き出しの線が消えてしまう時がたまにあります。

また「コメント」の4文字以上にbackspaceキーやdeleteキーを押してしますと、これも吹き出しの線が消えてしまいます。

間違えて消してしまっても元に戻すのは簡単なのですが、少しでも面倒をかけたくなければ「コメント」のテキストは新しいテキストを入力した後で削除した方が良いでしょう。

ちなみに、吹き出し内での改行はshiftキーを押しながらreturnキーで改行になります。

returnキーだけ押すと吹き出しからカーソルが出てしまうので注意してください。

吹き出し機能の便利な使い方

吹き出しパーツを使うたびに画像を差し替えたり名前を変更したりするのは結構面倒ですよね。

テーマがバージョンアップされれば、そのうち改善されるかもしれませんが、それを待っているのも面倒なことでしょう。

そこで改善されるまでの間、面倒な作業を短縮できる方法を説明したいと思います。

その方法とは、「AddQuicktag」というWordPressプラグインを使う方法です。

有名なプラグインなので知っている人は多いと思いますが、このプラグインを使って簡単に独自キャラを使った吹き出しを入れる方法を説明します。

「AddQuicktag」の使い方を知らない人は下のサイトの記事を参考にしてください。

このプラグインは、タグなどを登録して簡単に呼び出すことができるプラグインです。

なので、吹き出しの画像や名前を変更したコードをプラグインに登録してしまいます。

投稿編集画面で吹き出しを挿入して、任意の画像や名前を差し替えます。

変更した吹き出し

その状態でテキストエディタに切り替えます。

ちょっと見難いかもですが、上半分が「ポチ」のコードで、赤枠部分をAddQuicktagの「開始タグ」下の小さい青枠部分を「終了タグ」に登録します。

吹き出し変更後テキスト

同様に下半分が「ゆず」のコードで、同じようにAddQuicktagに登録します。

吹き出し変更後テキスト2

AddQuicktagの登録画面です。ボタン名などは任意でお願いします。

登録画面

あとは投稿編集画面のツールバーにあるAddQuicktagから選択するだけで、簡単に任意の画像や名前の吹き出しが呼び出せます。

是非、活用してみてくださいね。

バージョンアップにより画像の変更が可能になりましたが、2つまでのキャラクターしか登録できないのは変わりません。
3つ以上のキャラクターを設定する場合にこの方法が役立つでしょう。

まとめ

今回はTHE THOR(ザ・トール)の吹き出し機能のカスタマイズ方法を説明しました。

プラグインなしで会話風の吹き出しが使えるので、是非活用してオリジナリティのあるサイトを作成してくださいね。

⇒⇒THE THOR(ザ・トール)のレビュー&特典付き購入はこちらから

メルマガ登録バナー1

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