当ブログで今後使うことがあるかどうか分かりませんが、CSSのみでそれを実現してみることにしました。
そんなことを言っても、君に出来るの？
いや、出来ない。
じゃあ、どうする？
人が作ったものを使わせてもらう。
どこにある？
コピペで実装できちゃう！CSSで書かれた吹き出しまとめから、自分で気に入った物を選んでみた。
選んだのは、これ。
全部オリジナルのまま？
いや、違う。オリジナルでは、こんな感じ。つまり、２行以上になったときに出っ張りの三角の部分が上下中央に来る。出っ張りの部分を上部に持っていった。
それから吹きだし内の背景色も濃い。どうせだから、LINEと全く同じ色にしてみた。
どんな変更をしたの？
/*******************************
* 右からの吹き出し オリジナル
********************************/
.right_balloon {
position: relative;
background: #85e249;
border: 1px solid #777;
margin: 10px;
padding: 10px;
border-radius: 15px;
margin-left: 20%;
clear: both;
max-width: 500px;
float: right;
}
.right_balloon:after,
.right_balloon:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.right_balloon:after {
border-color: rgba(133, 226, 73, 0);
border-left-color: #85e249;
border-width: 7px;
margin-top: -7px;
}
.right_balloon:before {
border-color: rgba(119, 119, 119, 0);
border-left-color: #777;
border-width: 8px;
margin-top: -8px;
これを次のように変更した。
/*******************************
* 右からの吹き出し
********************************/
.right_balloon {
position: relative;
background: #b2ed8b;
border: 1px solid #777;
margin: 10px;
padding: 12px;
border-radius: 15px;
margin-left: 20%;
clear: both;
max-width: 500px;
float: right;
}
.right_balloon:after,
.right_balloon:before {
left: 100%;
top: 22px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.right_balloon:after {
border-color: rgba(133, 226, 73, 0);
border-left-color: #b2ed8b;
border-width: 7px;
margin-top: -7px;
}
.right_balloon:before {
border-color: rgba(119, 119, 119, 0);
border-left-color: #777;
border-width: 8px;
margin-top: -8px;
}
それだけ？
そう。もちろん、上で述べたのは右からの吹き出しなので、左側も同様に書き換える。色は白のままなので、top: 50%;の書き換えだけでよい。
使い方は簡単？
簡単だよ。
CSSファイルをアップロードして、あとはhead内でリンク
<link rel="stylesheet" type="text/css" href="http://qp.jpn.org/css/baloon.css" />
をしておきさえすれば、HTMLファイルで
<p class="left_balloon">左のセリフ</p>
<p class="right_balloon">右のセリフ</p>
と記述すれば良い。
注意することはある？
対話の最後に、
<br class="clear_balloon"/>
というのを入れないと、その後の文字が上に上がってきてしまうことがある。実際、この対話の後にもそれを入れないと、レイアウトが崩れることを確認したので、入れてある。
せっかく用意したのだから、使うチャンスがあるといいね。
うん。
※この対話表示は、パソコンのみで有効です。
