【配信者さん向け】OBS で配信画面に Timed Reactions を好きなサイズで好きな位置に表示させる方法！

obs-timed-reactions-css.md

🥒 Timed Reaction を配信画面に映す

https://youtube.com/shorts/FRvkoS0bwc0?feature=share
※ おそらくまだテスト中の機能のため、仕様が変わる可能性があります。

目次：

• 1. ライブリアクションをONにする
• 2. ブラウザソースを追加
• 3. YouTubeにログインする（初回のみ）
• 4. チャットを表示させる
• 5. カスタムCSSを設定する
• 6. 表示させたい位置に調整する
• 7. 💡 トラブルシューティング

1. ライブリアクションをONにする

1. 配信画面を開く
2. 「編集」ボタンを押下
3. 設定を編集ダイアログ内の「カスタマイズ」を押下
4. リアクション「ライブリアクション」チェックボックスをチェックする

または

1. チャンネル管理画面の「コンテンツ」から「ライブ配信」を開く
2. 設定を変更したい枠の「詳細（ペンのアイコン）」ボタンを押下
3. 左ナビから「カスタマイズ」を押下
4. リアクション「ライブリアクション」チェックボックスをチェックする

2. ブラウザソースを追加

1. ブラウザソースを追加する
2. YouTubeのトップページを指定する
3. 推奨：ブラウザソースを選択しながら「Ctrl + F」を押して全画面化しておく
4. デフォルトのカスタムCSSを 全部消しておく

参考

項目	値
URL	https://www.youtube.com/
幅	配信画面の横幅
高さ	配信画面の高さ
カスタムCSS	-

3. YouTubeにログインする（初回のみ）

1. ソース一覧から、追加したブラウザソースを選択（1回クリック）
2. 「対話（操作）」ボタンを押下
   
3. 画面内でYouTubeにログインする

※ すでにログイン済みの場合はスキップでOK
※ 画面が小さいときは「幅」を 500px とかにしておくと操作しやすいです！

4. チャットを表示させる

1. URLにチャットボックスのURLを指定する
2. 配信用アカウントでログインできていることを確認する

https://www.youtube.com/live_chat?v=*******

よくある間違い：https://www.youtube.com/live_chat?is_popout=*******

5. カスタムCSSを設定する

:root {
  /* アイコンの表示サイズ */
  --size: 200px;
  /* アイコンがふわふわ上る距離（3パターン。高さが 1080 なら 500px でだいたい半分くらいふわふわ～ ） */ 
  --custom-trans-vert01: -500px;
  --custom-trans-vert02: -400px;
  --custom-trans-vert03: -450px;
}

body{margin:0 auto!important;overflow:hidden!important}*{background:transparent!important}yt-live-chat-header-renderer,#chat-messages>#contents>*:not(#chat),#chat>*:not(#reaction-control-panel-overlay),#reaction-control-panel{display:none!important}#reaction-control-panel-overlay yt-emoji-fountain-view-model emoji.yt-emoji-fountain-view-model{width:var(--size)!important;height:var(--size)!important;top:calc(var(--size) * -1)!important;left:calc(var(--size) * -1 / 2)!important}@keyframes transVert01{50%{transform:translateY(calc(var(--custom-trans-vert01) / 2)) scale(1,1);opacity:1}100%{transform:translateY(var(--custom-trans-vert01)) scale(.5,.5);opacity:0}}@keyframes transVert02{50%{transform:translateY(calc(var(--custom-trans-vert02) / 2)) scale(1,1);opacity:1}100%{transform:translateY(var(--custom-trans-vert02)) scale(.5,.5);opacity:0}}@keyframes transVert03{50%{transform:translateY(calc(var(--custom-trans-vert03) / 2)) scale(1,1);opacity:1}100%{transform:translateY(var(--custom-trans-vert03)) scale(.5,.5);opacity:0}}

6. 表示させたい位置に調整する

通常は画面右下に表示されるので、ブラウザソースを動かしてお好みでどうぞ！

7. 💡 トラブルシューティング

Q. なんか動かなくなった！

動かなくなったときはログアウトされているかも？
カスタムCSSを削除してログインできてるかを確認しよう！

または仕様が変わってしまったかもしれない…

Q. コメントを表示させたいブラウザソースから Timed Reactions を消すには…？

カスタムCSSに以下を追記してください。

yt-live-chat-action-panel-renderer,
#reaction-control-panel-overlay {
  display: none !important;
}