スポンサーリンク

画像付き吹き出しで会話風に！

2019年9月1日HTML・CSS

UUPDATE
  • 2022年04月02日スマホで見るとちゃんとページが表示されなかったので一部修正しました。
  • 2019年09月03日『HTML・CSSコードまとめ』を追記しました。面倒な方はこちらをコピーしてお使いください。

今回は会話風の画像付き吹き出しを作ってみたいと思います。

きらり

会話風の画像付き吹き出しってボクと結耶が会話してるこれのことでしょ？
テーマにも吹き出し機能あるのにまた作ったの？

結耶

うん。最初に作ったのは正直訳分からないままやったからちょっと納得していないんだ(^^; だから改めて勉強と見直しのために作り直してみた！

ということでは今回は『画像付き吹き出し～会話風編～』を紹介したいと思います。

スポンサーリンク

画像付き吹き出し ～会話風

結耶
結耶

これが今回私が作った吹き出しです(*^^*)

結耶
きらり

今回はこの吹き出しの作り方を紹介します！

HTML

まずはHTMLです。

<!--左の吹き出し-->
<div class="talking">
   <figure class="talking-left_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="talking-left">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--左の吹き出し終わり-->

吹き出しのHTMLは上記のようになります。

※3行目に『アイコン画像のURL』と画像が表示されないときに表示される『代替テキスト(名前など)』を設定してください。
5行目にアイコンの下に表示する名前や画像の説明を入れてください。不要な場合は空欄にするか5行目の<figcaption> ～ </figcaption>を削除してください。

右の吹き出しを作るには3行目と7行目のクラス名を変更するだけで右の吹き出しになります。

<!--右の吹き出し-->
<div class="talking">
   <figure class="talking-right_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前</figcaption>
   </figure>
   <div class="talking-right">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--右の吹き出し終わり-->
きらり

よくこういう会話風の吹き出しで他の人はクラス名を『balloon』にしてるけど結耶は使わないんだね。

結耶

『balloon』はテーマの吹き出しで使ってるからね。紛らわしいから使ってない。
それに『balloon』にしなきゃいけないってこともないしねw

CSS

/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:lightpink;   /*枠線の色*/
      background:lightpink;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;
      top: 15px;
      left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:khaki;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;
      top: 15px;
      right: -19px;
}

背景色を変える

吹き出しの背景色を変える場合は以下の場所にある色を変更してください。

《左の吹き出し》
70行目   background: lightpink ;
87行目   border-right: 10px solid khaki ;

78行目は三角部分です。左の吹き出しの背景色を変える場合は上の2箇所を変更してください。

右の吹き出しの背景色を変える場合は、97行目と114行目の色を変更してください。

《右の吹き出し》
97行目   background: khaki ;
114行目   border-left: 10px solid khaki ;

枠線の色を変更する／枠線を消す

枠線を消すには枠線のスタイルを削除してもいいですが、枠線となる箇所の色を変更した方が安心です。なので以下の枠線の箇所の色を背景色と同じにしてください。

《左の吹き出し》
69行目   border-color: #aaa ;
78行目   border-right: 10px solid #aaa ;

《右の吹き出し》
96行目   border-color: #aaa ;
105行目   border-left: 10px solid #aaa ;

枠線の太さを変える

枠線の太さを変える場合は以下のCSSを変更してください。

《左の吹き出し》
68行目   border-width: 2px ;

《右の吹き出し》
95行目   border-width: 2px ;

三角部分は二つの三角を重ねて少しずらして枠線のように見えるようにしています。なので、三角部分は左の吹き出しは80行目または89行目のleftの値を、右の吹き出しは107行目または116行目のrightの値を変更して調整してください。

アイコン形を四角にする

アイコンの形を丸くしてあります。アイコンの形を四角にしたいときは37行目のborder-radiusを削除または値を変えてください。

37行目   border-radius: 50% ;

削除すると四角くなり、値を変えると角丸にできます。
またアイコンの枠線を変更や消したい場合は36行目のborderを変更または削除してください。

考えごと風の吹き出し

結耶
結耶

HTML、CSSは難しい～！

上のような考えごと風の吹き出しを追加してみます。

HTML

<!--左の考えごと風の吹き出し-->
<div class="talking">
   <figure class="think-left_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="think-left">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--左の考えごと風の吹き出し終わり-->

HTMLは上記の会話風とほぼ同じですが、3行目と7行目のクラス名が違います。

CSS

