# バージョン5.0 - beta.90以降のpop-chatで一部だけ逆サイドに表示するCSS
**URL:** https://forum.onecomme.com/t/topic/1260
**Category:** カスタマイズ
**Created:** [2023 年 8 月 20 日午前 2:55 UTC](https://forum.onecomme.com/t/topic/1260 "2023-08-20T02:55:51Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@ASTIE](https://forum.onecomme.com/u/ASTIE)
#### Post date: [2023 年 8 月 20 日午前 2:55 UTC](https://forum.onecomme.com/t/topic/1260/1 "2023-08-20T02:55:51Z")
beta.90でpop-chatの一部でカスタマイズ項目を増やすために変更が入りました
そのため過去一部コメントのみ左右逆側に出すCSSが動作しなくなっている可能性があります
ここでは一部コメントのみ左右逆に表示するCSSを掲載します
```auto
[data-service="youtube"] .avatar {
margin-left: 20px;
margin-right: 0;
}
[data-service="youtube"] .name {
text-align: right;
margin-left: 0;
padding: 4px 0 0 16px;
}
[data-service="youtube"] .comment-block {
flex-direction: row-reverse;
}
[data-service="youtube"] .comment-body {
margin-left: 0;
margin-right: 24px;
border: 3px solid var(--lcv-border-color);
border-right: none;
border-radius: 8px 0 0 8px;
}
[data-service="youtube"] .comment-body::before {
border-left: none;
border-right: 3px solid var(--lcv-border-color);
right: auto;
left: 100%;
border-radius: 0 8px 0 0;
}
[data-service="youtube"] .comment-body::after {
border-left: none;
border-right: 3px solid var(--lcv-border-color);
left: 100%;
right: auto;
border-radius: 0 0 8px 0;
}
[data-service="youtube"] .comment-text::before {
left: auto;
right: -42px;
-webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMCwxNGwwLC0xNGw4LjAzMSwtMGwxOC44ODgsMTRsLTI2LjkxOSwtMFoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvc3ZnPg==') no-repeat 50% 50%;
mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMCwxNGwwLC0xNGw4LjAzMSwtMGwxOC44ODgsMTRsLTI2LjkxOSwtMFoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvc3ZnPg==') no-repeat 50% 50%;
}
[data-service="youtube"] .comment-text::after {
left: auto;
right: -46px;
-webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOCAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMS43NDMsMS41NzFsMi45MiwtMGMtMCwtMCAxMC4wODEsNi45MiAxMy41ODgsOS41MjNjMi40MzcsMS44MDggOC4zNCw1LjgxIDcuNzAzLDYuMjE3Yy0wLjY2OCwwLjQyOCAtMy44NzIsMC4zNiAtNS41MDYsMC4zNmMtMS4xNCwwIC0xOC42OCwtMC4xIC0xOC42OCwtMC4xIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDozcHg7Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOCAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMS43NDMsMS41NzFsMi45MiwtMGMtMCwtMCAxMC4wODEsNi45MiAxMy41ODgsOS41MjNjMi40MzcsMS44MDggOC4zNCw1LjgxIDcuNzAzLDYuMjE3Yy0wLjY2OCwwLjQyOCAtMy44NzIsMC4zNiAtNS41MDYsMC4zNmMtMS4xNCwwIC0xOC42OCwtMC4xIC0xOC42OCwtMC4xIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDozcHg7Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
}
```
上記の例では `[data-service="youtube"]` としてYouTubeのコメントだけ右側に表示するようにしています
### その他の条件例
`[data-service="youtube"]` の部分をすべて例のように置き換えることで条件を変更できます
特定のユーザーだけ
```auto
[data-service="わんコメ犬アスティ"]
```
配信者だけ（一部配信サイトでは非対応）
```auto
[data-owner="true"]
```
特定の枠名だけ（わんコメでつけている枠の名前）
```auto
[data-service-name="コラボ相手枠"]
```
ギフトだけ
```auto
[data-gift="true"]
```
---
### Author:  [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)
#### Post date: [2024 年 4 月 26 日午前 8:13 UTC](https://forum.onecomme.com/t/topic/1260/2 "2024-04-26T08:13:00Z")
こんにちは、現在わんコメPRO版 5.2.0-beta.50 で pop-chat を使用しています。
視聴者のチャットをそのまま左側に、配信者のチャットを右側に反転させるために、上記 CSS [data-service=“youtube”] の部分を [data-owner=“true”] に置き換えています。
今まで使用していた pop-chat を pop-chat right ベースにして、視聴者のチャットを左側に反転させ、配信者のチャットをそのまま右側に表示させたいと思っています。
CSS を触ってみたのですが上手くいかなかったので、pop-chat right をベースにする場合は、CSS の部分をどの様に置き換えればよろしいでしょうか？
よろしくお願いいたします。