吹き出し作成くん

今回は吹き出し作成の使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/chat/

## 基本

吹き出し作成は文字通りLINEのようなチャット吹き出しブロックを作るためのものです。主に会話文で使用できます。会話のところが強調されるので会話をメインにしたい場合は使うといいでしょう。デフォルトでは以下のコードが出力されます。

<div style="border:10px solid transparent;border-left:10px solid #b1ed8b;margin:.5em 0 0;width:0;float:right;"></div><div style="width:85%;padding:2%;background-color:#b1ed8b;color:#333333;font-size:16px;float:right;line-height:1.7;">ここに吹き出しの文字を入力</div><div style="clear:both;"></div>

それぞれの意味は以下の通り。

・border:枠線

・margin:外余白

・float:回り込み

・width:横幅

・padding:内余白

・line-height：行間

・background-color:背景色

・font-size: 文字サイズ

・color: 文字色

・clear:回り込み解除

ごちゃごちゃしていますが以下のような構造になっています。

<div></div>

<div>吹き出し</div>

<div></div>

よくわからない構造かもしれませんが、最初のdivで吹き出しの▲を作ってます。そのあとに■の吹き出し文字を入れるところ。それらをfloatを使って並べています。最後のdivはclear解除用です。それがないと後続のレイアウトが崩れるので使います。

詳細設定を開くと文字サイズと色、行間を変更できます。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

よく使う色や向きの設定を作って保存しておくとよいでしょう。

## コード説明

<div style="border:10px solid transparent;border-left:10px solid #b1ed8b;width:0;"></div>

これで▲を作れます。最初のborderで三角形の底辺幅を設定。次のborder-で三角形の高さを設定します。border-bottomで上向き、border-topで下向き、border-leftで右向き、border-rightで左向きを作れます。

意味がよくわからないと思うので例と図を載せます。

・上三角

<div style="border:45px solid transparent;border-bottom:45px solid #F78181;width:0%;"></div>

・下三角

<div style="border:20px solid transparent;border-top:35px solid #B1ED8B;width:0%;"></div>

・右三角

<div style="border:55px solid transparent;border-left:35px solid #A4A4A4;width:0%;"></div>

・左三角

<div style="border:60px solid transparent;border-right:60px solid #81DAF5;width:0%;"></div>

なんとなく法則が見えてきましたでしょうか。なんでこれで三角形ができるかというと、各borderの境界の仕様を利用しています。

例えばこんな感じに、4方向を別々の色にしてみるとよくわかります。

<div style="border-top:45px solid red;border-left:45px solid green;border-right:45px solid blue;border-bottom:45px solid orange;width:45px">なかみ</div>

単体で指定すると、直線になるのですが、別々の色を指定すると境界は斜めになります。では、中身をなくすとどうなるでしょう。中のテキストを削除して、width:0にしてみます。

<div style="border-top:45px solid red;border-left:45px solid green;border-right:45px solid blue;border-bottom:45px solid orange;width:0"></div>

はい、こんな感じに4つの三角形ができました。なので、一つだけ三角を残したい場合は、それ以外を透明にすればいいわけです。

<div style="border:60px solid transparent;border-right:60px solid #81DAF5;width:0;"></div>

transparentを指定することで透明になります。後から一方向だけ色を指定することで一つの三角形を表示させています。

なかなか最初は理解するのが大変かもしれませんが、慣れてくるときっと大丈夫ですね（適当）。

ということで本文に会話吹き出しをいれたいときにお使いください。

-　-　- ✂切り取り✂ -　-　-

ということで吹き出し作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。