WordPress内でhtmlを書くと干渉してしまう。

Wordpress内にHTMLモジュールを複数配置し、以下のように左右からの吹き出しを作ろうと思っています。左側に画像がある吹き出しのイメージは１枚目の写真、右側に画像がある吹き出しのイメージは2枚目の写真です。

左側に画像がある吹き出しのwordpress内のコード
<!DOCTYPE html>

<html>

<head>
<style>

.balloon_left {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
  /*font-size:40px;*/
  
}

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

}

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

.balloon_left .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;/*--上から時計回り-->*/
  padding: 50px 60px;/*--ここで吹き出しの大きさの変更-->*/
  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;
  font-size:40px;/*--吹き出しの中の文字の大きさを変える。これを変えると吹き出しの大きさも変えてしまう。おそらくmarginとpaddingが0なのが問題？？-->*/

}

</style>
</head>

<body>
 <!--吹き出しはじまり-->
<div class="balloon_left">
  <div class="faceicon">
    <img src="nikoniko.png">
  </div> 
  <div class="chatting">
    <div class="says" >
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->
</body>

右側に画像がある吹き出しのwordpress内のコード
<!DOCTYPE html>

<html>

<head>
<style>

.balloon_right {
  width: 100%;
  margin: 1.5em 0 ;
  overflow: hidden;
  /*font-size:40px;*/
  
}

.balloon_right .faceicon {
  float: right;
  margin-right: 0%;/*--上から時計回り-->*/
  width: 80px;

}

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

.balloon_right .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 30%;/*--上から時計回り-->*/
  padding: 50px 60px;/*--ここで吹き出しの大きさの変更-->*/
  border-radius: 12px;
  background: #d7ebfe;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: 100%;
  border: 12px solid transparent;
  border-left: 12px solid #d7ebfe;/*三角形の向き->leftにすると右向き、pxは三角形の長さ*/
}

.says p {
  margin: 0;
  padding: 0;
  font-size:40px;/*--吹き出しの中の文字の大きさを変える。これを変えると吹き出しの大きさも変えてしまう。おそらくmarginとpaddingが0なのが問題？？-->*/

}

</style>
</head>

<body>
 <!--吹き出しはじまり-->
<div class="balloon_right">
  <div class="faceicon">
    <img src="nikoniko.png">
  </div> 
  <div class="chatting">
    <div class="says" >
      <p>★文章を入れる★</p>
    </div>
  </div>
</div>
<!--吹き出し終わり-->
</body>

問題はwordpress内に記述すると互いが鑑賞してしまい、吹き出しの向きが一緒になってしまうことです。独立な2つのHTMLモジュール内に記述しています。(以下の画像参照)どこが問題でしょうか？わかる方いらっしゃいましたら教えてください。

11/21追記

行動規範の内容に同意します

回答2件

自己解決

各モジュールがwordpress上で干渉してしまう問題は、吹き出しのやりとりを１つのhtmlモジュール内で完結させることによって解決しました。

参照URL: https://teratail.com/questions/247442?link=qa_related_pc

投稿2021/11/21 01:03

nitori-kun

総合スコア62

css
1.says:after {...
2.says:after {...
3
4↓
5
6.balloon_left .says:after {...
7.balloon_right .says:after {...

投稿2021/11/20 16:39

KazuhiroHatano

総合スコア7804

nitori-kun

2021/11/21 00:21

ありがとうございます。吹き出しの三角形が消えてしまいました。(画像追加しました)

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

WordPress内でhtmlを書くと干渉してしまう。

関連した質問