# yurucampテンプレで特定ユーザーのみ反対にしたい

**URL:** <https://forum.onecomme.com/t/topic/287>\
**Category:** カスタマイズ\
**Created:** [2022 年 5 月 19 日午前 6:53 UTC](https://forum.onecomme.com/t/topic/287 "2022-05-19T06:53:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![uu\_uzuka](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/uu_uzuka/32/250_2.png) [@uu\_uzuka](https://forum.onecomme.com/u/uu_uzuka)\
**Post date:** [2022 年 5 月 19 日午前 6:53 UTC](https://forum.onecomme.com/t/topic/287/1 "2022-05-19T06:53:27Z")

</div>

対象: わんコメ  
表示画面: OBS  
利用OS: Windows10 64bit  
利用バージョン: わんコメ 3.1.0  
対象配信サイト: わんコメ対応のすべて  
過去ログ: 検索した

ドキュメントを確認して  
lineテンプレで特定ユーザーのみ逆にするCSSがあったのですが  
同じようなことをyurucampテンプレートでも可能でしょうか？

---

<div class="post-metadata">

**Author:** ![ASTIE](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/astie/32/58_2.png) [@ASTIE](https://forum.onecomme.com/u/ASTIE)\
**Post date:** [2022 年 5 月 19 日午前 7:03 UTC](https://forum.onecomme.com/t/topic/287/2 "2022-05-19T07:03:30Z")

</div>

ゆるキャン風テンプレに関してはLine風に比べやや複雑ですが可能です

\_\_origin/css/theme/yurucamp-right.cssというのがありますが、yurucampのcssにこのrightの内容を特定のユーザー名を付けたものにだけ適用すれば左右逆転することができます

下記はテストユーザーの例ですが、中身はyurucamp-right.cssに[data-user=“ユーザー名”]をつけただけのものです

```auto
[data-user='テストユーザー'] .avatar {
  margin-left: 20px;
  margin-right: 0;
}
[data-user='テストユーザー'] .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
[data-user='テストユーザー'] .comment-block {
  flex-direction: row-reverse;
}
[data-user='テストユーザー'] .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-user='テストユーザー'] .comment-body::before {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 8px 0 0;
}
[data-user='テストユーザー'] .comment-body::after {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 0 8px 0;
}
[data-user='テストユーザー'] .comment-text::before {
  left: auto;
  right: -42px;
  transform: scale(-1, 1);
}
[data-user='テストユーザー'] .comment-text::after {
  left: auto;
  right: -46px;
  transform: scale(-1, 1);
}
[data-user='テストユーザー'] .comment-enter-active .avatar,
[data-user='テストユーザー'] .comment-leave-active .avatar {
  transform-origin: 50% 100%;
}
[data-user='テストユーザー'] .comment-enter-active .comment-body,
[data-user='テストユーザー'] .comment-leave-active .comment-body {
  transform-origin: 100% 100%;
}

```

追記です  
rightをベースにしたい場合もyurucampの方を使って逆にする方が簡単です

下記はyurucampを使ってテストユーザー以外を右寄せにします

```auto
.comment:not([data-user='テストユーザー']) .avatar {
  margin-left: 20px;
  margin-right: 0;
}
.comment:not([data-user='テストユーザー']) .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
.comment:not([data-user='テストユーザー']) .comment-block {
  flex-direction: row-reverse;
}
.comment:not([data-user='テストユーザー']) .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-user='テストユーザー']) .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-user='テストユーザー']) .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-user='テストユーザー']) .comment-text::before {
  left: auto;
  right: -42px;
  transform: scale(-1, 1);
}
.comment:not([data-user='テストユーザー']) .comment-text::after {
  left: auto;
  right: -46px;
  transform: scale(-1, 1);
}
.comment:not([data-user='テストユーザー']) .comment-enter-active .avatar,
.comment:not([data-user='テストユーザー']) .comment-leave-active .avatar {
  transform-origin: 50% 100%;
}
.comment:not([data-user='テストユーザー']) .comment-enter-active .comment-body,
.comment:not([data-user='テストユーザー']) .comment-leave-active .comment-body {
  transform-origin: 100% 100%;
}

```

---

<div class="post-metadata">

**Author:** ![uu\_uzuka](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/uu_uzuka/32/250_2.png) [@uu\_uzuka](https://forum.onecomme.com/u/uu_uzuka)\
**Post date:** [2022 年 5 月 19 日午前 7:18 UTC](https://forum.onecomme.com/t/topic/287/3 "2022-05-19T07:18:57Z")

</div>

ありがとうございます！！  
無事できました！！😆

---

<div class="post-metadata">

**Author:** ![sikozon](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/sikozon/32/77_2.png) [@sikozon](https://forum.onecomme.com/u/sikozon)\
**Post date:** [2022 年 8 月 4 日午前 10:19 UTC](https://forum.onecomme.com/t/topic/287/4 "2022-08-04T10:19:48Z")

</div>

トピッククローズ：問題解決のため