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

下記Beyondコード

JS head

なし

HTML

<div class="balloon_right_01">
    <div class="chatting">
        <div class="says_right_01">
            <p>こちらに文章を追加。色変更もできます。</p>
        </div>
    </div>
    <div class="faceicon_right_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>

CSS

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

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

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

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

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

 .says_right_01 {
  display: block;
  position: relative;
  margin: 0;
  padding: 12px;
  border-radius: 10pt;
  /*吹き出しの背景色指定。※三角部分の色は下の.says:beforeから変更*/
  background-color: #d7ebfe;
  margin-right: 20px;
}

 .says_right_01:before {
  content: "";
  position: absolute;
  top: 15px;
  right: -11px;
  /*三角部分の色変更は下記カラーコードを変更ください*/
  border-left: 11px solid #d7ebfe;
  border-bottom: 11px solid transparent;
  border-top: 11px solid transparent;
}

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