配信オーバーレイ関係

【時計・時刻】シンプルが好きな人向けのオーバーレイ

#17LIVE #PR

雑談なら17LIVE

17LIVEのアプリのDL先はこちら

筆者もここで活動しているよ!

掲載期間 2022年3月22日(火)~2022年4月30日(土)

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

今回はシンプルに時間(時刻)表示したい人の記事になります

とりあえずとてもシンプルです

 

また、当ブログではスクリプト(OBS)だけで時刻表示できる記事も上げています。参考にどうぞ

932view
【OBS】簡単に現在時刻表示ができるスクリプトを紹介

今回はスクリプトで簡単に現在時刻を表示できる「luaスクリプト」を紹介します スクリプトの導入方法については以下の記事を ...

続きを見る

他にも、色んな時計時刻表示ができる記事を上げていますが、今回はこの記事だけ紹介しておきます

 

ReinyaN
しかし、スクリプトを導入するのはめんどくさい。そんなめんどくさいことはしたくない。とりあえずシンプルに時計を表示させたい!

というひとは、数回の作業だけで時刻表示をするやり方を紹介しておきます

それから、OBSユーザーが圧倒的に多いので、OBSを使っての説明をしていきます

Xsplitを使っている人は、デフォルトのテキスト機能で時刻表示ができるので、Xsplitユーザー向けには書きません

 

それでは、サクッと記述していきます

 

時刻を表示する方法

参考にしたブログを先に載せておく

OBS ♪ 自家製でリアルタイム(時刻)を表示する。|おもに株価のメモ
OBS ♪ 自家製でリアルタイム(時刻)を表示する。|おもに株価のメモ

あああああ

memobe.blog.fc2.com

 


  • step.1

    最初にテキストファイルと作成しておく

    1. 右クリック
    2. 新規作成を選択
    3. テキストドキュメントを選択



  • step.2

    コードを記述する。以下のコードを参考にする

    コードを記述したら、名前をつけて保存する※ファイル名は「time.html」にする

    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>時計</title>
    6. <script>
    7. var clock = function()
    8. {
    9.   var t = new Date();
    10.   var h = ( "0" + t.getHours() ).slice( -2 );
    11.   var m = ( "0" + t.getMinutes() ).slice( -2 );
    12.   var s = ( "0" + t.getSeconds() ).slice( -2 );
    13.   document.getElementById( "time" ).innerHTML = ( h + ":" + m + ":" + s );
    14. }
    15. setInterval( clock, 1000 );
    16. </script>
    17. <style>
    18. body {
    19.   padding : 0;
    20.   margin : 0;
    21.   background-color : black;
    22. }
    23. div#time
    24. {
    25.   font-size : 50px;
    26.   font-family : "游ゴシック";
    27.   color : white;
    28.   padding : 50px;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <div id="time">時計</div>
    34. </body>
    35. </html>

    引用元:OBS ♪ 自家製でリアルタイム(時刻)を表示する。 より

    スタイルに関しては好みで調整すること。以下の画像の番号17~30までの間でスタイルを変更することが出来る



  • step.3

    配信ソフト(今回はOBSに)「time.html」のファイルをドラッグ・アンド・ドロップして、時刻を表示させる
    ※ブラウザソースでファイル出来ますが、正直めんどくさいのでファイルをドラッグ・アンド・ドロップしたほうが楽です

    あとはソースをプロパティして幅と高さを調整するか、ALTキーを押しながらソースの調整をする


  • step.おまけ

    「time.html」のファイルを直接修正するのは正直手間がかかるので、急にCSSを調整したくなった時に、ブラウザソース内で調整も可能です

    ここに注意

    ブラウザソースでCSSを調整する場合「 background-color : black;」のところを調整してもバックグラウンドカラーは調整出来ないので注意が必要。

    その場合は、htmlファイルを直接修正すること

    HTMLカラーコードが詳しく載っているサイトがあるので載せておきます

    原色大辞典

    背景を抜きたい場合はフィルター機能でクロマキー機能で背景を抜くこと



 

全部調整するとこんな感じ

 

この他にも、まとめ記事を上げているので合わせて読んでみてください

35view
【オーバーレイ】配信で使える時刻・時間の配信素材のまとめ記事
【オーバーレイ】OBS、xsplitの配信で使える時刻・時間の配信素材のまとめ記事

  配信で使える配信素材「時刻・時間」のまとめ記事になります 今まであげた記事を一気にこの記事にまとめているの ...

続きを見る

 

 

まとめ

シンプルなオーバーレイをシンプルにまとめようとしたのですが、思ったよりボリュームがでてしまいましたw

シンプルに解決したい人は今回紹介した時刻オーバーレイはオススメです。シンプル・イズ・ザ・ベスト!

 

では、なにかありましたら記事を上げます

 

サイト管理者のプロフィール

AkaMaruServer

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

関連記事とスポンサーリンク

  • この記事を書いた人
  • 最新記事

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

-配信オーバーレイ関係
-, , , ,


Warning: include(): Filename cannot be empty in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11

Warning: include(): Failed opening '' for inclusion (include_path='.:/opt/php-7.4.28/data/pear') in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11