【OBS】あらゆるゲームで使える！超シンプルな勝敗カウンターの導入方法とカスタムCSS

OBS上で直接操作できて、配信画面にスッキリ収まる「勝敗カウンター」ツールのご紹介です。

元々はオーバーウォッチ（OW2）用に作成したツールですが、今回紹介する「カスタムCSS」を適用することで、ロールの文字などを消し、極限までシンプルな見た目に変更できます。
OWはもちろん、Apex LegendsやVALORANTといった他のFPSタイトル、格闘ゲーム、カードゲームの対戦企画など、純粋に「勝ち・負け」だけをカウントしたいあらゆる場面で大活躍します！

👉 すでに本体導入済みで、カスタムCSSだけコピーしたい方はこちら

1. カウンター本体の導入方法

まずはベースとなる「勝敗カウンター」をOBSに導入します。
導入手順や操作用URLについては、以下のメイン記事で詳しく解説していますので、まだ設定していない方はこちらを先にご覧ください。

🔗 【OBS】OW2の配信で使える勝敗カウンターツールの導入方法

💡 「タンク・DPS・サポート」の表記があるOW専用版を使いたい方へ
シンプルな数字だけではなく、元々のOWのロール表記（T/D/S）を残したままデザインを変更したい場合は、こちらのデザインカスタマイズ記事をご参照ください。

2. カスタムCSSの適用（シンプル化）

本体の導入が終わったら、OBSの「ブラウザソース（配信画面用）」のプロパティを開きます。
一番下にある「カスタムCSS」の欄に、以下のコードをすべてコピーして貼り付けてください。

/* --- フォントレンダリング最適化 --- */
body #tool-wrapper,
body #tool-wrapper * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* --- 全体: 文字色をほぼ白のグレーに統一 --- */
body #tool-wrapper,
body #tool-wrapper #display-ui,
body #tool-wrapper #displays-container,
body #tool-wrapper .display-row,
body #tool-wrapper .display-row * {
    color: #f0f0f0 !important;
}

/* --- T/D/S ロール表記を非表示 --- */
body #tool-wrapper #display-ui #displays-container .display-row .label {
    display: none !important;
}

/* --- グリッドをラベル無しに再調整（余白を最小化） --- */
body #tool-wrapper #display-ui #displays-container .display-row {
    grid-template-columns: auto auto auto !important;
    width: fit-content !important;
    margin-bottom: 2px !important;
    letter-spacing: 0px !important;
    column-gap: 0px !important;
    padding: 5px 10px 0px 10px !important;
    font-style: normal !important;
    font-size: 100px !important;
    line-height: 1 !important;
    text-shadow: rgba(0, 0, 0, 0.7) 3px 3px 6px !important;
    font-weight: 300 !important;
    font-family: 'Bahnschrift Condensed', 'Arial Narrow', Impact, sans-serif !important;
}

/* --- 勝敗数の幅を自動に（余白削減） --- */
body #tool-wrapper #display-ui #displays-container .display-row .w-num,
body #tool-wrapper #display-ui #displays-container .display-row .l-num {
    width: auto !important;
    letter-spacing: 0px !important;
    text-align: center !important;
}

/* --- スラッシュ(/) をハイフン(-) に変更 --- */
body #tool-wrapper #display-ui #displays-container .display-row .slash {
    font-size: 0 !important;
    width: auto !important;
    letter-spacing: 0px !important;
}
body #tool-wrapper #display-ui #displays-container .display-row .slash::after {
    content: '-';
    font-size: 100px;
    color: #ffffff !important;
    margin: 0 4px !important;
    position: relative !important;
    top: -10px !important;
    font-family: 'Bahnschrift Condensed', 'Arial Narrow', Impact, sans-serif !important;
    font-weight: 300 !important;
}

/* --- 背景・外枠の余白を文字サイズに合わせて縮小 --- */
body #tool-wrapper #display-ui {
    padding: 2px !important;
    width: fit-content !important;
}

body #tool-wrapper #displays-container {
    width: fit-content !important;
    line-height: 1 !important;
}