VK Blocks の吹き出しのようなものをノーコードで作ってみた

上記のやり方だとアイコンを右に配置できません。そこで、本家 VK Blocks の吹き出しブロックを以下のようにカスタマイズして作ってみました。

• アイコンを大きくしました
• 縦横比を気にせずにアイコンを選べるようにしました
• ツノの位置を下げました

記述した CSS は以下の通りです。

.vk-baloon-custom .vk_balloon_icon:not(:empty) {
    -ms-flex-preferred-size: 150px;
    flex-basis: 150px;
}
.vk-baloon-custom .vk_balloon_icon_image {
    width: 150px;
    height: auto;
}
.vk-baloon-custom.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_before,
.vk-baloon-custom.vk_balloon-type-speech .vk_balloon_content .vk_balloon_content_after {
    top: 75px;
}

vk-baloon-custom は吹き出しブロックに設定した 追加 CSS クラス です。