# pop-chatについて
**URL:** https://forum.onecomme.com/t/topic/1253
**Category:** 質問
**Created:** [2023 年 8 月 16 日午前 11:47 UTC](https://forum.onecomme.com/t/topic/1253 "2023-08-16T11:47:53Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@tanbo\_2013](https://forum.onecomme.com/u/tanbo_2013)
#### Post date: [2023 年 8 月 16 日午前 11:47 UTC](https://forum.onecomme.com/t/topic/1253/1 "2023-08-16T11:47:53Z")
## 対象
わんコメ / WordParty / テンプレート / その他
## 利用OS
Windows
## 利用バージョン: Windows、わんコメやOBSのバージョン
Windows: 10
わんコメ： 5.0.0-beta.86
OBS: 29.1.3（64bit）
## PRO版を利用
していない
## 過去ログ確認 ([検索はこちらから](https://forum.onecomme.com/search))
した
## ドキュメント確認 ([公式サイト](https://onecomme.com/docs/faq/))
した
## 内容
始めました。
このようなところに書くことが初めてなので、つたないかもしれませんがご容赦を
昨日、アップデートをした際一部の表示がおかしくなっていることを視聴者から指摘されて、確認しました。
pop-chatをニコ生とYouTubeで片方を反転させて表示させています。
過去にyurucampのｃｓｓを反転させる記事をみてそれを使っています。
.comment:not([data-service=‘niconama’]) .avatar {
margin-left: 20px;
margin-right: 0;
}
.comment:not([data-service=‘niconama’]) .name {
text-align: right;
margin-left: 0;
padding: 4px 0 0 16px;
}
.comment:not([data-service=‘niconama’]) .comment-block {
flex-direction: row-reverse;
}
.comment:not([data-service=‘niconama’]) .comment-body {
margin-left: 0;
margin-right: 24px;
border: 3px solid var(–lcv-border-color);
border-right: none;
border-radius: 8px 0 0 8px;
}
.comment:not([data-service=‘niconama’]) .comment-body::before {
border-left: none;
border-right: 3px solid var(–lcv-border-color);
left: auto;
right: -8px;
border-radius: 0 8px 0 0;
}
.comment:not([data-service=‘niconama’]) .comment-body::after {
border-left: none;
border-right: 3px solid var(–lcv-border-color);
left: auto;
right: -8px;
border-radius: 0 0 8px 0;
}
.comment:not([data-service=‘niconama’]) .comment-text::before {
left: auto;
right: -42px;
transform: scale(-1, 1);
}
.comment:not([data-service=‘niconama’]) .comment-text::after {
left: auto;
right: -46px;
transform: scale(-1, 1);
}
.comment:not([data-service=‘niconama’]) .comment-enter-active .avatar,
.comment:not([data-service=‘niconama’]) .comment-leave-active .avatar {
transform-origin: 100% 100%;
}
.comment:not([data-service=‘niconama’]) .comment-enter-active .comment-body,
.comment:not([data-service=‘niconama’]) .comment-leave-active .comment-body {
transform-origin: 100% 100%;
}
Discord内の雑談にて、少しご質問をさせていただいたらこちら再度ご質問とさせていただきます。
---
### Author:  [@ASTIE](https://forum.onecomme.com/u/ASTIE)
#### Post date: [2023 年 8 月 16 日午前 11:58 UTC](https://forum.onecomme.com/t/topic/1253/2 "2023-08-16T11:58:24Z")
こんばんわん！
改めての投稿ありがとうございます
本件は5.0でpop-chatの継ぎ目部分の調整とカスタマイズ項目追加に伴う構造の変更を受けたことによるものです
そのため新しい構造に合わせたCSSが必要になります
最新のバージョンでも反転が正しくされるように調整したものを共有いたします
```auto
.comment:not([data-service="niconama"]) .avatar {
margin-left: 20px;
margin-right: 0;
}
.comment:not([data-service="niconama"]) .name {
text-align: right;
margin-left: 0;
padding: 4px 0 0 16px;
}
.comment:not([data-service="niconama"]) .comment-block {
flex-direction: row-reverse;
}
.comment:not([data-service="niconama"]) .comment-body {
margin-left: 0;
margin-right: 24px;
border: 4px solid var(--lcv-border-color);
border-right: none;
border-radius: 8px 0 0 8px;
}
.comment:not([data-service="niconama"]) .comment-body::before {
border-left: none;
border-right: 4px solid var(--lcv-border-color);
left: auto;
right: -9px;
border-radius: 0 8px 0 0;
}
.comment:not([data-service="niconama"]) .comment-body::after {
border-left: none;
border-right: 4px solid var(--lcv-border-color);
left: auto;
right: -9px;
border-radius: 0 0 8px 0;
}
.comment:not([data-service="niconama"]) .arrow {
left: auto;
right: 0;
}
.comment:not([data-service="niconama"]) .arrow::before {
left: auto;
right: -27px;
-webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNLTAsMTRsLTAsLTE0bDguMDU1LC0wbDE4Ljk0NSwxNGwtMjcsLTBaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
}
.comment:not([data-service="niconama"]) .arrow::after {
left: auto;
right: -33px;
-webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOSAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48cGF0aCBkPSJNMiwyLjAwNGwxLjkxOSwwYzAsMCAxMS4wODIsNi45MjEgMTQuNTg5LDkuNTI0YzIuNDM2LDEuODA4IDguMzM5LDUuODEgNy43MDIsNi4yMTdjLTAuNjY3LDAuNDI3IC0zLjg3MiwwLjM2IC01LjUwNiwwLjM2Yy0xLjE0LC0wIC0xOC42OTgsLTAuMSAtMTguNjk4LC0wLjEiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjRweDsiLz48L2c+PC9zdmc+') no-repeat 50% 50%;
}
```
こちらでこのように正常に表示されるかと思いますので、お試し頂けますでしょうか
よろしくお願いいたします
---
### Author:  [@tanbo\_2013](https://forum.onecomme.com/u/tanbo_2013)
#### Post date: [2023 年 8 月 16 日午後 12:00 UTC](https://forum.onecomme.com/t/topic/1253/3 "2023-08-16T12:00:27Z")
素早い対応ありがとうございます。
こちらの環境でも無事に反転が確認できました。
改めてありがとうございます。
---
### Author:  [@ASTIE](https://forum.onecomme.com/u/ASTIE)
#### Post date: [2023 年 8 月 17 日午前 7:24 UTC](https://forum.onecomme.com/t/topic/1253/4 "2023-08-17T07:24:52Z")