CSSだけで各コメントの配信サイトのそれっぽい目印を表示!
(※下画像は「slim」テンプレート)
※上記画像では名前の手前に目印付いていますが、コメントの手前の表示にも対応しています。
下記サンプルコードではデフォルトで両方表示になっていますので、使わない方は「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:"M"; 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の背景色変更しました。
検索受け用キーワード
テンプレートのコメントに配信サイトごと(配信サイト別)に目印マークを表示