ブログ内で使用する吹き出し、つくりました。

と、上記の通り。自作でコーディングしてみました。(レスポンシブ対応)

あまり文字数が多くなるとカッコ悪いので、吹き出しのコメントは1-2行くらいがいいですね。

忘備録も兼ねて、html / css コードを公開しております。

当ブログのワードプレスは、コードエディターで書いています。htmlコード数を少なくできるように考えました。下記の内容で、お使いになられたい方は、コピペして、どうぞご利用くださいませ。

初心者の方も分かりやすいように、コード内に解説(コメントアウト)をたくさんつけています。ご了承ください。

htmlの内容

<!--左から吹き出し-->
<div class="bln dare-san"> <!-- dare-sanは画像のclass変更してね -->
<div class="says">
<p>
ブログ中に吹き出し入れてコメントすると、アクセントでるね〜。<br>
読者も、読みやすくなるんちゃうかなー？
</p>
</div>
</div>

<!--右から吹き出し-->
<div class="bln wan-san fxd--rr">  <!-- wan-sanは画像のclass変更してね -->
<div class="says">
<p>そやな、お前にしてはまぁまぁやな</p>
</div>
</div>

cssの内容

/*吹き出し(バルーン)のアウトライン*/
.bln {
    width: 100%;
    margin: 10px auto;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
	align-items: center;
    overflow: hidden;
}
@media (max-width:480px) {
	.bln {
		padding: 0;
	}
}

/* 左右アイコンのイメージサイズと配置 */
.bln:before {
    content: "";
    width: 90px;
    height: 90px;
    background: no-repeat left center / contain;
    /* display: inline-block; */
}
@media (max-width:480px) {
	.bln:before {
		width: 80px;
		height: 80px;
	}
}

/* 左アイコンのイメージ配置 画像100~200pxくらいでok */
.bln.dare-san:before {
    background-image: url(img/dare-san.png) /*画像ファイル場所を記入してね*/
}

/* 右アイコンのイメージ配置 画像*/
.bln.wan-san:before {
    background-image: url(img/wan-san.png) /*画像ファイル場所を記入してね*/
}

/* 吹き出し中の文章アウトライン */
.says {
    position: relative;
    margin: 1rem;
    max-width: calc(100% - 170px);
    padding: .6rem 1.2rem;
    border: solid 2px #eee;
    border-radius: 1.2rem;
}
@media (max-width:480px) {
	.says {
		margin: 0;
		max-width: calc(100% - 125px);
	}
}

/* 吹き出し口 尖ってるところのあしらい */
.says::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 10px solid #fff;
    z-index: 2;
}
.says::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -21px;
    margin-top: -9px;
    border: 9px solid transparent;
    border-right: 12px solid #eee;
    z-index: 1;
}

/* 右のアイコン配置指定 吹き出し反転など */
.bln.fxd--rr .says:before,
.bln.fxd--rr .says:after {
	transform: scale(-1, 1);
	
}

/* 右のアイコンから 吹き出し反転 */
.bln.fxd--rr .says:before {
	left: inherit;
	right: -16px;
}
.bln.fxd--rr .says:after {
	left: inherit;
    right: -21px;	
}

/*吹き出内の調整用*/
.says p {
  margin: 0;
  padding: 0;
}

/* 右の人にする時につける flex要素 */
.fxd--rr {
	flex-direction: row-reverse;
}

以上となります。

ちなみに上記の表示は、『Prism.js シンタックスハイライター』を導入しました。とっても便利です。
https://prismjs.com/

当サイト Canvas でコーディングしたパーツなど、コード解説ブログも書いていきたいです。webデザインを始めた方向け。誰かのお役にたてますと幸いです。

それでは。最後までお読みいただきまして、ありがとうございました🙌