配信オーバーレイ関係

【Streamlabs】webフォントで美しい?チャットオーバーレイにする方法

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

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

前回の日本語フォントを修正する方法の記事を書きましたが、今回紹介するのは「webフォント」を使って美しいチャットオーバーレイにする方法です
そんなに難しくないのでレッツトライ

ちなみに web font を使うとこんな感じにオーバーレイで表示されます

 

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

  • webフォントを使って美しく表示させたい方
  • 知り合いの配信者に共有したい方

Mixer,Twitch,YouTubeでもwebフォントが使える

Streamlabs にアクセスし、自分の環境に合わせてログインする
ログインすると、左側のカテゴリ欄から「All Widget」を選択肢から「Chat Box」をクリック

 

下の方にスクロールすると「Enable Custom」を Enable にし、CSS の一部コードを変換していきます

ポイント

  • Mixer
  • Twitch
  • YouTube

これ3つの配信サイトでも WEBフォント 使えるのでポイントだ!

では、実際にコード変換する作業に移るぞ

まずはじめに、使いたいWEBフォントをGoogleフォントから探してこよう

 

 

そして、今回変更するフォントは「ニコモジ」っていうフォントを使っていきます

HTMLコードとCSSコード

コピーするHTMLコード

https://fonts.googleapis.com/earlyaccess/nicomoji.css

コピーするCSSコード

font-family: "Nico Moji"

変更するコード場所

変更前

@import url(https://fonts.googleapis.com/css?family=Roboto:700);

* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: 'Roboto';
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}

赤マーカーが付いてるところ変更していくぞ

 

変更後

@import url(https://fonts.googleapis.com/earlyaccess/nicomoji.css);

* {
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: "Nico Moji";
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}

青マーカーのところが変更箇所

あとはお好みでフォントサイズや余白など各自設定してください
説明はここまで!

あとは保存するだけでOKです

OBSとXsplit側の設定

あとは簡単です
両方の配信ソフト側でブラウザソースに「ウィジェットリンク」を貼り付けて完了

まとめ

いかがですか?
ちょちょいのちょいってやつでしょ?
この記事を見ながらやれば出来たはずです

深く考えると頭が痛くなので、この記事をみながらやればできると思います

配信はTwitch(ツイッチ)で行っています。フォローよろしくお願いします

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

AkaMaruServer

ReinyaN

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

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

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

ReinyaN

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

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