# テンプレート表示アレンジ用cssシェア（投稿歓迎）

**URL:** <https://forum.onecomme.com/t/topic/746>\
**Category:** カスタマイズ\
**Created:** [2022 年 11 月 4 日午後 7:43 UTC](https://forum.onecomme.com/t/topic/746 "2022-11-04T19:43:19Z")\
**Posts on this page:** 4\
**Page:** 1

<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 年 11 月 4 日午後 7:43 UTC](https://forum.onecomme.com/t/topic/746/1 "2022-11-04T19:43:19Z")

</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 年 11 月 4 日午後 9:01 UTC](https://forum.onecomme.com/t/topic/746/2 "2022-11-04T21:01:13Z")

</div>

需要はさておき、わんコメアプリ上の枠名を表示するやつです。

```auto
.comment:before{
  content:"["attr(data-service-name)"]";
}

```

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/587c44ff6b94fe44b596ea54739de26eb70f1697.jpeg)

* * *

（追記）  
ちなみに「-name」を取ると配信サイト名表示になります。

```auto
.comment:before{
  content:"["attr(data-service)"]";
}

```

---

<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 年 12 月 10 日午後 1:30 UTC](https://forum.onecomme.com/t/topic/746/3 "2022-12-10T13:30:06Z")

</div>

# CSSだけで各コメントの配信サイトのそれっぽい目印を表示！

（※下画像は「slim」テンプレート）

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/1X/b23c679b3817f13b1a8453657a6f9e6713177d45.png)  
※上記画像では名前の手前に目印付いていますが、コメントの手前の表示にも対応しています。  
下記サンプルコードではデフォルトで両方表示になっていますので、使わない方は「display:none」してください。

* * *

```auto
/* 共通のスタイル、名前の前とコメントの前両方同時に設定 */
.comment-text:before , .name:before{
  display: inline-block; overflow: hidden;
  width:1.5em; height:0.95em;
  padding: 0.2em 0 0 0; margin: 0 0.2em 0 0;
  border:solid 0.1em black;
  font-size:0.75em; line-height: 0.75em;
  vertical-align: middle; text-align: center;
  font-weight: bold; text-shadow: none;
}

/* 表示切替用、使用しない方を「display:none」で非表示にできます */
.comment-text:before{display: inline-block;}
.name:before{display: inline-block;}

/* 以降は各サイト別の見た目を個別に設定しています。
（名前の前とコメントの前の両方分一括指定） */

.comment[data-service="youtube"] .comment-text:before ,
.comment[data-service="youtube"] .name:before {
    content:"YT"; color: white;
    background: red;
}
.comment[data-service="twicas"] .comment-text:before ,
.comment[data-service="twicas"] .name:before {
    content:"TC"; color: white;
    background: dodgerblue;
}
.comment[data-service="twitch"] .comment-text:before ,
.comment[data-service="twitch"] .name:before {
    content:"tw";
    color: white; background: blueviolet;
    font-weight: normal;
}
.comment[data-service="showroom"] .comment-text:before ,
.comment[data-service="showroom"] .name:before {
    content:"SR"; color: white;
    background: black;
}
.comment[data-service="bilibili"] .comment-text:before ,
.comment[data-service="bilibili"] .name:before {
    content:"bili"; color: dodgerblue;
    background: white;
    font-weight: normal;
}
.comment[data-service="mixch"] .comment-text:before , 
.comment[data-service="mixch"] .name:before {
    content:"ﾐｸ"; color: white;
    background: orangered;
    font-weight: normal;
}
.comment[data-service="mirrativ"] .comment-text:before ,
.comment[data-service="mirrativ"] .name:before {
    content:"Ｍ"; color: white;
    background: turquoise;
}
.comment[data-service="twitter"] .comment-text:before ,
.comment[data-service="twitter"] .name:before {
    content:"tw"; color: white;
    background: deepskyblue;
}
.comment[data-service="niconama"] .comment-text:before ,
.comment[data-service="niconama"] .name:before {
    content:"ﾆｺ"; color: black;
    background: white;
}

```

* * *

※添付画像以降にtwitchの背景色変更しました。

* * *

> **検索受け用キーワード**
>
> テンプレートのコメントに配信サイトごと（配信サイト別）に目印マークを表示

---

<div class="post-metadata">

**Author:** ![nagiRuma](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/nagiruma/32/679_2.png) [@nagiRuma](https://forum.onecomme.com/u/nagiRuma)\
**Post date:** [2024 年 2 月 25 日午前 9:49 UTC](https://forum.onecomme.com/t/topic/746/4 "2024-02-25T09:49:21Z")

</div>

こちら、コラボ配信で「コラボ相手の枠名だけ表示するため」に、  
指定した枠名の場合は表示しないように調整してみました。  
classを指定する時にnotで枠名を指定することで、その枠は表示の対象外になります。

```auto
.comment:not([data-service-name="#〇〇(除外したい枠名)"]):before{
  content:"["attr(data-service-name)"]";
}

```

**～～以下、私の方での使用例です～～**  
カスタマイズしていますが、ベースのテンプレートは「basic」を使用しています。  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/a/a6c47e8aa8ae71209a25b2fe058b270b5166e256.png)  
枠名「#YouTube」でLofi Girlさんのラジオのコメントを取得しました。  
→ [lofi hip hop radio 📚 - beats to relax/study to - YouTube](https://www.youtube.com/watch?v=jfKfPfyJRdk)  
枠名「#YouTube」を除外して、コメントテスターからの投稿にだけ枠名が表示されています。

```auto
.comment:not([data-service-name="#YouTube"]){
  position: relative;
  padding-top: 14px;
}
.comment:not([data-service-name="#YouTube"]):before{
  position: absolute;
  content:"["attr(data-service-name)"]";
  font-size: 18px;
  font-weight: bold;
  top: 0;
  left: 32px;
}

```