千葉家の物置

{{pagename}} - {{sitename}}

千葉千夏

# 「Discord StreamKit Overlay」のカスタムCSSをアレンジしてみた

下記2つの中身を合体させた感じです。

- [大人数の配信時使うDiscordStreamKitOverlayのカスタムCSS](https://qiita.com/mikaduki0Vtuber/items/8a6cebf39e4370c034bc)
- [Discord StreamKit Overlay Sample](https://gungeespla.github.io/obs_discord_sample/)

## カスタムCSS（高さ140px想定）

ただおしゃべりしているところを流すのであれば、画面はそこまで大きくなくてもよさそうなので、これくらいで。

```
.avatar {
  height:100px !important;
  width:100px !important;
  border-width: 4px ! important;
  border-color: rgba(0,0,0,0) ! important;
  filter: brightness(50%);
}

.speaking {
  filter: brightness(100%);
}

li.voice-state{
 position: static;
 display: inline-block;
 width: 120px;
 height: 120px;
}
.user{
 display: inline-block;
}
span.name{
 display: inline-block;
 position: relative;
 bottom: 40px;
}

body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }
```

## カスタムCSS（高さ200px想定）

アプリの配信とかするならこのくらいの大きさになるのかなあ。

```
.avatar {
  height:160px !important;
  width:160px !important;
  border-width: 4px ! important;
  border-color: rgba(0,0,0,0) ! important;
  filter: brightness(50%);
}

.speaking {
  filter: brightness(100%);
}

li.voice-state{
  position: static;
  display: inline-block;
  width: 180px;
  height: 180px;
}
.user{
  display: inline-block;
}

span.name{
  display: inline-block;
  position: relative;
  font-size: 18px !important;
  bottom: 50px;
}

body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }
```

## 特定ユーザーのアイコンだけ非表示にする

「[大人数の配信時使うDiscordStreamKitOverlayのカスタムCSS](https://qiita.com/mikaduki0Vtuber/items/8a6cebf39e4370c034bc)」より。以下のCSSをカスタムCSSの頭につける。

```
/* 選択したユーザの画像を非表示にする */
li.voice-state[data-reactid$="ここにじぶんのID"] {
 display:none;
}
```

IDの出し方も引用。

> IDの出し方は
> 歯車マークの「ユーザー設定」→「テーマ」→「詳細設定」にある「開発者モード」をオンにしてIDを取得したいユーザーを右クリック
> 「IDをコピー」でIDとなる数字の羅列をコピーできます

