カラー吹き出しCSSジェネレーター(LINE風トークルーム)

石原さとみのキウイ食べてるう~?

さとみ
キウイ食べてるう~(^^)-☆
キウイはにがてなんだけど、他にオススメないかな??
既読
0:30

さとみ
キウイ食べてるう~(^^)-☆
夏バテにはやっぱりキウイだよね!
え...や、キウイ苦手なんだってば(*_*`)
既読
0:30

さとみ
月9『リッチマン・プアウーマン』みてくれてる(o^^o)?
おっと!ここで番宣ですか!わかりました。
見ましょう(・ω・)
既読
0:30
既読
0:30

吹き出しの構成 - 操作パネル

・ルーム背景色
・相手吹き出し:
   背景色
   文字の色
   文字の大きさ px
・自分吹き出し:
   背景色
   文字の色
   文字の大きさ px
・メッセージ 会話1 会話2 会話3

   相手トーク

   自分トーク

LINE風トークルームの作り方

本ページの「LINE風トークルーム」は、「3oWebCreate WEB小ネタと生活ライフハック」サイトの 「HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法」ページのCSSを引用しカスタマイズして作成しています。

以下のソースコードは、上のフォームの変更が反映されています。


吹き出しを単独で使用する方法

この吹き出しを、会話(チャット)形式ではなく、単独で使用したい場合は、会話(チャット)形式のCSSをカスタマイズして、 単独使用できる「左吹き出し」および「右吹き出し」CSSを用意しましたので下のコードをコピーして使用してください。
「左吹き出し」および「右吹き出し」のHTMLは、会話(チャット)形式と同様ですが、
「右吹き出し」の場合、つぎのタグを追加します。

 <!-- 「右吹き出し」追加コード --> 
<div style="float: left;"> <!-- アイコン画像  -->
      <img src="img/fukada-kyoko-6.jpg" width=100 height=100px style="border-radius: 50%;">
</div>
<div style="clear: both;"></div> <!-- divタグ横並び解除 -->

    吹き出し単独使用のデモ ≫



<style>

/* 相手 friend ************************************************************/

/* 相手の会話 */
 .line__left {
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 5px;
    max-width: 90%;
    clear: both;
}

/* 相手のアイコン画像 */
 .line__left figure {
    width: 64px;       /* アイコン画像の大きさに合わせます */
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0;
    margin: 0;

}

/* 相手 アイコン画像の正方形を用意 */
 .line__left figure img{
    border-radius: 50%;
    width: 64px; 
    height: 64px;
}

/* 相手 吹き出しと画像との間隔は、画像の大きさにより変更します 初期値:70px(width:50pxのとき) */
 .line__left .line__left-text {
  margin-left: 80px;  /* 修正値; 上 .line__left figure img の width+15~20px */
}

 .line__left .line__left-text .name {
  font-size: 80%;
  color: #ffffff;
}

/* 相手 コメントエリア */
 .line__left .text {
  margin: 0; display: inline-block;
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #EDF1EE; 
}

/* 相手 吹き出し */
 .line__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 3px;
  border-right: 20px solid #EDF1EE;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  transform: rotate(35deg); -webkit-transform: rotate(35deg);
}

/* 自分 my ************************************************************/

/* 自分の会話 */
 .line__right {
    position: relative;
    display: block;
    margin: 5px 0;
    max-width: 95%;
    float: left;
    margin-right: 15px;
    clear: both;
}

/* 自分 コメントエリア */
 .line__right .text {
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
  margin-left: 80px;   /* 吹き出しと画像との間隔値 初期値:80px */
}

/* 自分 吹き出し */
 .line__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 3px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-35deg); -webkit-transform: rotate(-35deg); 
}

/* 自分がスタンプを送る時 */
 .line__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 自分 既読/時間エリア */
 .line__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -25px;
  bottom: 0px;
  font-size: 80%;
  color: #ffffff;
}

</style>
  

<div class="line__left">
   <figure>
          <img src="img/ishihara-satomi-3.jpg" />
   </figure>
   <div class="line__left-text">
      <div class="name"><br>さとみ</div>
      <div class="text">
        ねぇねぇ、帰ってくるのおそいんだけど!!今どこ今どこ今どこーー<br>キウイ買ってくね!</div>
   </div>
</div> 
  

<div class="line__right">
  <div class="text">深キョン了解!寝過ごさないようにだよ? 風呂ためとこと・・・<br>キウイいらな~いっ
  </div>
  <span class="date">既読<br>0:31</span>
</div> <!-- 追加コード(青字)  --> 
<div style="float: left;"> <!-- アイコン画像  -->
      <img src="img/fukada-kyoko-6.jpg" width=100 height=100px style="border-radius: 50%;">
</div>
<div style="clear: both;"></div> <!-- divタグ横並び解除 -->
  



HOME
 最終更新日:2019.10.19(初版)
メール mailto:  掲示板

CSSジェネレーター