【吹き出し】左アイコン会話風吹き出し01

下記Beyondコード

JS head

なし

HTML

<div class="balloon_left_01">
    <div class="faceicon_left_01">
        <!--画像の入れ替えは下記URL変更もしくは左に表示されている画像を選択した後に上部の画像ボタンからも入れ替え可能-->
        <img src="https://production.static.squadbeyond.com/uploads/article_photo/photo/631031/65882372-a684-416b-a484-fe55664b6da8.png" draggable="false" class="lazyload" height="51" width="51">
        <!--アイコン名が不要な場合は下記１行を削除してください-->
        <div class="name">アイコン名</div>
    </div>
    <div class="chatting">
        <div class="says_left_01">
            <p>こちらに文章を追加。色変更もできます。</p>
        </div>
    </div>
</div>

CSS

 .balloon_left_01 {
  /*周りの余白。上下｜左右*/
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
}

 .chatting {
  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定してください*/
  width: auto;
}

 .faceicon_left_01 {
  display: inline-block;
  width: 55px;
  min-width: 55px;
  height: auto;
  position: relative;
  overflow: hidden;
}

 .faceicon_left_01 img {
  /*画像周りの線の指定。左から、線の種類、線の太さ、線の色*/
  border: solid 3px #d7ebfe;
  box-sizing: border-box;
  width: 55px;
  max-width: 55px;
  height: 55px !important;
  object-fit: cover;
  border-radius: 50%;
}

 .name {
  /*アイコン名の文字サイズ*/
  font-size: 10px;
  /*アイコン名の文字の色*/
  color: #808080;
  text-align: center;
}

 .says_left_01 {
  display: block;
  position: relative;
  margin: 0 0 0 20px;
  padding: 12px;
  border-radius: 10pt;
  /*吹き出しの部分の背景色指定。※三角部分の色を除く*/
  background-color: #d7ebfe;
}

 .says_left_01:before {
  content: "";
  position: absolute;
  top: 12px;
  left: -26px;
  border: 11pt solid transparent;
  /*三角部分の色変更は下記より変更ください*/
  border-right: 11pt solid #d7ebfe;
}

 .says_left_01 p {
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
}