# テンプレート表示アレンジ用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:** 1\
**Showing post:** 3

<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の背景色変更しました。

* * *

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

---

_[View the full topic](https://forum.onecomme.com/t/topic/746)._