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

石原さとみのキウイ食べてるう～？

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

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

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

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

・ルーム背景色
・相手吹き出し：
   背景色
   文字の色
   文字の大きさ px
・自分吹き出し：
   背景色
   文字の色
   文字の大きさ px
・メッセージ 会話１ 会話２ 会話３

   相手トーク

   自分トーク

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ジェネレーター