はてなブログでCSSでキャラアイコン吹き出し表示

おんぎゃあ！ああああああああああああああああああああああああああああああああああ

そして３人はしあわせにしあわせにくらしましたとさ。

それが世界のさだめならば

おんぎゃあ！ぼくだよ！

この顔アイコン実装に甘味処がすごくがんばってくれたよ。

我々は今年のバレンタインを忘れないだろう。

〜
/*吹き出し形式練習*/
.kao {
  margin: 20px;
  border: 2px solid #555;
  border-radius: 10px;
  width: calc(100% - 100px);
  padding: 5px 10px;
  top: 10px;
  position: relative;
  left: 70px;
}

.kao:before {
  content: '';
  position: absolute;
  top: -20px;
  width: 75px;
  height: 75px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  left: -80px;
}
〜

で、上に加えてなんかの記事ページにキャラアイコン貼って、右クリックからURL取得して、CSSに以下に追記

これはアイコンの数だけ。

〜
.souda:before {
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujasin/20200214/20200214143353.png");
}
〜

CSSの記述はここまで。あとは記事のHTMLに
こうですよ。

〜<div class="kao souda">ここにセリフおんぎゃああ</div>
〜

やったーーーこれはわーい度たかいぞおお