以下のCSSを上の会話風吹き出しのCSSの下に追加してください。

/*------------------------------
  考えごと
------------------------------*/
/*考えごと アイコン*/
.think-left_icon {
      float:left;
      margin-right:32px;
}

/*アイコン下の名前*/
.think-left_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*考えごと風の吹き出しセリフ部分*/
.think-left {
      float:left;
      position:relative;
      padding:10px;    /*内側の余白*/
      border:2px solid #aaa;    /*枠線の太さ 線種 色*/
      border-radius:30px;
      max-width: calc(100% - 100px);
      background:#fff;    /*背景色*/
}

/*左の考えごと 小さい丸*/
.think-left:before {
      position:absolute;
      content: '';
      width:8px;
      height:8px;
      border:2px solid #aaa;  /*丸の枠線の太さ 線種 色*/
      border-radius:50%;
      top:22px;
      left:-27px;
      background:#fff;    /*背景色*/
}

/*左の考えごと 大きい丸*/
.think-left:after {
      position:absolute;
      content: '';
      width:15px;
      height:15px;
      border:2px solid #aaa;  /*丸の枠線の 線種 色*/
      border-radius:50%;
      top:12px;
      left:-18px;
      background:#fff;    /*背景色*/
}
きらり

結耶。考えごと風の右の吹き出しは作らないの？

結耶

うーん。あまり使わないと思ったから作ってないよ。
一応、後々追加することを見込んでクラス名に「left」を付けておいたけどね。
下にHTMLとCSSをまとめておきました。こちらに右の考えごと風の吹き出しも入っています。

2019年9月3日

HTML・CSSまとめ

会話風吹き出しの左右、考えごと風の吹き出し左右のHTML・CSSをまとめておきます。

結耶
結耶

CSSをまとめていますので、上で書いたCSSと1部異なる箇所があります。カスタマイズする場合は該当箇所を探してください。

HTML
<!--左の吹き出し-->
<div class="talking">
   <figure class="talking-left_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="talking-left">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--左の吹き出し終わり-->

<!--右の吹き出し-->
<div class="talking">
   <figure class="talking-right_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前</figcaption>
   </figure>
   <div class="talking-right">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--右の吹き出し終わり-->
<!--左の考えごと風の吹き出し-->
<div class="talking">
   <figure class="think-left_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="think-left">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--左の考えごと風の吹き出し終わり-->

<!--右の考えごと風の吹き出し-->
<div class="talking">
   <figure class="think-right_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="think-right">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--右の考えごと風の吹き出し終わり-->
CSS
/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}
 
.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}
 
/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}
 
.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}
 
.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}
 
.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}
 
/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption ,
.think-left_icon figcaption ,
.think-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}
 
/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: calc(100% - 80px);
}
 
.talking p {
      margin:0;
}
 
.talking p :last-child {
      margin:0;
}
 
/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:lightpink;   /*枠線の色*/
      background:lightpink;    /*背景色*/
}
 
/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}
 
.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid lightpink;
      top: 15px;
      left: -19px;
}
 
/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:khaki;    /*背景色*/
}
 
/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}
 
.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid khaki;
      top: 15px;
      right: -19px;
}

/*------------------------------
  考えごと
------------------------------*/
/*考えごと アイコン*/
.think-left_icon {
      float:left;
      margin-right:32px;
}

think-right_icon {
      float:right;
      margin-left:32px;
}
 
/*考えごと風の吹き出しセリフ部分*/
.think-left , .think-right {
      position:relative;
      padding:10px;    /*内側の余白*/
      border-style:solid;    /*枠線の線種*/
      border-radius:30px;
      max-width: calc(100% - 100px);
}

/*---左の考えごと風の吹き出し---*/
.think-left {
      float:left;
      border-width:2px;    /*枠線の太さ*/
      border-color:#aaa;  /*枠線の色*/
      background:#fff;    /*背景色*/
}
 
/*左の考えごと 小さい丸*/
.think-left:before {
      position:absolute;
      content: '';
      width:8px;
      height:8px;
      border:2px solid #aaa;  /*丸の枠線の太さ 線種 色*/
      border-radius:50%;
      top:22px;
      left:-27px;
      background:#fff;    /*背景色*/
}
 
/*左の考えごと 大きい丸*/
.think-left:after {
      position:absolute;
      content: '';
      width:15px;
      height:15px;
      border:2px solid #aaa;  /*丸の枠線の 線種 色*/
      border-radius:50%;
      top:12px;
      left:-18px;
      background:#fff;    /*背景色*/
}

