1. マニュアル
  2. ホームページ
  3. デザインカスタマイズ
  4. ブロックテンプレートで会話形式の吹き出しスタイルを設定する

ブロックテンプレートで会話形式の吹き出しスタイルを設定する

ブロックテンプレートで会話形式の吹き出しスタイルを設定する

ブロックテンプレートの「会話形式の吹き出し」を使うと、人と人の会話のようなやりとりを、吹き出しスタイルで表示できます。

たとえば、お客様とのやりとりを紹介したいときや、ブログの中で親しみやすく情報を伝えたいときに便利です。


このページでは、「会話形式の吹き出し」テンプレートの使い方と設定手順をご紹介します。


操作手順

  1. 本文欄中の、吹き出しスタイルテンプレートを挿入したい箇所にカーソルを置き、上部のツールバー中の[+]ボタンをクリック

 

 

  1. ブロックテンプレートが表示されるので、少し下までスクロールして、「会話形式」の中からお好みのものを選んでクリック

 

 

選択した会話形式のテンプレートが挿入されます。

やりとりが1回で終わらない場合は、必要に応じてこのテンプレートを繰り返し挿入してください。


また、「左側のみ」「右側のみ」の吹き出しを組み合わせて使うこともできます。

たとえば、一方的に話すようなシーン(お知らせや説明など)や、お客様の声をまとめて紹介したいとき、

あるいは「Before」「After」のように会話ではない流れを表現したいときにも便利です。

一方の吹き出しだけで少し長く話すような場面にも対応できます。


目的にあわせて、自由に組み合わせてお使いください。



テンプレートを挿入したら、セリフ・吹き出しの発話者・アイコン画像などを実際の内容に合わせて編集していきます。


  • セリフ・吹き出しの発話者の編集

  1. テンプレートに入力されているサンプルの文章を修正するように編集する(吹き出し内で改行を行うこともできます)

  • アイコン画像の差し替え
  1. テンプレートのアイコン画像上でマウスの左ボタンをダブルクリック


  1. [画像の差し替え]をクリック
  2. 吹き出しに設定する画像を選択

以上で、アイコン画像が差し替えられました。


このままでも良いのですが、吹き出しに添えるアイコン画像は、一般的に丸い形で表示されることが多く、その方が全体のデザインにもなじみやすくなります。

元の画像を加工する必要はなく、表示設定で角を丸くするだけで対応できますので、画像を差し替えたら、あわせてこちらの設定もおすすめです。


 

  • アイコン画像を丸く表示する設定
  1. 設定したアイコン画像上でマウスの左ボタンをダブルクリック


  1. 画像スタイルで「正円」を選択
  2. 設定画面下部の[更新]をクリック

発話者のアイコン画像が丸く切り取られて表示されるようになりました。

吹き出しスタイルを上手に活用して、より親しみやすく、伝わるページ作りにお役立てください。