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

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

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

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

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

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

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

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

目次

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

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

STEP
ダウンロードHPにアクセスする
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】

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

STEP
ダウンロードする
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】

ダウンロードをします。

STEP
OBSに設定して表示します。
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】

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

OBSで時計を表示する方法、【簡単解説料デジタルタイマー】
STEP
大きさやCSSを変更して自分好みに整えます。
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】
OBSで時計を表示する方法、【簡単解説料デジタルタイマー】

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

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

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

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

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

下記URLに移動します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「展開」を押します。

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

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

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

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

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

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

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

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

clock01

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

clock02

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

clock03

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

clock04

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

clock05

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

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

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

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

OBSを開いてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

雑談配信

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

ゲーム配信

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 #カラーコード; /* 線の色 */
}

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

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

原色大辞典 OBSの時計の色変更を自由に変更したい

色ごとに「#~~」と表示されています。

原色大辞典 OBSの時計の色変更を自由に変更したい

黒だったら「#000000」なので、先ほどの「#カラーコード」の部分を「#000000」に置き換えれば色を黒に変更できます。

お好みの色を選び置き換えてみてください。

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

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

「OBSで時計の表示方法」を紹介しました!

時計を設置したい人の役にたてば嬉しく思います。

カスタマイズ方法も「文字色:白、背景色:黒」などは必要な人も多いかも?

是非コピペして使ってみてくださいね!

他の時計も発見したので是非見てみてください!

OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】

配信用デジタル時計としてグラデーション時計・カラー時計・シンプルな時計が配布されています。

設定もとても簡単で自分の好みに簡単にカスタマイズができます。

【OBS配信用時計】グラデーション時計

OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】
OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】

【OBS配信用時計】カラー時計

OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】
OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】

【OBS配信用時計】シンプル時計

OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】
OBSの時計でグラデーション時計・カラー時計を配信画面に簡単表示【配信用デジタル時計】

▼配信用デジタル時計
https://ruri.info/tool/clockcreate

OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock – OBS用時計ジェネレーター】

OBSの時計で透過も簡単にできるOBS-clock – OBS用時計ジェネレーター。

【OBS配信用時計】透過も簡単OBS-clock – OBS用時計ジェネレーター

一例を紹介します。

OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】
OBSの時計で透過も簡単!配信画面に色々なデジタル・アナログ時計を表示!【OBS-clock - OBS用時計ジェネレーター】

他にもたくさんあるので是非見てみてくださいね♪

▼OBS-clock – OBS用時計ジェネレーター
https://pigeon-system.com/obs-clock/

https://www.amazon.co.jp/gp/video/storefront?benefitId=default&tag=norinori0107-22

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ギタリストとして活動する中、1人でほぼ初海外で世界一周の旅に出る。帰国後演奏しながら株式会社を立ち上げ経営。役に立てることが嬉しいと思う性格。ブログのアクセスは月34万PV達成!累計1200万PV達成。 ミルクティーとフルグラと犬が好きです。

コメント

コメント一覧 (9件)

コメントする

目次