/*---右の考えごと風の吹き出し---*/
.think-right {
      float:right;
      border-width:2px;    /*枠線の太さ*/
      border-color:#aaa;  /*枠線の色*/
      background:#fff;    /*背景色*/
}

 
/*右の考えごと 小さい丸*/
.think-right:before {
      position:absolute;
      content: '';
      width:8px;
      height:8px;
      border:2px solid #aaa;  /*丸の枠線の太さ 線種 色*/
      border-radius:50%;
      top:22px;
      right:-27px;
      background:#fff;    /*背景色*/
}
 
/*右の考えごと 大きい丸*/
.think-right:after {
      position:absolute;
      content: '';
      width:15px;
      height:15px;
      border:2px solid #aaa;  /*丸の枠線の 線種 色*/
      border-radius:50%;
      top:12px;
      right:-18px;
      background:#fff;    /*背景色*/
}

考えごとのみ

考えごと風のみのHTMLとCSSをまとめました。

HTML
<!--左の考えごと風の吹き出し-->
<div class="talking">
   <figure class="think-left_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="think-left">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--左の考えごと風の吹き出し終わり-->

<!--右の考えごと風の吹き出し-->
<div class="talking">
   <figure class="think-right_icon">
      <img src="アイコン画像のURL" alt="代替テキスト">
      <figcaption>名前や画像の説明</figcaption>
   </figure>
   <div class="think-right">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--右の考えごと風の吹き出し終わり-->
CSS
/*------------------------------
   吹き出し(考えごと)
------------------------------*/
/* 吹き出し 全体*/
.talking {
      margin-bottom:2em;
      position:relative;
}
 
.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}
 
.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}
 
.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}
 
.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;
}
 
/*アイコンの下の名前*/
.think-left_icon figcaption ,
.think-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}
 
.talking p {
      margin:0;
}
 
.talking p :last-child {
      margin:0;
}

/*考えごと アイコン*/
.think-left_icon {
      float:left;
      margin-right:32px;
}
 
t.hink-right_icon {
      float:right;
      margin-left:32px;
}
 
/*考えごと風の吹き出しセリフ部分*/
.think-left , .think-right {
      position:relative;
      padding:10px;    /*内側の余白*/
      border-style:solid;    /*枠線の線種*/
      border-radius:30px;
      max-width: calc(100% - 100px);
}
 
/*---左の考えごと風の吹き出し---*/
.think-left {
      float:left;
      border-width:2px;    /*枠線の太さ*/
      border-color:#aaa;  /*枠線の色*/
      background:#fff   /*背景色*/
}

/*左の考えごと 小さい丸*/
.think-left:before {
      position:absolute;
      content: '';
      width:8px;
      height:8px;
      border:2px solid #aaa;  /*枠線の太さ 線種 色*/
      border-radius:50%;
      top:22px;
      left:-27px;
      background:#fff;    /*背景色*/
}
 
/*左の考えごと 大きい丸*/
.think-left:after {
      position:absolute;
      content: '';
      width:15px;
      height:15px;
      border:2px solid #aaa;  /*枠線の 線種 色*/
      border-radius:50%;
      top:12px;
      left:-18px;
      background:#fff;    /*背景色*/
}
 
/*---右の考えごと風の吹き出し---*/
.think-right {
      float:right;
      border-width:2px;    /*枠線の太さ*/
      border-color:#aaa;  /*枠線の色*/
      background:#fff;    /*背景色*/
}

/*右の考えごと 小さい丸*/
.think-right:before {
      position:absolute;
      content: '';
      width:8px;
      height:8px;
      border:2px solid #aaa;  /*丸の枠線の太さ 線種 色*/
      border-radius:50%;
      top:22px;
      right:-27px;
      background:#fff;    /*背景色*/
}
 
/*右の考えごと 大きい丸*/
.think-right:after {
      position:absolute;
      content: '';
      width:15px;
      height:15px;
      border:2px solid #aaa;  /*丸の枠線の 線種 色*/
      border-radius:50%;
      top:12px;
      right:-18px;
      background:#fff;    /*背景色*/
}

最後に

今回は会話風の画像付き吹き出しを作ってみました。

画像付き吹き出しを使うと記事が少し賑やかになりますw
それに書いてる方も楽しくなります。

画像付き吹き出しを使って記事を賑やかに、ユーザーにわかりやすくしてみてください。
ただし、使いすぎにはご注意ください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM