【配信オーバーレイ】カウントダウンを表示するツールを紹介「ほげ作」

2022年4月13日

みなさんおはこんばんちは(＠ReinyaNchannel)です

配信をこよなく愛している者です。Twitchという配信サイトで活動しています。是非以下のからフォローお願いします

https://www.twitch.tv/reinyan_channel

前回紹介した記事「【配信オーバーレイ】シンプルな現在時刻！簡単導入」の作者のカウントダウンVerの紹介です

今回はシンプルに配信画面にカウントダウンを表示させる方法を紹介していきます

とある状況においてカウントダウンを表示させたい配信者もなかにはいるかと思いますので、その配信者の方々に参考になれば幸いです

今回オーバーレイを紹介するにあたって、使える配信ソフトは

Xsplit
OBS

この2点を重点的に書きますが、ほとんどの配信者はOBSを使っているのが現状なので、OBSで説明していきます

この記事はこんな方におすすめ

配信にカウントダウンを表示させたい
配信開始のシーンで使いたい

カウントダウンを配信画面に出す方法

では、OBSを使って説明していきます

まずはじめに作者「ほげ」のHPに飛び、そこから設定をしていきます

step.1

HPのリンクを貼っておくので飛ぶ

【MAC/Windows対応】OBSでカウントダウンの表示

OBS上でカウントダウンを表示したいがうまくいかない。特にMACでの収録でカウントダウン出し方はどうするか？これらのお悩 ...

warera.com

step.2

OBSのブラウザソースを使ってオーバーレイを出す準備をする
メモ
配信ソフト側のブラウザソースにURLを貼るだけ
- Xsplit＝「ソースの追加」→「ウェブページ」にWidge Linkを貼る
- OBS＝「ソースの＋」→「ブラウザ」にWidge Linkを貼る

step.3

以下の画像のURLをコピー

st-timeline-list text="step.4" myclass="" fontsize="" fontweight="bold" color="#9E9E9E" bgcolor="" center=""]

ブラウザソースにリンクを貼る

[/st-timeline-list]

step.5

カスタムCSSにCSSコードを記述

 CSSコード
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } body::-webkit-scrollbar { /* Chrome, Safari 対応 */ display:none;}