CSSで画像付きのチャット風吹き出しを作る方法

※当サイトにはプロモーションが含まれています。

ワードプレスでは、会話形式の吹出しを作ることができるプラグインが用意されていたり、日本で販売されているテーマの多くは、標準で装備されていることも多いです。

例えば、これらの吹出しデザインは、賢威の標準機能です。

にゃのらいと

賢威8.0には、会話機能専用のプラグインがあるにゃ

にゃテック

ショートコードも使えるから便利にゃ

しかし、サイト作成の際には、ワードプレス以外でも作ることがあるかと思います。

そんなときに役立つ、LINEのような吹き出しを作るCSSです。

LINEのような吹き出しを作るCSS

画像付きでLINEのような吹き出しを作るCSSです。

<div class="nya-chat-message received">
<img src="画像のURL" alt="画像の説明" class="nya-chat-avatar">
<div class="nya-chat-bubble received">
最初の会話文を記載します。
</div>
</div>
<div class="nya-chat-message sent">
<div class="nya-chat-bubble sent">
次の会話文を記載します。
</div>
<img src="画像のURL" alt="画像の説明" class="nya-chat-avatar">
</div>

.nya-chat-bubble {
position: relative;
padding: 15px;
border-radius: 15px;
margin-bottom: 30px;
display: inline-block;
max-width: 80%;
vertical-align: top;
}
.nya-chat-bubble::before {
content: '';
position: absolute;
top: 15px;
width: 0;
height: 0;
border: 10px solid transparent;
}
.nya-chat-bubble.received {
background-color: #f0f0f0;
}
.nya-chat-bubble.received::before {
left: -10px;
border-right-color: #f0f0f0;
border-left: 0;
}
.nya-chat-bubble.sent {
background-color: #fbeded;
align-self: flex-end;
}
.nya-chat-bubble.sent::before {
right: -10px;
border-left-color: #fbeded;
border-right: 0;
}
.nya-chat-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 10px;
vertical-align: top;
}
.nya-chat-message {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.nya-chat-message.sent {
justify-content: flex-end;
}
.nya-chat-message.sent .nya-chat-avatar {
margin-right: 0;
margin-left: 10px;
}

これを適用すると、こんな感じになります。