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

2019年9月1日

  • 2019年9月3日
    『HTML・CSSコードまとめ』を追記しました。面倒な方はこちらをコピーしてお使いください。

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

きらり
きらり

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

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

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

スポンサーリンク

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

結耶
結耶

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

結耶
きらり

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

HTML

まずはHTMLです。

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

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

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

きらり
きらり

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

結耶
結耶

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

CSS

背景色を変える

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

《左の吹き出し》
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

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

CSS

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

きらり
きらり

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

結耶
結耶

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

2019年9月3日 追記

HTML・CSSまとめ

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

結耶
結耶

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


HTML
CSS

最後に

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

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

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

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。