コピペOK！Bloggerでスマホ対応の吹き出し会話形式の作り方

.left-side,
.right-side {
    display: flex;
    align-items: flex-start; /* アイコンと吹き出しを上部で揃える */
    margin: 20px 0;
}
/* アイコンのスタイル */
.icon {
    text-align: center;
}
.icon img {
    width: 70%;  
    height: auto; /* 幅に合わせて高さを自動調整 */
    border: solid 1px #FFFFFF;
    border-radius: 50%;
}
.icon p {
    margin: 0;
    word-wrap: break-word;
    text-align: center;
    font-size: 1rem; /* フォントサイズを限りなく小さく設定 */
}

/* 吹き出しのスタイル */
.bubble {
    padding: 10px; /* 内側の余白を設定 */
    border-radius: 10px;
    background: #DBE6E0;
	border: 2px solid #DBE6E0;
    position: relative;
    display: flex; /* 吹き出し内の要素をフレックスで整列 */
    width: fit-content; /* 吹き出しの幅を文字列に合わせる */
    max-width: 70%; /* colの中で最大70%まで拡張 */
    word-wrap: break-word; /* 長い単語を折り返す */
    box-sizing: border-box; /* パディングとボーダーを含めて幅を計算 */
}
.bubble p {
    margin: 0; /* テキスト要素のマージンを削除 */
}
.bubble::before {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    position: absolute;
}
/* 左側表示のスタイリング */
.left-side .bubble {
    margin-left: 0px; /* アイコンとの間に余白を設ける */
}
.left-side .bubble::before {
    top: 15px;
    left: -20px;
    border-right-color: #DBE6E0;
}

/* 右側表示のスタイリング */
.right-side {
    justify-content: flex-end; /* 右側の吹き出しを右寄せにする */
}
.right-side .bubble {
    margin-right: 0px; /* アイコンとの間に余白を設ける */
}
.right-side .bubble::before {
    top: 15px;
    right: -20px;
    border-left-color: #DBE6E0;
}