心の声・思考中を表現する吹き出しを作る

SIRIUS（シリウス）に用意されている会話形式の吹き出し

SIRIUS（シリウス）には、いろいろな吹き出しや口コミ表現が用意されています。

口コミ表現

SIRIUS（シリウス）は、簡単にいろいろな表現ができるサイトが作れます。

SIRIUS（シリウス）は、とても使いやすく、テンプレートを編集・作成できるためいろいろなレイアウトができます。

会話表現（吹き出し）

吹き出しの種類だけでも９種類
もちろん吹き出しの顔は作成したものが自由に使えるだけでなく、顔画像を円にするかどうかも選択できます。
さらにその吹き出しを角丸にするかしないか、横幅を自動調整するかしないかが選べます。

本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。

吹き出しの方向も、右・左・上・下といったいろいろな表現ができます。

本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。本日は、晴天なり。

もちろん、吹き出しの中の文字の大きさや色、マーカーなども自由自在に変化させられ、会話文の長さに合わせて自動改行してくれます。

心の声・思考中を表現する吹き出し

よく『心の声・思考中』を表現する吹き出しをみかけることがあると思いますが、ちょうど雲形のような吹き出しになっています。
漫画とかでもよく出てくると思いますが、こんな感じの吹き出しです。

SIRIUS（シリウス）には、デフォルトで『心の声・思考中』を表現する吹き出しは、用意されていません。
しかし、CSSを編集して追加するだけで、作成することができます。

こんな感じのものを作ることができます。

心の声・思考中を表現する吹き出しを作る。

心の声・思考中を表現する吹き出しを作る。心の声・思考中を表現する吹き出しを作る。心の声・思考中を表現する吹き出しを作る。

もし、この吹き出しをSIRIUS（シリウス）で使おうとするならば、CSSファイルの中の『commonstyles.css』ファイルに、CSSの記載を追加して、それを反映したHTMLを記載しなければなりません。

『心の声・思考中』の吹き出し

HTML

<img src="画像ファイルのURL" style="width:180px;" align="left" />
<div class="bln01">
心の声・思考中を表現する吹き出しを作る。
</div>

<img src="画像ファイルのURL" style="width:180px;" align="right" />
<div class="bln02">
心の声・思考中を表現する吹き出しを作る。心の声・思考中を表現する吹き出しを作る。心の声・思考中を表現する吹き出しを作る。
</div>

CSS

/*考え中吹き出し */

.bln01 {
position: relative;
margin: 2em 0 2em 180px;
padding: 15px;
background: #d5c2d5;
border-radius: 30px;
}
.bln01:before{
content: "";
position: absolute;
left: -38px;
width: 13px;
height: 12px;
top: 0;
background: #d5c2d5;
border-radius: 50%;
}
.bln01:after{
content: "";
position: absolute;
left: -20px;
width: 20px;
height: 18px;
top: -3px;
background: #d5c2d5;
border-radius: 50%;
}
.bln01 p {
margin: 0;
padding: 0;
}

.bln02 {
position: relative;
margin: 2em 180px 2em 0;
padding: 15px;
background: #d5c2d5;
border-radius: 30px;
}
.bln02:before{
content: "";
position: absolute;
right: -38px;
width: 13px;
height: 12px;
top: 0;
background: #d5c2d5;
border-radius: 50%;
}
.bln02:after{
content: "";
position: absolute;
right: -20px;
width: 20px;
height: 18px;
top: -3px;
background: #d5c2d5;
border-radius: 50%;
}
.bln02 p {
margin: 0;
padding: 0;
}

SIRIUS（シリウス）でcommonstyles.css にcssを追加する

SIRIUS（シリウス）でcommonstyles.css にcssを追加するには、

SIRIUS（シリウス）で【CSS】を編集する場合は、『テンプレート』タグの中の『スタイルシート編集（Ctrl+W）』をクリックすることで、CSS（スタイルシート）が編集できるようになっています。
編集できるスタイルシートの中から、『commonstyles.css』を選択して、
前項の　「/*考え中吹き出し */」　の部分のCSSを追記すればOKです。

『ＳＩＲＩＵＳ』の詳細は、コチラ