【streamlabs】CHAT BOXでカスタムフォントを使ってみる

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

今回はstreamlabsでオーバーレイチャットで表示させるカスタムフォントを使ってみたいと思ったので記事に残します
結構参考になった記事もあったのでそちらも参照しながら、この記事を閲覧してもらえるとうれしいです

また、xsplitやOBSでも使えまする
なのでカスタムフォントを使いたいって方は必見です

ところわしの環境は今現在Xsplitを使っているのでXsplitを使って説明していく

自前のフォントを用意してカスタムフォントにしてみよう(準備編)

streamlabs(以下ストラボ)ではデフォでテーマが5種類有ります
中では一番オススメしたいのが「Boxed」です
これは名前がコメントの上にあり、名前とchat部分が別括りになっているので個人的には一番オススメです
※少しCSSをいじっているため名前の部分が大きくなっていますが、デフォでは小さいです

カスタムフォントをする上で参考にした記事があるので先にリンクを貼っておきます

Boxed」の調整する上で参考にした記事。というよりパクry

 

カスタムフォントを使う上で参考にした記事をパクry

ではではカスタムフォントを導入してみよう(本編)

手順を箇条書きで

  1. streamlabsにアクセス
  2. chatboxのカテゴリにGO
  3. Enable Custom HTML/CSS→Enableにチェックする

手順3のEnable Custom HTML/CSSのところを編集する作業

1.有効にしたらしたの部分にcodeがあると思うので「CSS」のところをクリック

2.んでもって下記にchat boxに使うためにコードを張っておきます※上記のコード少しいじっております。気に食わない方は自分で調整してください
とりあえず黙ってコピペしたほうが身のためです

3.んでもってxsplitにチャットのオーバーレイを出すためのURLがあるのでそれをxsplitに表示させる

4.xsplitにチャットのオーバーレイを出したら、カスタムCSSのところに「チェックマーク」を付けて「CSSを編集」してあげる。ここもとりあえず黙ってコピペする幸せになれます

チャットカラーを変えたければ、「color: #ffffff」のところを調整してあげるとチャットカラーを変更することができる

 

5.ネームカラーを変えたければ以下のところのコードを変更すると色を変更することができる

ここ少し補足します

  1. 「font-size: 1em;」←pxでも指定可能
  2. 「color:3190b6;」←ここでネームカラーを変更できる
  3. 「text-transform: none;」←これは後で説明する
  4. 「font-weight: 700;」←縁を太くするか補足するか

詳しい色のコードは以下のサイトで

・「text-transform:」について軽く説明する

  • 「none;」記述した通りに表示。これが初期値です
  • 「capitalize;」単語の先頭文字を大文字で表示します。
  • 「lowercase;」全てを小文字で表示します。
  • 「uppercase;」全てを大文字で表示します

これは自分で調整してみてください

 

※OBSではブラウザーソースで上記のことがCSSを指定することができるのでやってみてください

できてるか確認する

わしはクラ風フォント+を使っています

クラ風フォント+を使いたいあなた!買ってください!安いです

クラ風フォント+の作者のtwitter

 

スポンサーリンク

-Mixer, Twitch, youtube, ストリーミング配信関連
-, , , , , , ,