バージョン5.0 - beta.90以降のpop-chatで一部だけ逆サイドに表示するCSS

beta.90でpop-chatの一部でカスタマイズ項目を増やすために変更が入りました
そのため過去一部コメントのみ左右逆側に出すCSSが動作しなくなっている可能性があります

ここでは一部コメントのみ左右逆に表示するCSSを掲載します

[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"] の部分をすべて例のように置き換えることで条件を変更できます

特定のユーザーだけ

[data-service="わんコメ犬アスティ"]

配信者だけ(一部配信サイトでは非対応)

[data-owner="true"]

特定の枠名だけ(わんコメでつけている枠の名前)

[data-service-name="コラボ相手枠"]

ギフトだけ

[data-gift="true"]
1 Like