ブログやってますか？最近ブログで目にする吹き出し風の表現のネタです。複数の人物を登場させて会話調で内容を記載したり、読み手へ語りかけるような場合に使われているブログを見かけますよね。
吹き出し風スタイル
私のブログでも、Amazon Echoの記事を作る時に、私も同じ様な手法を取っていましたが、吹き出し風のスタイルまではしていなかったので、次に挑戦する際の下準備で吹き出し（風）のスタイルシートを作ってみることにします。
Alexa関連の記事では、こんな感じで話しかける雰囲気を出していたのですが、まだ物足りない感があります。
Alexa！今日の天気は？
そこで、もう少し吹き出し調のスタイルを追加して、話しかけている感が出るような感じに仕上げてみます。
完成状態を先に
とりあえす、先に完成形を表示します。LINEのトーク風を目指して作ってみました。（あんまり似てないかも）
今回は、１つのクラス（class）でスタイル設定を行いたかったので、疑似要素を使っています。そのため対応ブラウザやスマホでは正しく表示されないかもしれません。
こんな感じでHTMLを挿入するだけで吹き出しになります。
<div class="talk-balloon">Alexa！今日の天気は？</div>
作ったCSSはこんな感じです。
.talk-balloon {
position: relative;
display: inline-block;
padding: 1.6em 1.6em;
margin: 1.6em 0 1.6em 140px;
min-height:120px;
min-width: 320px;
max-width: 100%;
color: #000000;
background-color: #00ff00;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.talk-balloon:before{
content: "";
position: absolute;
background-image:url(https://blog.janjan.net/wp/wp-content/uploads/2017/12/avator-2017-1-winter-160.jpg);
background-repeat:no-repeat;
height:120px;
width:120px;
top:0;
left:-140px;
border-radius: 60px;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
}
.talk-balloon:after{
content: "";
position: absolute;
top: 50%;
left: -32px;
margin-top: -16px;
border: 16px solid transparent;
border-right: 16px solid #00ff00;
}
「background-color」の辺りを変更すると、吹き出しの色が変更でき、「border-radius」の数字を変更すると、画像や吹き出しの角丸度合いが変わります。位置関係などは固定値を使ってしまっているのでレスポンシブルなデザインの場合には多少ズレる可能性がありますが、長いセリフを書かない限り私のブログテーマではスマホやタブレットでの表示でも上手く表示してくれてました。
疑似クラスは、理解するのに少し難解ですが使えるようになると、CSSで出来ることがかなり増えるので使う価値は高いです。
スポンサーリンク
吹き出し的な表現が使えるようになると、こんな感じで締めくくれるようになるので、ブログを書くのが楽しくなるかもしれません。
