配信オーバーレイ関係

【ミルダム】ツール不要!コメントを背景透過(オーバーレイ)する方法「備忘録」

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

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

前回紹介した「【Mildom】配信画面にコメントを透過(オーバーレイ)表示させる方法」ではコメビュを使っての配信画面にコメントを載せる方法だったが、今回は配信ソフトでも使われているCSSを使っての配信画面にコメントを載せる方法の備忘録

配信ソフトは以下のものを指す

有名な配信ソフト

  • Xsplit
  • OBS

そして、両方の配信ソフトを使ってCSSを用いてのやり方です

各配信ソフトで配信画面にコメント透過させる方法

これから説明する上で配信ソフト2つを使って書いていく

  • Xsplit
  • OBS

手順として、

  1. OBS
  2. Xsplit

の順番で書いていく

 

そして事前に以下のURLをコピペしておくこと

https://www.mildom.com/popout/chat/[ユーザーID]

 

最後に以下のコードをコピーする

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Sans+KR&family=Noto+Sans&display=swap");

/* ヘッダーの消去 */
.chat-panel--has-anounce { padding-top: 0px; padding-bottom: 0px }
.chat-panel__header { display: none }
.pay-message-edit { display: none }

/* フッターの消去 */
.chat-panel__footer-container { display: none }
.chat-panel___mention-follow-panel { display: none }

/* フォントの変更 */
html, body, #root { font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif; }

/* フォントのサイズ変更と縁取り */
.message-list-container>.message-list {
font-size: 17px;
text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
}
.content { font-size: 17px !important; } /* プレミアムコメントのフォントサイズ(本文) */
.coin { font-size: 14px !important; } /* プレミアムコメントのコインのフォントサイズ */

/* 左寄せ */
.ReactVirtualized__Grid__innerScrollContainer>div { padding: 0px 0px !important; }
.chat-panel { border: none }

/* レベルの非表示(表示させる場合は下記一行を削除) */
.chat-panel .level { display: none }

/* 背景透過 */
.nono-dark-theme .message-list-container { background: transparent !important; }
.nono-dark-theme .common-background-color { background-color: transparent }
.nono-dark-theme .chat-panel { background-color: transparent }

OBSを使ったカスタムCSS

step
1
OBSのブラウザソースを使う

step
2
ブラウザソースにCSSとURLを貼る

簡単な流れ

  1. URLに「https://www.mildom.com/popout/chat/[ユーザーID]」を貼る
  2. カスタムCSSにこちらのCSSコードを貼る

Xsplitを使ったカスタムCSS

step
1
ブラウザソースにURLを貼る

step
2
CSSにチェック入れる

step
3
CSSコードを貼る

簡単な流れ

  1. URLに「https://www.mildom.com/popout/chat/[ユーザーID]」を貼る
  2. カスタムCSSにこちらのCSSコードを貼る

まとめ

これでコメビュを使わずに配信ソフト上のカスタムCSSだけで配信画面にコメントを載せることができる

ちなみに上記のコードはこちらのブログから参考にさせてもらったので感謝して使わせてもらいます

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

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

AkaMaruServer

ReinyaN

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

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

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

ReinyaN

ストリーマー活動してる「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.33-2/data/pear') in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11