誰でも約10分でチャット風吹き出しを簡単実装

2015年10月8日2015年11月8日

こんにちは、Yuuichi(@WestHillWorker)です。

今回は、Line等のチャット形式をブログに簡単に取り入れたいという方向けの記事となります。

↓↓こんな感じのものができあがります↓↓

完成イメージ

こんにちは、今日は「簡単にチャット風」の装飾を実装する方法をお伝えするわね。

先生、良くブログ等に実体験談とかで使うので、とても参考になります！！

1 コーディング前に準備するもの
2 チャット風デザイン実装
- 2.1 htmlの実装部分
- 2.2 cssの実装部分
3 まとめ

コーディング前に準備するもの

①チャットで利用するアイコン画像の準備が必要です。
今回50*50pxサイズの画像を2枚用意していますが、自分の利用するサイトやデバイスに応じてサイズ・解像度を自前でご準備下さい。

■サンプル画像

素材利用:写真素材ぱくたそ

②ベースとなるhtml・cssファイル
※既存サイトに組み込む場合、不要です。

チャット風デザイン実装

準備が完了したので、さっそく実装していきます。

htmlの実装部分

実際の会話のフレーム・icon画像・トークの内容を記述します。

htmlにコピペして画像パスやサイズは調整ください。

<div id="chat-frame">
<p class="chat-talk">
    <span class="talk-icon">
        <img src="[ファイルのurl]" alt="tartgeticon" width="XX" height="XX"/>
    </span>
    <span class="talk-content">[トーク内容を記載]</span>
</p>
<p class="chat-talk mytalk">
    <span class="talk-icon">
        <img src="[ファイルのurl]" alt="myicon" width="XX" height="XX"/>
    </span>
    <span class="talk-content">[トーク内容を記載]</span>
</p>
</div>

上記では、一人一会話分となっていますが、コピペで会話をいくつでも複製できます。

簡単に各class/idの説明をします。

・chat-frameは、チャット枠のフレームになります。
なくても大丈夫ですが、ここからチャットフレーム使うよと明示・サイズをあらかじめ決めてます。

・chat-talkは、一人一会話分の枠になります。発言単位で記載下さい。

・talk-iconは、自分や相手のアイコンをくくります。
画像のサイズやurlは、自サイトに合わせて編集ください。

・talk-contentは、トークの内容を記載してください。

・chat-talk mytalkは、自分のトーク時に指定するクラスになります。

html部分は以上となります。
次にcssについて実装していきます。

cssの実装部分

htmlで作成したクラスとidに装飾していきます。

style.css等にコピペしてサイズや色をお好みに調整ください。

#chat-frame {
  min-width: 320px;
  max-width: 800px;
  margin: auto;
  padding: 1em 2em;
  background-color: #D8F3F0;
}
.chat-talk {
  overflow: hidden;
  margin: 0 0 1em 0;
  padding: 0;
}
.chat-talk span {
  display: block;
  margin: 0;
  padding: 0;
}
.chat-talk .talk-icon {
  float: left;
  width: auto;
}
.chat-talk .talk-content {
  position: relative;
  box-sizing: border-box;
  width: auto;
  min-height: 50px;
  border-radius: 10px;
  background-color: #fff;
  margin: 0 auto 0 70px;
  padding: 1em;
}
.chat-talk .talk-icon img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 2px solid #fff;
  border-radius: 50%;
}
.chat-talk .talk-content:before {
  position: absolute;
  top: 15px;
  left: -20px;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border: 10px solid transparent;
  border-right-color: #FFFFFF;
}
.chat-talk.mytalk .talk-icon {
  float: right;
}
.chat-talk.mytalk .talk-content {
  margin: 0 70px 0 auto;
  color: #000;
  background: #78FF6C;
}
.chat-talk.mytalk .talk-content:before {
  right: -20px;
  left: auto;
  border-color: transparent;
  border-left-color: #78FF6C;
}

実装の簡単な説明となります。

・chat-frameで表示崩れしないように枠をあらかじめきめます。
サイトの幅に応じて調整ください。

・chat-talkで一人分の会話スペースを確保します。

・talk-contentとtalk-content:beforeで吹き出しを設定しています。
吹き出し背景色を変えたい場合、color部分を編集ください。

・自分の会話は、mytalkクラスでアイコン・吹き出しが右側にくるように設定しています。

cssの実装も完了です。

作業はここまでで、あとは会話内容を決めていくだけです。

画像の準備さえしてしまえば、あとは使い回すだけで楽チンだと思います。