【SANGO用】考え事吹き出しのCSSサンプル

大人気Wordpressテーマ「SANGO」で、考え事吹き出しを使いたいと思ったことはないだろうか。

SANGO純正（Gutenberg）の吹き出しデザインに合わせた、考え事吹き出し（通称：ポワポワ吹き出し）を作ってみたので、紹介する。

コードとサンプル

左からの考え事吹き出し

HTML

<div class="wp-block-sgb-say sgb-block-say sgb-block-say--left">
 <div class="sgb-block-say-avatar">
  <img src="画像のURL" style="border-color:#eaedf2">
  <div class="sgb-block-say-avatar__name">名前を記載</div>
 </div>
 <div class="think-left">ここに文章を入力</div>
</div>

CSS

/*--------------------------------------
  考え事風の吹き出し（Gutenberg 左）
--------------------------------------*/
.think-left {
	display: inline-block;
	position: relative;
	margin-left: 130px;
	text-align: left;
	padding: 13px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 30px;
}

.think-left::after {
	content: "";
	position: absolute;
	left: -23px;
	width: 14px;
	height: 14px;
	top: 13px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 50%;
}

.think-left::before {
	content: "";
	position: absolute;
	left: -40px;
	width: 10px;
	height: 10px;
	top: 10px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 50%;
}

右からの考え事吹き出し

HTML

<div class="wp-block-sgb-say sgb-block-say sgb-block-say--right">
 <div class="sgb-block-say-avatar">
  <img src="画像のURL" style="border-color:#eaedf2">
  <div class="sgb-block-say-avatar__name">名前を記載</div>
 </div>
 <div class="think-right">ここに文章を入力</div>
</div>

CSS

/*--------------------------------------
  考え事風の吹き出し（Gutenberg 右）
--------------------------------------*/
.think-right {
        float:right;
	display: inline-block;
	position: relative;
	margin-right: 130px;
	text-align: left;
	padding: 13px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 30px;
}

.think-right::after {
	content: "";
	position: absolute;
	right: -23px;
	width: 14px;
	height: 14px;
	top: 13px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 50%;
}

.think-right::before {
	content: "";
	position: absolute;
	right: -40px;
	width: 10px;
	height: 10px;
	top: 10px;
	background: #fff;
	border: solid 2px #d5d5d5;
	border-radius: 50%;
}