CSSで吹き出しを作る – 枠線、背景色を簡単に変更したい!

ワードプレスのメモ

CSSだけで吹き出しをつくる方法はたくさん記事がみつかり、ほぼコピペでOK!なのですが、、、

  • 枠線の太さを変更しようとすると複数個所変更が必要で、慣れないとドコをどう変えればいいのか分からない
  • 左に吹き出しを付けようとするとコンテンツ幅をはみ出してしまい、スマートフォンなどで不安

記事のCSSは大体同じ感じで処理しているので、他の書き方だと環境によって不具合や乱れがあるのかも?と思いましたが、とりあえず大体の環境で大丈夫みたいなので残しておきます。

HTML

ワードプレス、ビジュアルエディタでスタイルを適用、という前提なのでテキストを<div class=”○○~”>で囲むだけ。

<div class="block-baloon-top">
上向きの吹き出しです。<br>
改行も問題ありません。
</div>
  • block-baloon-top
  • block-baloon-right
  • block-baloon-bottom
  • block-baloon-left

CSS

上・右・下・左共通の設定です。

.block-baloon-top, .block-baloon-right, .block-baloon-bottom, .block-baloon-left	{
	display: table;
	padding: 1em;
	margin-bottom: 1em;
	position: relative;
	background-color: #f2f2f2;/* 背景色 */
	border: 2px solid #222;/* 枠線太さ、色 */
	border-radius: 0.5em;/* 枠線アール */
}
.block-baloon-top:before, .block-baloon-top:after, .block-baloon-right:before, .block-baloon-right:after, .block-baloon-bottom:before, .block-baloon-bottom:after, .block-baloon-left:before, .block-baloon-left:after	{
	content: '';
	position: absolute;
}

コンテンツ幅いっぱいで良ければ「display: table」は不要。

  • 背景色:#F2F2F2
  • 枠線太さ:2px
  • 枠線色:#222
  • 角丸:0.5em

ここらは任意に変更可。

吹き出し:上

.block-baloon-top	{
	margin-top: 3em;
}
.block-baloon-top:before, .block-baloon-top:after	{
	top: -2em;
	left: 2em;
	border-right: 1em solid transparent;
	border-bottom: solid 2em #222;/* 枠線色 */
	border-left: 1em solid transparent;
}
.block-baloon-top:after	{
	top: calc( 4px - 2em );/* 枠線太さ */
	border-bottom: solid 2em #f2f2f2;/* 背景色 */
}
上向きの吹き出しです。
改行も問題ありません。
変更する箇所はコメントの通り。
  • calc( 4px – 2em )の、「4px」がズレの大きさ = 枠線太さです。
    文字部は垂直・水平、矢印部は斜めなので、一致しません。ここは見た目で適当に変えてOK。ただし、極端な値にすると、文字が隠れちゃいます。
  • :before、:afterの「em」で表記しているところが吹き出しの形状を決めています。
    1emのところは全部3em、2emのところは全部2.5em、のように一斉に変えていけば形が崩れることは無いと思います。
  • 文字サイズに追従するように書いていますが、固定が良ければpxでも問題ありません。

吹き出し:右

.block-baloon-right	{
	margin-right: 2em;
	max-width: calc( 100% - 2em );
}
.block-baloon-right:before, .block-baloon-right:after	{
	top: 50%;
	transform: translateY(-50%);
	right: -2em;
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 2em solid #222;/* 枠線色 */
}
.block-baloon-right:after	{
	right: calc( 4px - 2em );/* 枠線太さ */
	border-left: solid 2em #f2f2f2;/* 背景色 */
}
吹き出し右
好きなだけ改行してください。

以下、要領は上向きの時と同じ。

top: 50%、transform: translateY(-50%)で高さ中央にしているので、場合によっては「top: 1em」「transformはナシ」とかの方がいいかもです。吹き出し位置が左の場合も同様。

吹き出し:下

.block-baloon-bottom	{
	margin-bottom: 3em;
}
.block-baloon-bottom:before, .block-baloon-bottom:after	{
	left: 2em;
	bottom: -2em;
	border-top: 2em solid #222;/* 枠線色 */
	border-right: 1em solid transparent;
	border-left: 1em solid transparent;
}
.block-baloon-bottom:after	{
	bottom: calc( 4px - 2em );/* 枠線太さ */
	border-top: solid 2em #f2f2f2;/* 背景色 */
}
吹き出し:下
しつこく改行しておく

吹き出し:左

.block-baloon-left	{
	margin-left: 2em;
	max-width: calc( 100% - 2em );
}
.block-baloon-left:before, .block-baloon-left:after	{
	top: 50%;
	transform: translateY( -50% );
	left: -2em;
	border-top: 1em solid transparent;
	border-right: 2em solid #222;/* 枠線色 */
	border-bottom: 1em solid transparent;
}
.block-baloon-left:after	{
	left: calc( 4px - 2em );/* 枠線太さ */
	border-right: solid 2em #f2f2f2;/* 背景色 */
}
吹き出し左
コンテンツ幅に収まります。

この向きの場合、左にアバターアイコンなどがあるケースが多いと思うので、コンテンツ幅云々は関係ないとも思いますが、やはり制御できないと気持ち悪いので。

枠線、背景色が要らない場合

beforeのボーダーカラー(上記例で#222としている部分)を背景色と一緒にして、afterを「content: none」にすれば背景だけになります。

面倒臭い場合は、枠線色を背景色と同じ色にしてしまえば「無い様に」見えますね。

逆に枠線だけでいい場合は、これも面倒なので#FFFで塗っちゃう。

※この書き方に限らないと思いますが、border、background-colorに透過は使えません。透過色が必要な場合は画像を使った方が手っ取り早いと思います。