Twitch同接抽出用CSS（12/1更新）

ゲスト

12/1　Twitchの仕様変更に対応できるようにCSS2つとも更新しました。
カスタムCSSの中身を入れ替えてトリミングすれば恐らく行けます。

/*以下同接色*/
.ScAnimatedNumber-sc-1iib0w9-0{
 color :#A00000
}

/*以下経過時間色*/
.live-time{ 
 color :black;
}

.ScAnimatedNumber-sc-1iib0w9-0,
.live-time{ 
/*以下フォント縁取り(px数変更して縁取りの太さ変更)*/
text-shadow:
 1px 1px 0 #ffffff, -1px -1px 0 #ffffff,
 -1px 1px 0 #ffffff, 1px -1px 0 #ffffff,
 0px 1px 0 #ffffff,  0-1px 0 #ffffff,
 -1px 0 0 #ffffff, 1px 0 0 #ffffff;
/*以下フォント種類*/
font-family: "メイリオ", sans-serif;
/*以下フォントサイズ*/
font-size: 80px !important;
/*以下フォント太さ*/
 font-weight :bold;
}

/*以下のコメントアウト解除で配信経過時間を消せます*/
/*.live-time,*/
/*.iJGqwF,*/
.ScHalo-sc-18imt3g-0,
.channel-root__player,
video,
.top-nav,
.wDxTQ,
.cbnNmC,
.persistent-player,
.elJsHR,
.bsRjSc,
.bbPHvU,
div#twilight-sticky-footer-root,
button,
.gqxDoL
{display:none !important;}

* {
background: transparent !important;
}

ソース「ブラウザ」のカスタムCSSに張り付けて使用してください。
「OBSを介して音声を制御する」にチェックを入れ、当ブラウザソースの音をミュートにしてください。

8/28追記：縁取りの太さ変更と配信経過時間の非表示方法をコード内に記載
同接アイコンはCSSで縁取りできないので別に画像を貼ってます。

画像を使わずCSSだけで同接アイコンを出したい場合は下記カスタムCSSを使ってください。


/*以下同接色*/
.ScAnimatedNumber-sc-1iib0w9-0{
 color :#A00000
}

/*以下経過時間色*/
.live-time{ 
 color :black;
}

.ScAnimatedNumber-sc-1iib0w9-0,
.live-time{ 
/*以下フォント縁取り(px数変更して縁取りの太さ変更)*/
text-shadow:
 8px 8px 0 #ffffff  , -8px -8px 0 #ffffff  ,
 -8px 8px 0 #ffffff  , 8px -8px 0 #ffffff  ,
 0px 8px 0 #ffffff  ,  0-8px 0 #ffffff  ,
 -8px 0 0 #ffffff  , 8px 0 0 #ffffff  ;
/*以下フォント種類*/
font-family: "メイリオ", sans-serif;
/*以下フォントサイズ*/
font-size: 80px !important;
/*以下フォント太さ*/
 font-weight :bold;
}



/*以下のコメントアウト解除で配信経過時間を消せます*/
/*.live-time,*/
/*.iJGqwF,*/
.ScHalo-sc-18imt3g-0,
.channel-root__player,
video,
.top-nav,
.wDxTQ,
.cbnNmC,
.persistent-player,
.elJsHR,
.bsRjSc,
.bbPHvU,
div#twilight-sticky-footer-root,
button
{display:none !important;}


* {
background: transparent !important;
}

.gqxDoL{
   width: 120px;
   height: 120px;
   box-shadow: inset 10em 10em #ffffff ;
    border-radius: 20px;
}


上記CSSを使うと同接は以下のように表示されます。

いいなと思ったら応援しよう！