【THE THOR】吹き出しパーツの画像変更・デザインカスタマイズ手順まとめ

こんにちは!ZIGです。

ここではワードプレステーマ「THE THOR(ザ・トール)」の吹き出しパーツの画像編集方法やデザインカスタマイズ手順をまとめています。

実は私、「THE THOR(ザ・トール)」の吹き出しパーツを初めて使ったとき吹き出しパーツの画像が変更できねえええええええ!!とかなり手間取りました。分かってしまえば非常に簡単に編集出来たんですけど(笑

そんな経験も踏まえて手順をまとめましたので、THE THORをお持ちの方は参考にどうぞ。

吹き出しパーツの画像を変更する手順

「THE THOR(ザ・トール)」の吹き出しパーツは「背景スタイル」「ボーダースタイル」の2種類があらかじめ用意されています。

以下はデフォルト状態の吹き出しパーツですね。

吹き出しパーツ

画像のように、あらかじめ画像も挿入されています。が・・・

もちろん実際に使用する場合は画像を変更しますよね。しかし・・・この画像の変更方法が最初よく分かりませんでした(汗

 

管理画面のどこかに設定項目があるのか?と思ったのですが見当たりません。

で、いろいろ弄ってたら分かりました。この画像、エディタ上で簡単に編集出来ます。

 

吹き出しパーツの画像の変更手順(ビジュアルエディタ)

デフォルトの画像を変更するには、まず吹き出しパーツの画像部分にカーソルを合わせます。

吹き出しパーツの編集

 

次に「メディアを追加」をクリック。

メディアを追加

 

メディアライブラリから画像を選択するか、新たにファイルをアップロードします。

画像を選択

今回はあらかじめアップロードしておいた上記の画像を使います(笑

 

画像を挿入すると、吹き出しパーツの画像が変更されました。

吹き出しパーツ

ちなみに画像下の「Name」は普通のテキストなので簡単に編集出来ます。

 

吹き出しパーツの画像の変更手順(テキストエディタ)

テキストエディタの場合は以下の赤枠内に画像を挿入すればOK。

吹き出しパーツのHTML

<div>ここに画像を挿入</div>

・・・ですね。

 

どちらの方法でも吹き出しパーツの画像は変更可能です。

 

吹き出しパーツのデザインカスタマイズ手順

「THE THOR(ザ・トール)」の吹き出しパーツはデザインもカスタマイズできます。

手順は以下の通り。

 

まずはワードプレスの管理画面「外観」⇒「カスタマイズ」をクリック。

外観カスタマイズ

 

カスタマイズメニューの「パーツスタイル設定」をクリックします。

パーツスタイル設定

 

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

吹き出し設定

ここで吹き出しのデザインをカスタマイズできます。

 

背景吹き出しの設定

背景吹き出しの設定

「背景吹き出しの設定」は「背景スタイル」の吹き出しのデザインを変更出来ます。

 

先ほど画像を変更したパーツですね。

吹き出しパーツ

この吹き出しの文字色と、吹き出しの背景色が変更出来ます。

 

例えば文字色を白(#ffffff)、背景色を紫系(#8224e3)に変更してみると・・・

背景吹き出しのデザイン編集

 

このように見た目がかなり変わります。

背景スタイル吹き出しパーツ

 

ボーダー吹き出しの設定

ボーダー吹き出しの設定

「ボーダー吹き出しの設定」では「ボーダースタイル」の吹き出しデザインを変更出来ます。

 

こちらの吹き出しパーツですね。

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

ボーダースタイルは枠線があるので、文字色・背景色・枠線の3つが編集できます。

このあたりは使用しているスタイルやサイトのデザインに合わせて変更すると良いでしょう。

 

吹き出しデザイン変更に関する注意点

吹き出しデザインのカスタマイズはスタイルを変更をした後で行いましょう!

吹き出しのデザイン設定は新たなスタイルをインポートするとすべてリセットされてしまいます。

これは他のカスタマイズ項目と同様ですね。

 

デフォルトスタイルのままデザインを弄り、その後にスタイルの変更を行うとすべての設定がデフォルト状態に戻ってしまうので注意してください。

 

まとめ

というわけでワードプレステーマ「THE THOR(ザ・トール)」の吹き出しパーツの画像編集およびカスタマイズ手順をまとめてみました。

吹き出しパーツは使用頻度の高いパーツなので、サイトに合ったデザインにして活用したいところですね。

とりあえず、スタイル変更前にカスタマイズしないよう注意しましょう!