吹き出しを追加する

吹き出し機能を利用する

SIRIUS2では、口コミなどを表示させるのに便利な「吹き出し機能」が搭載されています。
HTMLの記述が分からなくても、上図のような会話形式の吹き出しを簡単に作成することが可能です。

このページの目次

文字装飾メニューの「ボックス」→「吹き出しの作成」ボタンをクリックする

「ボックス」→「吹き出し」の作成ボタンをクリックすると、吹き出しの作成画面が表示されます。

吹き出しの種類を選択する

下図が吹き出しの画面となります。まずは「吹き出しの種類」の項目で、デザインを選択してみましょう。

種類	吹出し全体のデザインを指定します。 (デザインの一覧を確認したい場合は、こちらのページをご確認ください。)
パターン	吹出しの枠線のデザインを指定します。 (パターンの一覧を確認したい場合は、こちらのページをご確認ください。)
カラー	吹出しのカラーを指定します。 (カラーの一覧を確認したい場合は、こちらのページをご確認ください)
向き	吹き出しの向きを選択します。たとえば右側に画像を置きたい場合「右向き」を選択することで対応ができます。
枠を角丸で表示	デフォルトでは、吹き出しの角は丸めて表示されるようになっていますが、こちらのチェックボックスを外すと、四角形で表示されます。
横幅を自動調整	テキストの長さに合わせて、吹き出しの横幅を自動調整します。 Lineやチャット風のデザインになりますので、会話形式でコンテンツを作りたい場合に便利です。

吹き出し画像を選択する

次に吹き出しに表示する画像を指定します。
キャラクター画像や人物写真などを指定することで、会話風の吹き出しにすることができます。

キャラクター	吹出しの画像として表示するキャラクター画像を指定します。会話形式の吹き出しを挿入する場合、キャラクターを設定することで画像を簡単に選択することができます。キャラクター画像の追加方法についてはこちらに記載していますのでご確認ください。
画像の選択	吹き出し内で表示する画像を選択します。この項目の右側にある画像ボタンをクリックすると画像管理画面が表示されますので、そちらから画像を選択してください。
画像下テキスト	吹き出しの画像の下に表示するテキストを指定します。たとえば人物の名前や年齢などを表示させたい場合は、こちらで指定してください。
画像を円で表示する	通常、吹き出しの画像は四角形で表示されますが、この項目をチェックすると円形で表示させることができます。人物写真などを使って、チャット風のデザインにしたい場合にご利用ください。

必要に応じて詳細設定を行う(オプション)

吹き出しの細かな調整は、「詳細設定」タブから行うことができます。

フォントサイズ	吹き出し内の文字サイズを調整します。
吹き出し上部の余白	吹き出し全体の位置を調整するのに利用します。指定した数値分だけ、吹き出し上部に余白が作られるため、画像と吹き出しの位置を調整するすることができます。
画像の横幅の最大値	吹き出しの画像の最大値を指定します。たとえば100pxに指定している場合、画像の横幅の大きさは最大100pxとなります。また、画像のサイズはパーセントで指定することも可能です。デバイスに応じて画像サイズを可変させたい場合にも利用できます。
吹き出しの縦幅の上限	吹き出しの縦幅の上限を指定します。たとえば60pxに指定されている場合、最大60pxの縦幅の吹き出しとなり、それを超えるテキストはスクロールで表示させることができます。