2023.07.05現在更新停止中！以下のジェネレータをご利用ください。
ジェネレータを利用する
17LiveのコメントをOBSで表示する手順
作成：
BACKUP
イチナナ 17Live
協力：
片桐マミ⛩️🔔🐾
イチナナ 17Live
おまけのキリ番ギフト計算機
http://backup2007.starfree.jp/17gift.html
おまけの課金と移行について
http://backup2007.starfree.jp/17GiftList.html
BACKUPに要望や匿名メッセージを送る
https://forms.gle/JN8H69pMGn9a69696
手順
完成形はこちら
以下の様に良い感じでOBSに17Liveのコメントが表示されるようになります。
また、コラボの際に相手枠のコメントを表示するなど、応用も効くかと思います。
1. ブラウザソースの追加
OBSを開き、ソースで「ブラウザ」を追加する。
2. ブラウザソースの設定
「URL」にコメントを取得したい配信のURLを張り付ける。
※幅と高さについては、幅対高さが2対3ぐらいになるようにしてください。
OBSに音声を再ルーティングするにチェックを入れる。
カスタムCSSに「2－1. カスタムCSSの設定」で解説したCSSをコピペする。
2－1. カスタムCSSの設定
①縦長配信の場合は以下のカスタムCSSを設定する。
縦長配信の場合のカスタムCSS。
body { background-color: rgba(0, 0, 0, 0)  !important; margin: 0px auto; overflow: hidden; }

.MobileBlock__MobileBlockRelativeWrapper-bziSJ {display: none;}
.Live__OverFlowHiddenContainer-kWnEQR {display: none;}
.Live__TopShadow-bUiich {display: none;}
.Live__ContentContainer-exTHxW {display: none;}
.Nav__NavRelativeWrapper-empriJ {display: none;}
.SuggestedPanel__PanelWrapper-fnDgsA {display: none;}
.FooterWrapper-wVyic {display: none;}
.Snackbars__SnackbarsWrapper-jMcqCx {display: none;}
.Live__Shadow-kQTDiu {background-color: transparent !important;}
.ChatListContainer-hgYdaF {background-color: transparent !important;}
.MobileChatList__ListWrapper-kRMrAH {background-color: transparent !important;}
.MobileChat__ChatWrapper-kQtXCh {background-color: transparent !important;}

.Container-ifeZxx {
    background-color: rgba(0,0,0,0);
}
.enpNxD {
    background-image:linear-gradient(rgba(40, 35, 45, 0), rgba(40, 35, 45, 0) 0%, rgba(40, 35, 45, 0));
}
.jiNCLS .MobileChatList__ListWrapper-kRMrAH {
    position: fixed;
    top: 1px;
    left: 1px;
    max-height: 99vh;
}
②横長配信の場合は以下のカスタムCSSを設定する。
横長配信の場合のカスタムCSS。
body { background-color: rgba(0, 0, 0, 0)  !important; margin: 0px auto; overflow: hidden; }

.MobileBlock__MobileBlockRelativeWrapper-bziSJ {display: none;}
.Live__OverFlowHiddenContainer-kWnEQR {display: none;}
.Live__TopShadow-bUiich {display: none;}
.Live__ContentContainer-exTHxW {display: none;}
.Nav__NavRelativeWrapper-empriJ {display: none;}
.SuggestedPanel__PanelWrapper-fnDgsA {display: none;}
.FooterWrapper-wVyic {display: none;}
.Snackbars__SnackbarsWrapper-jMcqCx {display: none;}
.Live__Shadow-kQTDiu {background-color: transparent !important;}
.ChatListContainer-hgYdaF {background-color: transparent !important;}
.MobileChatList__ListWrapper-kRMrAH {background-color: transparent !important;}
.MobileChat__ChatWrapper-kQtXCh {background-color: transparent !important;}

.Container-ifeZxx {
    background-color: rgba(0,0,0,0);
}
.enpNxD {
    background-image:linear-gradient(rgba(40, 35, 45, 0), rgba(40, 35, 45, 0) 0%, rgba(40, 35, 45, 0));
}
.MobileChatList__ListWrapper-kRMrAH {
    position: fixed !important;
    top: 1px !important;
    left: 1px !important;
    max-height: 99vh !important;
}
3. ハウリング対策の設定
ブラウザソースの「OBSに音声を再ルーティング」にチェックを入れていると、ブラウザソースに対する音声ミキサーの操作が出来るので、ミュートに設定する。
※これを設定しないと、指定したURLの17Liveの音声が流れる事になります。
4. 透過の設定
追加したブラウザソースのフィルタ設定を開く。
エフェクトフィルタにクロマキーを追加し、以下の画像の様な設定にする。
※各々微調整してください。
以上で設定が完了です！