前回、HTMLとCSSで作る吹き出しデザインをご紹介しました。今回も、前回に引き続き[吹き出しデザイン]をご紹介します。
最近、ブログでもLINEなどのメッセージにあるようなチャット風の吹き出しデザインがたくさんみられます。吹き出しと画像をセットで表示することで、一気に雰囲気が変わります。
今回は、画像付きの吹き出しデザインと、チャット風の吹き出しデザインを紹介するよ！
画像付き吹き出しデザインの作り方
画像をつけて吹き出しを作ると、吹き出しだけよりもインパクトがでます。
画像に合わせて、言葉の使い方を変えたり吹き出しの色を変えたりすることでサイトの印象がグッと変わります。
【HTML】
<div class="balloon01">
<div class="icon01><img src="入れたい画像のパス"></div>
<div class="chat01">
<div class="talk01">
今日もHAPPYな1日になりますように♬ //文章は自由に変更してください
</div>
</div>
</div>
【CSS】
/* 全体の設定 */
.balloon01 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
/* アイコンの場所 */
.balloon01 .icon01 {
float: left;
margin-right: -90px;
width: 80px; //アイコンの大きさ
}
/* アイコン画像の作成 */
.balloon01 .icon01 img{
width: 100%;
height: auto;
border-radius: 50%;
border: solid 2px #b8860b; //アイコンの枠の太さ、カラーはここで変更
}
.balloon01 .chat01 {
width: 100%;
}
/* 吹き出しの入力部分の作成 */
.talk01 {
display: inline-block; //この部分を外すと横幅いっぱいになります
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px; //吹き出しの丸み具合を変更
background: #fffacd; //吹き出しのカラーはここで変更
}
/* 三角部分の作成 */
.talk01:after {
content: "";
display: inline-block;
position: absolute;
top: 18px; //三角の位置(高さ)を変更
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #fffacd; //三角部分のカラーはここで変更
}
.talk01 p {
margin: 0;
padding: 0;
}
上記のCSSから//の部分を変更すると自由に色などのデザインをカスタマイズできるよ！
吹き出し部分のカラーと三角部分のカラーを同じ色にすることで、一体感がでるよ。
WordPressの場合は<img>のところで「メディアを追加」してね。
チャット風吹き出しデザインの作り方
チャット風にすることで、一人で書いている文章も2人のやりとりのように見せることができ、読んでいる人に伝わりやすくなります。
☆シンプル同色のチャット風
【HTML】
<!-- 左の吹き出し -->
<div class="balloon-chat left">
<figure class="icon-img"><img src="画像のパス" alt="代替えテキスト" >
<figcaption class="icon-name">アイコンの名前</figcaption>
</figure>
<div class="chatting">
<p class="chat-text">テキストを入力</p>
</div>
</div>
<!-- 右の吹き出し -->
<div class="balloon-chat right">
<figure class="icon-img"><img src="画像のパス" alt="代替えテキスト" >
<figcaption class="icon-name">アイコンの名前</figcaption>
</figure>
<div class="chatting">
<p class="chat-text">テキストを入力<br>（改行）
テキストを入力</p>
</div>
</div>
【CSS】
.balloon-chat {
display: flex;
flex-wrap: wrap;
}
/* 左の吹き出し */
.balloon-chat.left {
flex-direction: row; /* 左から右に並べる */
}
/* 右の吹き出し */
.balloon-chat.right {
flex-direction: row-reverse; /* 右から左に並べる */
}
/* 吹き出しの入力部分の作成 */
.chatting {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */
margin: 10px 20px;
padding: 10px 20px;
background: #ccffcc; //吹き出しのカラーはここで変更
text-align: left; //テキストの位置はここで変更
border-radius: 12px; //吹き出しの丸み具合を変更
}
/* 吹き出しの三角部分の作成 */
.chatting::after {
content: "";
border: 15px solid transparent;
border-top-color: #ccffcc; //カラーはここで変更（吹き出し部分と合わせる）
position: absolute;
top: 10px; //三角部分の高さを変更
}
.left .chatting::after {
left: -15px; //左側の三角部分の位置を変更
}
.right .chatting::after {
right: -15px; //右側の三角部分の位置を変更
}
/* アイコンの作成 */
.balloon-chat figure img {
border-radius: 50%; //丸の設定
border: 2px solid #333300; //アイコンの枠のカラーと太さはここで変更
margin: 0;
}
/* アイコンの大きさ */
.icon-img {
width: 80px;
height: 80px;
}
/* アイコンの名前の設定 */
.icon-name {
width: 80px; /* アイコンの大きさと合わせる */
font-size: 12px;
text-align: center;
}
display: flex;を使って並べてるよ。flex-directionで並べ方を変えてるんだ！
画像にfigure を使うと簡単に名前を入れることができるよ。
☆色違いチャット風
【HTML】
<!-- 左の吹き出し -->
<div class="balloon-color left">
<figure class="icon-color"><img src="画像のパス" alt="代替えテキスト" >
<figcaption class="name-color">アイコンの名前</figcaption>
</figure>
<div class="chatting-color">
<p class="text-color">テキストを入力</p>
</div>
</div>
<!-- 右の吹き出し -->
<div class="balloon-color right">
<figure class="icon-color"><img src="画像のパス" alt="代替えテキスト" >
<figcaption class="name-color">アイコンの名前</figcaption>
</figure>
<div class="chatting-color">
<p class="text-color">テキストを入力</p>
</div>
</div>
【CSS】
.balloon-color {
display: flex;
flex-wrap: wrap;
}
/* 左の吹き出し */
.balloon-color.left {
flex-direction: row; /* 左から右に並べる */
}
.left .chatting-color {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */
margin: 15px 20px 20px;
padding: 10px 20px;
background: #696969; //（◯）カラー変更はこちら
text-align: left; //テキスト左揃え
border-radius: 15px; //枠の丸みの設定はこちら
}
.left .chatting-color::after {
content: "";
border: 15px solid transparent;
border-top-color: #696969; //（◯）とカラーを合わせる
position: absolute;
top: 15px; //三角部分の高さ
left: -15px; //三角部分の位置
}
/* 右の吹き出し */
.balloon-color.right {
flex-direction: row-reverse; /* 右から左に並べる */
}
.right .chatting-color {
position: relative;
display: inline-block; /* 吹き出しが文字幅に合わせます */
margin: 15px 20px 20px;
padding: 10px 20px;
background: #2f4f4f; //（△）カラー変更はこちら
text-align: left; //テキストの位置変更はこちら
border-radius: 15px; //枠の丸みの設定はこちら
}
.right .chatting-color::after {
content: "";
border: 15px solid transparent;
border-top-color: #2f4f4f; //（△）とカラーを合わせる
position: absolute;
top: 15px; //三角部分の高さ
right: -15px; //三角部分の位置
}
/* アイコンの作成 */
.balloon-color figure img {
border-radius: 0; /* 画像を丸くしたいときに利用 */
margin: 0;
}
/* アイコンの大きさ */
.icon-color {
width: 100px;
height: 100px;
}
/* アイコンの名前 */
.name-color {
width: 100px; /* アイコンの大きさと合わせる */
font-size: 12px;
text-align: center; /* 名前は真ん中に */
}
.text-color {
color: #fff; // テキストのカラー変更はこちら
font-size: 16px; //テキストサイズの変更はこちら（なければデフォルトのサイズになります）
}
アイコンは、pngの背景透過画像を入れるとアイコンがそのまま表示されるよ。
アイコンの作成に[border: 2px solid #color; ] を入れると枠ができるよ。
長い会話にしたいときは、右と左の吹き出しを交互に使ってね。
まとめ
今回は、画像付きのチャット風吹き出しデザインをご紹介しました。
チャット風にすることで、読みやすくなったり、説得力が増したりします。
文章がズラーっと並んでるより、画像やチャットで親しみも湧きますので自分のサイトに合わせて上手に使って、見やすいサイトを作りましょう！