Wordpressで吹き出しを右側に作成したいのですが、うまく反映されません><

Question

いつもteratailさまでたくさんの詳しい方に助けていただいております
パソコン初心者の私にとっては大変ありがたく、感謝しています＊
ありがとうございます。

現在、Wordpressにて吹き出しを記事に使用したいと思っているのですが
左側のコードはWEBページのをコピーして使用させていただいているのですが
右側にするコードが見つからず反映されておりません。

*参考にさせていただいただいたWEBページ
https://saruwakakun.com/html-css/reference/speech-bubble#section6
⇢こちらの会話形式（チャット）のコードを使用しました

左側はこのように反映されました；

＊使用したCSSに貼り付けたコードはこちらです

.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.says p {
  margin: 0;
  padding: 0;
}

◎自分で試したこと
leftの文字をrightに変換するとできるというページを拝見したので
.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

```HTMLのコードがこちらです
<!--吹き出しはじまり-->
<div class="balloon1">
  <div class="faceicon">
   <img src="https://komatuharuna.com/wp-content/uploads/2020/03/アイコンサンプル５1.png" alt="" width="300" height="300" class="alignnone size-full wp-image-109" />
  </div>
  <div class="chatting">
    <div class="says">
      <p>こんにちは</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->

のfloat: leftの部分をrightに置き換えましたが…
反映されず画像も消えてしまっています

現在使用させていただいているHTMLコードの
どの部分をrightに置き換えれば反映されるのでしょうか...?
教えていただければ嬉しいです＊

お忙しいところ恐れ入りますが、よろしくお願い致します。

＊追記です

右側で表示させたいHTMLのコードはこのようになっております

*追記です

このような形を目指しています

*追記です

助けていただいたおかげで無事にできました><ありがとうございます
ほんとうにコードについて詳しい方には頭が下がります＊^^＊
ありがとうございます

Comments

[hatena19]

向きを変えたときの、全体の配置（左寄せなのか右寄せなのか）、全体の幅は100％でいいのか、などの詳細な仕様を提示してもらえますか。
現在は吹き出し部分の幅を設定していないので、中身のテキストで幅が変化します。
右向きと左向きの吹き出しが交互に出てくる想定でしょうか（ラインの画面のような感じ）

[run1334312]

hatena19さま＊
お忙しいなか回答いただきありがとうございます。
右向きと左向きの吹き出しが交互に出てくるよう想定させていただいております。
全体の幅は上記のHTMLと同じように100%で設定したいと思っております><

[run1334312]

追加です＊
すみません上記で100％とお伝えしましたが中身のテキストで幅が変化するようにしたいと考えております><

[marlboro_tata]

CSSだけでなく、該当部分のHTMLも掲載すると、アドバイスがもらいやすいかもしれません。
また、質問に書くHTMLやCSSのコードは、下記を参考に<code>で「囲む」と見やすくなると思います。
https://teratail.com/help/question-tips#questionTips3-5-1

[hatena19]

右向き（アイコンが右）の場合、アイコンと吹き出し全体も右寄せにしますか。
全体の幅は100%でなくても固定（% か px）にしないと、
右向きと左向きの吹き出しが交互に出てくる場合、吹き出しやアイコンが揃わずに凸凹になりますが、それでいいのですか。
できれば、右向きと左向きの吹き出しが交互に出てきて、テキスト長も様々な場合のレイアウト例を画像で提示してもらえませんか。

[hatena19]

あと、float で吹き出しとアイコンを横並びにしてますが、今ならflexでした方が簡単にできますが、それでもいいですか。

[run1334312]

marlboro_tataさま＊
メッセージいただきありがとうございます＊＾＾＊
アドバイスしていただいた通り<code>で囲ませていただきました
ありがとうございます!><

[run1334312]

hatena19さま＊
すごく丁寧に、ご回答いただきありがとうございます＾＾
お時間を割いていただき感謝します。
右向きアイコンの場合右寄せにしたいと思います><
全体の幅は左と同じく width: 100%;に設定したいと考えております
そしてすみません最後の行がよくわからないのですが、
どんなふうにしたいのか、イメージを見せてほしい...というニュアンスで合ってますでしょうか?(違ってたらすみません)
追記に画像を貼り付けさせていただきます*

[run1334312]

hatena19さま＊②つめです
floatやflexについて全く知識がない状態でGoogleで検索させていただきました><；
floatはCSSでのレイアウト設定を簡単にするレイアウトモジュールと記載されておりました
簡単になるのであればそちらの方法を希望しております><

[marlboro_tata]

こうゆう感じですかね。
https://codepen.io/ccc-labo/pen/zYGjdBg

[run1334312]

marlboro_tataさま＊
わぁ～～っすごい！！すごいです！！
そう！まさにこの感じです♡わーすごいなぁすごいなぁ
使用させていただいてもよろしいのでしょうか？><

Answer 1

細かい部分は適当に忖度して作成してみました。
吹き出しの色は、クラスを追加して変化させるようにしてください。
floatはやめてflexで横並びにしてます。

<!--吹き出しはじまり-->
<div class="balloon left">
  <div class="faceicon">
     <img src="http://placehold.jp/80x80.png">
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
    </div>
  </div>
</div>
<div class="balloon right">
  <div class="faceicon">
     <img src="http://placehold.jp/80x80.png">
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
    </div>
  </div>
</div>
<div class="balloon left">
  <div class="faceicon">
     <img src="http://placehold.jp/80x80.png">
  </div>
  <div class="chatting">
    <div class="says">
      <p>★文章を入れる★★文章を入れる★★文章を入れる★★文章を入れる★</p>
    </div>
  </div>
</div>

.balloon {
  max-width: 1000px;
  width: 100%;
  margin: 1.5em auto;
  overflow: hidden;
  display: flex;
}
.balloon.right {
  flex-direction: row-reverse;
}


.balloon .faceicon {
  margin: 0 10px 0 10px;
  width: 80px;
  flex-shrink: 0;
}

.balloon .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #d7ebfe;
  border-radius: 50%;
}

.balloon .chatting {
  display: inline-block;
  max-width: 800px;
}

.says {
  position: relative; 
  margin: 5px 20px 0 20px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  border: 12px solid transparent;
}

.left .says:after {
  left: -24px;
  border-right: 12px solid #d7ebfe;
}
.right .says:after {
  right: -24px;
  border-left: 12px solid #d7ebfe; 
}
.says p {
  margin: 0;
  padding: 0;
}

Codepenサンプル

Comments

[run1334312]

hatena19さま＊
わ～～hatena19さま、コードを記載していただきありがとうございます><
吹き出しの色やflexのコードなど分かりやすく教えていただきありがとうございますっ！
これから使用させていただきます＊