吹き出しを入れてみた

2019年9月15日

他のサイトでよく見かけるLine風の吹き出しが、とても気になってて自分のブログにも使ってみたいと思い検索してみた
また崩れるのはありがたくないので出来ればプラグインとか使わずに出来る方法が良い
これなら初心者の私にも出来るかもというサイトを見つけて早速実装してみました

INSPIER DSIGNさんの「コピペで2分！WordPress吹き出しをプラグインなしでCSSとHTMLで作る方法」

こちらのサイト、wordpressに特化したホームページ製作会社のようですが無料で提供してるんです（感謝）

どんなかな   どんなかな　どんなかなあ？

右側はどうだろか？
改行もしてみた！どんなかなあ

う～～～ん、これこれ、これがしたかった！！

◇◇ 備忘録 ◇◇
実装したのはアイコン四角枠なし
（もしもの時のために記録しておきたいので丸写しさせていただきました）
あきれるほど長～～～いです

–htmlコード–

• <!–左の吹き出し–>
•  <div class="balloon-simple">
•    <div class="icon-left">
•      <img src="images/パンダくん.jpg" alt="">　//アイコン画像を変更できます
•      <p>パンダくん</p>　//アイコンの名前を変更できます
•    </div>
•    <div class="balloon">
•      <div class="serif-left">
•        <p>おはよう！</p>　//吹き出しのセリフを変更できます
•      </div>
•    </div>
•  </div>
•  <!–左の吹き出し end–>
•  <!–右の吹き出し–>
•  <div class="balloon-simple">
•    <div class="icon-right">
•      <img src="images/家富正幸.png" alt="">　//アイコン画像を変更できます
•      <p>家富正幸</p>　//アイコンの名前を変更できます
•    </div>
•    <div class="balloon">
•      <div class="serif-right">
•        <p>おはよう！</p>　//吹き出しのセリフを変更できます
•      </div>
•    </div>
•  </div>
•  <!–右の吹き出し end–>

—CSS コード–

1. /* 共通 */
3. .balloon-simple {
4.  width: 100%;
5.  margin: 20px 0;
6.  overflow: hidden;
7. }
9. .balloon-simple .icon-right img,
10. .balloon-simple .icon-left img{
11.  width: 100%;
12.  border-radius: 50%;　//アイコンの形を変更できます
13.  background-size:cover;
14. }
16. .icon-right p,
17. .icon-left p{
18.  text-align: center;
19.  top: -10px;
20.  position: relative;
21. }
23. .balloon-simple .balloon {
24.  width: 100%;
25. }
27. .serif-right,
28. .serif-left {
29.  position: relative;
30.  padding: 20px 30px 20px 15px;
31.  border-radius: 10px;　//吹き出しの形を変更できます
32. }
34. .serif-right:after,
35. .serif-left:after {
36.  content: “";
37.  position: absolute;
38.  top: 15px;
39.  border-top: 10px solid transparent;
40.  border-bottom: 5px solid transparent;
41.  border-left: 5px solid transparent;
42. }
44. .serif-right p,
45. .serif-left p {
46.  margin: 0;
47.  padding: 0;
48.  color: #fff;　//吹き出しのセリフの文字色を変更できます
49. }
51. /* 共通 end */
53. /* 右の吹き出し */
55. .balloon-simple .icon-right {
56.  float: right;
57.  width: 100px;
58.  margin-right: 10px;
59. }
61. .balloon-simple .icon-right img{
62.  border: solid 4px #85e3ff;　//右の吹き出しのアイコンの枠の種類・色・太さを変更できます
63. }
65. .serif-right {
66.  margin: 40px 40px 0 0px;
67.  background: #85e3ff;　//右の吹き出しの背景色を変更できます
68.  float: right;
69. }
71. .serif-right:after {
72.  transform: scale(-1, 1);
73.  right: -22px;
74.  border-right: 20px solid #85e3ff;　//右の吹き出しの三角部分の色を変更できます
75. }
77. /* 右の吹き出し end */
79. /* 左の吹き出し */
81. .balloon-simple .icon-left {
82.  float: left;
83.  width: 100px;
84.  margin-left: 10px;
85. }
87. .balloon-simple .icon-left img{
88.  border: solid 4px #da9e5b;　//左の吹き出しのアイコンの枠の種類・色・太さを変更できます
89. }
91. .serif-left{
92.  display: inline-block;
93.  margin: 40px 0 0 45px;
94.  background: #da9e5b;　//左の吹き出しの背景色を変更できます
95. }
97. .serif-left:after{
98.  left: -22px;
99.  border-right: 20px solid #da9e5b;　//左の吹き出しの三角部分の色を変更できます
100. }
102. /* 左の吹き出し end */

色、その他2～3か所表示位置など変更を加えて実装しました

—HTML コード（吹き出し右）—

• <div class="balloon-simple">
• <div class="icon-right">
• <img src="アイコン画像のURL.gif" alt="" /></div>
• <div class="balloon">
• <div class="serif-right">
• <p>文章　</p>
• </div>
• </div>
• </div>

—HTML コード（吹き出し左）—

• <div class="balloon-simple">
• <div class="icon-left">
• <img src="アイコン画像のURL.gif" alt=""></div>
• <div class="balloon">
• <div class="serif-left">
• <p>文章　</p>
• </div>
• </div>
• </div>

今回参考にさせていただいた「INSPIRE DESGIN」さんのほかにも「Fantastech!」さんの