OBSで時計を載せる方法｡色変更などのカスタマイズcssも紹介(コピペでOK｡htmlいらず)【徹底解説で初心者でも簡単に無料デジタルタイマーを表示】

2023年4月1日2023年7月9日

雑談配信やゲーム配信で時計が表示されているのを見たことがあり、「あれは便利そう。どうやって表示したんだろう？」と思ったことはありませんか？

僕も思ったことがあり、探して自分の放送にてOBSで設定をし表示をしてみました。()

OBSで時計を載せる方法｡色変更などのカスタマイズcssも紹介(コピペでOK｡htmlいらず)【徹底解説で初心者でも簡単に無料デジタルタイマーを表示】

今回は「OBSで時計の表示のやり方」を紹介します。
画像多めで徹底解説をするので書かれている通りにやれば簡単に時計を表示することが出来ます。

時計はいくつも種類があるのでお好みの時計を設置してください。

また僕が使用した色変更などのカスタマイズcssもコードをそのまま紹介します。
コピペをしてもらえれば同じ設定にすることができます。お試しください！

参考になればとても嬉しいです！

OBSで時計を表示する方法【簡単解説料デジタルタイマー】

OBSで時計を表示する方法の手順を超簡潔に紹介してから、その後徹底的に分かりやすく解説します。

STEP

ダウンロードHPにアクセスする

下記URLの配信者向け　OBS用デジタル時計 HPにアクセスをします。
https://stock.mooncape.net/others/30/

STEP

ダウンロードする

ダウンロードをします。

STEP

OBSに設定して表示します。

OBSにて設定をして表示します。

STEP

大きさやCSSを変更して自分好みに整えます。

大きさや色を好みのものに変更。

ダウンロード方法、OBSでの設置方法、カスタム方法をしっかりと画像付きで解説するので設定が苦手な人でも安心して時計を表示できるかと思います。

ここから詳しく解説していきます♪

OBSで時計を表示するために｢配信者向け　OBS用デジタル時計｣をダウンロードをする

まず一番最初にOBSで時計を表示するために｢配信者向け　OBS用デジタル時計｣をダウンロードをします。

下記URLに移動します

▶ 配信者向け　OBS用デジタル時計

mc-stock

配信者向け　OBS用デジタル時計

リンク先に進むと次のような画面が表示されます。

この画面が出てきたら次に進みます。

OBSで時計を表示するために｢配信者向け　OBS用デジタル時計｣をダウンロードをする

｢配信者向け　OBS用デジタル時計｣のページに「ダウンロード」の項目まで下に移動します。

ダウンロードをクリックをして時計の素材をダウンロードをします。

ダウンロードをクリックをするととどこに保存するかを選択する画面が出てきます。

自分の好きな場所に保存をしてください。

OBSで時計を表示するために｢配信者向け OBS用デジタル時計｣のフォルダを解凍するダウンロードをする

ダウンロードが完了したら先程保存する場所を指定したフォルダを開きます。

フォルダは圧縮されているのでフォルダを右クリックして「すべて展開」を選びます。

「展開」を押します。

すべて展開を押すと中にあったフォルダが表示されます。

OBSで時計を表示するためにダウンロード･展開したフォルダ内のファイルを開いてみる

OBSで時計を表示するためにダウンロード･展開したフォルダ内の素材ファイルを開いてみます。

フォルダを開くと5つの素材ファイルが入っています。

この素材はあとでOBSしますが、ダブルクリックをして確認をしてみましょう。

clock01

clock02

clock03

clock04

clock05

これらの素材を使ってOBSで時計を表示させます。

OBSで時計を表示する設定方法｡URLを使わずに簡単表示。

OBSにてで時計を表示する設定をします。

OBSを開いてください。

ソース部分を操作します。

ソースの「+」をクリック、または右クリックをします。

「ブラウザ」を選択します。

ブラウザを押すと下の画像が表示されるので､新規作成を選び自分の好みでソース名を付けてください。（今回は「デジタル時計」とつけました）

次にブラウザの設定をします。

OBSで時計を表示するためブラウザの設定

OBSのソースのブラウザでの設定をします。

ブラウザを作成するとこの画面が出てきます。（出ない場合はブラウザをダブルクリック）

真ん中の部分に注目をします。

上にある「ローカルファイル」を左クリックをしてチェックを入れます。

「URL」と表示されていた部分が「ローカルファイル」に切り替わります。

次に右側にある「参照」をクリックします。

「参照」をクリックすると「どのファイルを使うか」の選択をします。

