配信オーバーレイ関係

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

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

前回紹介した「【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だけで配信画面にコメントを載せることができる

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

ミルダムのコメント欄をYouTubeみたいにOBSで透過させる | プテラたかはしファンサイト(非公式)
ミルダムのコメント欄をYouTubeみたいにOBSで透過させる | プテラたかはしファンサイト(非公式)

① ミルダムのコメント欄は以下のURLからポップアウトできます ユーザーID] ② OBSのソースに「ブラウザ」を追加し ...

続きを見る

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

ReinyaN

Mixerで活動してる配信者&オフィシャルパートナーを勤めています「ReinyaN」です ゲーム配信を主に流しています

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

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

ReinyaN

Mixerで活動してる配信者&オフィシャルパートナーを勤めています「ReinyaN」です ゲーム配信を主に流しています

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

Copyright© AkaMaruServer , 2021 All Rights Reserved.