OBSブラウザソースだけで走者名のテキストを出す

twitch/multiplex

通常は「テキスト」で走者名、「ブラウザソース」で映像の2個を作る必要がありましたが、この方法だと「ブラウザソース」だけで映像も走者名も出せます。走者名にいい感じの枠も付きます。

• CSSで文字を縁取りする方法【太い縁でもキレイに表示】の工夫版を使っている
• strokeとtext-shadowは好みでいいと思うけど、画面が小さいとほぼ変わらないかも

やり方#

• OBSのブラウザソースで開いた誰かの配信のプロパティを開く
• カスタムCSSに下記をコピペする
• content: "しもの"; のところを編集して走者名を変えれます

stroke版#

• -webkit-text-stroke: 6px red; の red を #000 とかにするほうが綺麗だと思います。（ここでは分かりやすいように赤にした）

.root::before,
.root::after{
  content: "しもの";
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 0px;
  left: 8px;
  z-index: 9999;
  font-weight: bold;
}
.root::before{
  -webkit-text-stroke: 6px red;
}
.root::after{
  -webkit-text-stroke: 0;
}

text-shadow版#

.root::before,
.root::after{
  content: "しもの";
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 0px;
  left: 8px;
  z-index: 9999;
  font-weight: bold;
}
.root::before{
  text-shadow:  3px 3px 3px #000, -3px -3px 3px #000,
           -3px 3px 3px #000,  3px -3px 3px #000,
            3px 0px 3px #000, -3px -0px 3px #000,
            0px 3px 3px #000,  0px -3px 3px #000;
}
.root::after{
  text-shadow: 0;
}

• FrontPage(2950)
• game/apexlegends/s19frieze(1919)
• game/fortnite_lego(1132)
• game/zelda_sfc_randomizer(564)
• memo/mitene_gps(483)
• twitch/avater_lip_sync(480)
• memo/psp(459)
• twitch/multiplex/css(352)
• web(336)
• setting/ghub(294)

total: 352
today: 3
yesterday: 2
now: 1