ダウンロードしたページを開きお好みのclockを選択してください。（今回clock01を選択）

「ローカルファイル」の部分に文字が表示されたので、右下にある「OK」を押します。

OBS初期画面に戻り､時計が表示されました。

これでOBSで時計を表示することが出来ました！

時計を好きな位置に移動してお使いください。

表示はこれで終わりですが、サイズ変更の方法、色変更などのカスタマイズ方法も紹介します！

OBSの時計の大きさ･サイズ変更の方法、余白部分の切り取り方法

OBSの時計を表示して気付くのが無駄に大きいということでした。あまりに大きいと他の表示する部分を邪魔してしまいます。

余白部分の切り取り方法を紹介します。

OBS上の画像には四角の角や真ん中に「■」の部分があります。
ここをクリックしながらマウスを動かせば大きさの増減が可能です。

増減だけだと余白の切り取りは出来ないので「■」の部分をキーボードの「Altを押しながら」動かしてください。
すると余白部分の縮小ができます。

他の邪魔な部分も同じように縮小をします。

これで時計の邪魔な余白を削れました。あとは好きな場所に配置をしてくださいね♪

画像の四済の角をクリックしながらマウスを動かすと大きくも小さくもできます。これもお好きなサイズに調整してくださいね。

他の時計だと日付無しのもあるのでそれもお試しください。

OBSの時計の色変更のカスタマイズ。カスタムCSSにコピペで簡単！

僕も配信で時計を表示しました。　実際の画面がこちらです。

■ 雑談配信

■ ゲーム配信

この二つはどちらも色変更をしています。

この色変のOBSのカスタムCSSでコードを入力すれば変更可能です。

「カスタムCSSってなに？」
「なんか難しそう」

と思うかもしれないですがご安心を！

僕が使っているコードをそのまま紹介するのでコピペで同じようにできます！

文字色:黒、背景色:アリスブルー

まず雑談配信で使用している時計はダウンロードした「clock02」です。

通常は文字色は黒ですが背景色がグレーとなっています。

雑談では白背景にしているため、白寄りの背景色:アリスブルーにしました。真っ白だと背景と同じ過ぎてさりげなさ過ぎたため。

カスタムCSSはこちらです。

body{
color: #カラーコード; /* 文字の色 */
}
.nowtime{
background: #f0f8ff; /* 背景の色 */
}
#time{
border-bottom: solid 2px #カラーコード; /* 線の色 */
}

上記コードをコピーして時計ブラウザのカスタムCSSにペーストします。

コピペしたら右下の「OK」を押せば終わりです！

文字色:白、背景色:黒

ゲーム配信では背景が黒のため初期設定とは真逆の文字色:白、背景色:黒に設定しました。

こちらのコード

body{
color: #ffffff; /* 文字の色 */
}
.nowtime{
background: #000000; /* 背景の色 */
}
#time{
border-bottom: solid 2px #000000; /* 線の色 */
}

こちらを先程と同じOBSブラウザのカスタムCSSにコピペをすれば完了です！

OBSの時計の色変更を自由に変更したい

僕が使用しているカスタムCSSを紹介しましたが「別の色に変更したい」と思う方のためにも色変更の方法を紹介します。

clock01～05までそれぞれにコードが設定されており、その中の一部を変更すれば自分仕様にカスタマイズが出来ます。

body{
color: #カラーコード; /* 文字の色 */
}
.nowtime{
background: #カラーコード; /* 背景の色 */
}
#live{
color: #カラーコード; /* LIVEの文字色 */
border: solid 2px #カラーコード; /* LIVEの枠線 */
}
#time{
border-bottom: solid 2px #カラーコード; /* 線の色 */
}

body{
color: #カラーコード; /* 文字の色 */
}
.nowtime{
background: #カラーコード; /* 背景の色 */
}
#time{
border-bottom: solid 2px #カラーコード; /* 線の色 */
}

body{
color: #カラーコード; /* 文字の色 */
}
.nowtime{
background: #カラーコード; /* 背景の色 */
}

body{
color: #カラーコード; /* 文字の色 */
}
.nowtime{
background: #カラーコード; /* 背景の色 */
}
#live{
color: #カラーコード; /* LIVEの文字色 */
}
#bolt{
fill: #カラーコード; /* 雷マークの色 */
}

この「#カラーコード」と書かれている部分を変更すれば色変更ができます。

カラーコードはよく使用させていただいている「原色大辞典」さんを使いながら紹介します。