【THE THOR】吹き出しの使い方とCSSを活用したカスタマイズをご紹介!

アイキャッチ画像

吹き出しを使用し、会話形式で表現するユニークなサイトをよく見かけるようになりました。

例として、下記のようなものがあります。

とある勇者
どうして吹き出しを使用するの?
はらちゃん
原因はいくつか考えられますが、1つの要因として「キーワード選定」があります。
とある勇者
確かに文章が続いているところで吹き出しが挿入されていれば、思わず注目してしまうね!

吹き出しを使用することで、他のサイトにはない独自性のあるサイトを構築することもできます。

今回はWordPressテーマ「THE THOR」で、吹き出しを挿入する方法と、コピペで簡単にできるCSSを使用した吹き出しのカスタマイズをご紹介します。







 

吹き出しの挿入方法

まずは、エディタから吹き出しを挿入する方法をご紹介します。

ビジュアルエディタの場合少しややこしいので、ぜひ参考にしてください。

 

ビジュアルエディタで吹き出しを挿入する

記事投稿画面で、ビジュアルエディタを使用している場合の吹き出し挿入方法からご紹介します。

ビジュアルエディタ

 

  • STEP 1
  • STEP 2
  • STEP 3

記事投稿画面から、「プリセットパーツ > 吹き出し」と進みます。

プリセットパーツ > 吹き出し

 

  • STEP 1
  • STEP 2
  • STEP 3

吹き出しを4パターンから選択します。

4パターンの吹き出し

 

選択すると、下記のように吹き出しが挿入されます。

吹き出しの挿入

 

  • STEP 1
  • STEP 2
  • STEP 3

テキストと名前は、そのまま直接変更しましょう。

テキストと名前の変更

 

画像の変更方法ですが、まず吹き出しアイコンの左上(右上)にカーソルを移動させます。

カーソルの移動

 

あとは記事に画像を挿入する時と同様に、メディアの追加から画像を挿入します。

画像の挿入

 

画像を挿入すると、吹き出しアイコンが変更されます。

吹き出しアイコンの変更

 

ビジュアルエディタを使用した吹き出しの挿入は以上です。

 

テキストエディタで吹き出しを挿入する

次に記事投稿画面で、テキストエディタを使用している場合の吹き出し挿入方法をご紹介します。

テキストエディタ

 

テキストエディタでは、ショートコードを使用して吹き出しを挿入します。

エディタ画面にタグは用意されていないので、下記のコードを使用してください。

「画像のURL」「Name」「テキスト」は適宜変更してください。

 

左画像(背景スタイル)は下記コードを使用します。

<div class="balloon">
<figure class="balloon__img balloon__img-left">
<div>画像のURL</div>
<figcaption class="balloon__name">Name</figcaption></figure>
<div class="balloon__text balloon__text-right">テキスト</div>
</div>

 

右画像(背景スタイル)は下記コードを使用します。

<div class="balloon">
<figure class="balloon__img balloon__img-right">
<div>画像のURL</div>
<figcaption class="balloon__name">Name</figcaption></figure>
<div class="balloon__text balloon__text-left">テキスト</div>
</div>

 

左画像(ボーダースタイル)は下記コードを使用します。

<div class="balloon balloon-boder">
<figure class="balloon__img balloon__img-left">
<div>画像のURL</div>
<figcaption class="balloon__name">Name</figcaption></figure>
<div class="balloon__text balloon__text-right">テキスト</div>
</div>

 

右画像(ボーダースタイル)は下記コードを使用します。

<div class="balloon balloon-boder">
<figure class="balloon__img balloon__img-right">
<div>画像のURL</div>
<figcaption class="balloon__name">Name</figcaption></figure>
<div class="balloon__text balloon__text-left">テキスト</div>
</div>

 

画像のURLはhref属性、またはimg属性を使用します。

/* サンプルコード */
<img src="https://○○○.com/wp-content/uploads/2019/08/comment.jpg" alt="" width="300" height="300" class="alignnone size-full wp-image-141" />

 

テキストエディタを使用した吹き出しの挿入は以上です。



ダッシュボードから吹き出しデザインを変更

ここからはダッシュボードから行うデザインの変更方法について、ご紹介します。

主に、吹き出しの色の変更や、初期値の変更を行うことができます。

 

  • STEP 1
  • STEP 2
  • STEP 3

ダッシュボードから「外観 > カスタマイズ」と進みます。

外観 > カスタマイズ

 

カスタマイズ画面から「パーツスタイル設定 > 吹き出し設定」と進みます。

パーツスタイル設定 > 吹き出し設定

 

  • STEP 1
  • STEP 2
  • STEP 3

「吹き出しデザインの設定」項目では、吹き出しのサイズ、初期値の変更を行うことができます。

初期値を設定していると、毎回名前や画像を変える必要がなくなるので、便利になります。

吹き出しデザインの設定

 

  • STEP 1
  • STEP 2
  • STEP 3

「背景吹き出しの設定」「ボーダー吹き出しの設定」項目では、色の変更を行うことができます。

文字・背景・ボーダーの色を変更することができますので、サイトカラーに合わせて変更してくださいね。

背景吹き出しの設定・ボーダー吹き出しの設定

 

以上がダッシュボードから行う吹き出しのカスタマイズとなります。



CSSで吹き出しデザインを変更

さて、ここまでダッシュボードから行う吹き出しのカスタマイズについてご紹介しましたが、少し物足りないように感じる方もおられるのではないでしょうか?

確かに、カスタマイズ項目としては、少なく感じます。

そもそも吹き出しに、それほどカスタマイズする箇所もありませんが・・・。

最後にCSSを使用し、コピペで簡単に行える吹き出しのカスタマイズについて、ご紹介します。

 

角を丸める

角を丸めて、ゆるい感じを出してみました。

角を丸めた吹き出し

.content .balloon .balloon__text {
	border-radius: 10px; /* 角の丸み */
}

 

ふわっと浮き上がらせる

影を付け、浮いているようにしてみました。

ふわっと浮き上がらせた吹き出し

.content .balloon .balloon__text {
	box-shadow: 0 0 5px 1px #a4a8d4; /* 影を付ける */
}

 

影を付ける

影を付け、立体感を出してみました。

影を付けた吹き出し

.content .balloon .balloon__text {
	box-shadow: 10px 10px 10px #a4a8d4; /* 影を付ける */
}






 

まとめ

WordPressテーマ「THE THOR」の吹き出しの挿入方法と、カスタマイズ方法をご紹介しました。

特別難しい操作があるわけではありませんが、ビジュアルエディタで画像を変更する際は、少し注意が必要です。

CSSを使用したカスタマイズも、少しではありますがご紹介しましたので、よろしければ活用ください。

はらちゃん
吹き出しを使用することで、サイトがユニークに仕上がります。

皆さんもぜひ使用してみてくださいね。

最後までお読み頂きありがとうございました。









【Amazon】1,000円分のポイントがもらえる
キャンペーンを実施中!
Amazonチャージ

Amazonキャンペーン

皆さんが普段利用しているAmazonの支払い方法を現金に変更するだけで、1,000円分のポイントがもらえるキャンペーンを、現在Amazonが実施中です。

1,000円分のポイントに加え、最大2.5%の還元を受けられるサービスも同時に適用可能!

クレジットカードよりも遥かに還元率の良い購入方法で、お得にAmazonでお買い物しませんか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です