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

カスタマイズ
1

カスタマイズを考える際のヒントになればという事で、「こうしたらこういうことができるよ」みたいなのの情報共有用にトピックを立てました。

本トピックに投稿いただく際は他の方が見つけやすいように、検索されそうなワードを併記していただけますと幸いです。

「いいね！」 1
2

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

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

image
image1231×696 141 KB

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

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

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

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

image
image507×682 52.5 KB

※上記画像では名前の手前に目印付いていますが、コメントの手前の表示にも対応しています。
下記サンプルコードではデフォルトで両方表示になっていますので、使わない方は「display:none」してください。

/* 共通のスタイル、名前の前とコメントの前両方同時に設定 */
.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の背景色変更しました。

検索受け用キーワード

テンプレートのコメントに配信サイトごと（配信サイト別）に目印マークを表示

4

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

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

～～以下、私の方での使用例です～～
カスタマイズしていますが、ベースのテンプレートは「basic」を使用しています。
image
枠名「#YouTube」でLofi Girlさんのラジオのコメントを取得しました。
→ lofi hip hop radio :books: - beats to relax/study to - YouTube
枠名「#YouTube」を除外して、コメントテスターからの投稿にだけ枠名が表示されています。

.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;
}