【無料オーバーレイ】FPS向け？時計、時刻を配信画面に出す方法「mooncape作」

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

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

• https://www.twitch.tv/reinyan_channel

今回紹介する時計のオーバーレイはシンプルな作者mooncape氏による作品です

OBS用とは書いてありますが、Xsplitでも使えます。

ReinyaN

現に筆者はXsplitを使っており、使えてます

また、前回紹介した

こちらの記事もありますので合わせて読んでみてください

配信画面に現時刻を出すのはアーカイブなどに有利です

初心者にも簡単に導入できるので是非この機会に配信画面に時計を出して配信してみるのも良いですね

では、今回はOBSを使って説明していきます。Xsplitを使っている人は上級者だと思うので省略します

FPSゲーム向け OBS（Xsplit）用デジタル時計のhtmlソース

記事の冒頭にも書いてありますが、OBSを使って説明していきますのでこの記事を見ながらやっていきましょう

まず先に作者の紹介をしていきます

紹介するリンクは以下の通り

BOOTH

BOOTHリンクはこちら

Twitter

Twitterはこちら

配布しているファイルは5種類

HTMLカラーコードを参考にしているサイトはこちら

OBSにデジタル時計を配信画面に出す方法

OBSにデジタル時計の出し方を説明していきます

• ソースにファイルを入れる

  HTMLファイルをドラッグ・アンド・ドロップでOBSに入れることが出来ます

  

  ---

• 時刻オーバーレイが追加されたことを確認

  時計のオーバーレイが追加されたことを確認する

  

  ---

• カスタムCSSの編集

  カスタムCSSのコードについてはこちらのコードを参照してください

  

  ---

• CSS編集をしたのがこちら

  

  ---

• 枠の色や装飾をしたのがこちら

  文字や背景などのCSSコードの参照はこちら

  

  ---

   カスタムCSSの内容
  body {color: #FFC107; /* 文字の色 */}
  .path01 {fill: #FFC107; opacity:0.3 /* 背景の色と透明度 */}
  .path02 {fill: #FFC107; /* 枠の色 */}
  .text{font-size:0;}
  .text:before{content:"OBS";
  font-size: 24px;
  }
  .text2{font-size:0;}
  .text2:before{content:"ストリーマー";
  font-size: 24px;
  }
  

ReinyaN

こんな感じに配信画面に時計をカスタマイズしたりできます

少しでも配信を凝りたいのであればチャレンジしてみてください

ちょっとしたおまけ

配信などの遅延配信をするときに任意の時間を遅らせたり、早めたり表示したい場合とかってありますよね？

その場合に、HTMLコードを編集する手間はありますが、上記のようにやりとりをする場合もありますので、そのやり方を書きます

以下の作者のブログを参照しながらコードを追加してみてください

 html
// 編集前 const dt = dayjs(new Date());
// 現在時刻から10秒進める const dt = dayjs(new Date()).add(10, 's');
// 現在時刻から10分進める const dt = dayjs(new Date()).add(10, 'm');
// 現在時刻から1時間進める const dt = dayjs(new Date()).add(1, 'h');
// 現在時刻から10秒遅らせる const dt = dayjs(new Date()).subtract(10, 's');

今回は例として一秒早めてみます

 html

編集前：const dt = dayjs(new Date());
編集後：const dt = dayjs(new Date()).add(1, 's');

この他にも、時計に関する記事をあげているので合わせて読んでみてください

まとめ

今回は別の時計オーバーレイを紹介しました

他にも時計のオーバーレイがたくさんありますが、時間が出来次第また紹介したいと思います

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