LoginSignup
0
0
@BoEo_stms(BoEo .stms)

Streamlabs Chat Box カスタムメモ

Last updated at Posted at 2024-01-07

動画配信でコメントを配信画面内に表示させたいときに便利な StreamlabsのChat Box。
好みのカスタム例が作れたので、備忘録としてメモ。
おくさん🐇に参考にしてもらうためのメモなので、HTML/CSS初心者～中級者向け。

動作確認： OBS / StreamlabsOBS / Google Chrome / Twitch

🤔今回カスタマイズしたいポイント

  • コメント投稿者の名前やバッジは非表示（匿名化）したい。
  • そのままではコメントが全て繋がって見えてしまうので、
    先頭にお好みの装飾を施す。 ➡::befor ::afterで。
  • 動画配信者(Moderator)を表す装飾も 独自に設定したい。
    moderatorのclassを使ってもいいけど、都合で複数の人に設定したかったので、投稿者のユーザーIDで指定。
  • コメント表示がオーバーして途切れるトップ部分をグラデーション状に透過させる。➡mask-image

🔗Chat Box 設定画面
https://streamlabs.com/dashboard#/chatbox

📋HTML/CSSコピペ用 全文

まずは HTML。
使用しない.name .badgeは削除してます。

<!-- item will be appened to this layout -->
<div id="log" class="sl__chat__layout">
</div>

<!-- chat item -->
<script type="text/template" id="chatlist_item">
	<div data-from="{from}" data-id="{messageId}">
		<span class="meta" style="color: {color}">
		</span>
		<span class="message">
			{message}
		</span>
	</div>
</script>

続いてCSS 全文。
カスタムポイントの説明は後述。

@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
*{box-sizing: border-box;}
html, body {
	height: 100%;
	overflow: hidden;
}
body {
	mask-image: -webkit-gradient(
		linear, left 20%, left top,
		from( rgba(0,0,0,1) ),
		to( rgba(0,0,0,0) )
	);
	-webkit-mask-image: -webkit-gradient(
		linear, left 20%, left top,
		from( rgba(0,0,0,1) ),
		to( rgba(0,0,0,0) )
	);
	background: {background_color};
	font-family: 'Kosugi',serif;
	font-size: {font_size};
	font-weight: 700;
	line-height: 1.5em;
	color: {text_color};
}
#log > div {
	animation:
		fadeInRight .3s ease forwards,
		fadeOut .5s ease {message_hide_delay} forwards;
	-webkit-animation:
		fadeInRight .3s ease forwards,
		fadeOut .5s ease {message_hide_delay} forwards;
}
#log {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
#log div {
  display: flex;
}
#log span {
	border: solid 1px rgba(255,0,0,0);
}
#log > div.deleted {
	visibility: hidden;
}
#log .meta,
#log .message {
	vertical-align: top;
	padding-bottom: 0.1em;
}
#log .meta {
	min-width: 32px;
	width: 32px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
#log .message {
	width: auto;
	word-wrap: break-word;
	text-shadow: #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px;
}
#log .emote {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 0.4em 0.2em;
	position: relative;
}
#log .emote img {
	display: inline-block;
	height: 1em;
	opacity: 0;
}

/* コメント先頭の装飾設定 */
#log .meta::after {
	content:'🌳';}
div[data-from="***MY ACCOUNT ID***"] .message {
	color: #CF0;}
div[data-from="***MY ACCOUNT ID***"] .meta::after {
  content:'🐏'!important;}
div[data-from="***ACCOUNT ID2***"] .message {
	color: #FD0;}
div[data-from="***ACCOUNT ID2***"] .meta::after {
  content:'🐇'!important;}

ここまで。
これ以降のソースコード説明は全てCSS。 HTMLについては説明を割愛します。

📌トップ部分のグラデ透過

どねるのチャットボックスの処理が良い感じだったので、参考にしました。
うちのChrome 及び OBSでは -webkit- が付いてるほうのみで動作確認。
image.png
【CSS】body{　}内に記述 (※-webkit-省略)

body {
	mask-image: gradient(
		linear, left 20%, left top,
		from( rgba(0,0,0,1) ),
		to( rgba(0,0,0,0) )
	);
}

mask-image 初めて知ったけどなんて便利な…ありがとう

🌳コメントの先頭に「絵文字」を付ける

#log .meta::after {
	content:'🌳';
}

シンプルにこれだけです。' または " で囲み忘れないようにね自分。

content 内に「┃」「■」などの文字記号を入れると、元々のnameランダムカラーが適用されて、カラフルオシャレになります。
記号を content:''; 空にして、その他CSS装飾だけ施すことももちろん可能。

この文頭装飾と、コメント文の すき間距離の調整 は…

#log .meta {
	min-width: 32px;
	width: 32px;
}

ここでお願いします（同じ数値で揃えてね）

🥳特定のユーザーに専用の装飾を付ける

div[data-from="ユーザーID"] で設定します。

div[data-from="自分のユーザーID"] .message {
	color: #CF0;}
div[data-from="自分のユーザーID"] .meta::after {
  content:'🐏'!important;}
div[data-from="他のユーザーID"] .message {
	color: #FD0;}
div[data-from="他のユーザーID"] .meta::after {
  content:'🐇'!important;}

先頭に付く絵文字と、コメント文字色を個別に設定しています。

!important 1 は絶対強制的にCSSスタイルを設定させる令呪で、3画などの制限もありませんが、
命じなくても希望の表示になるようなら画数が勿体無いので消してね。

🙍‍♂️コメントのユーザーIDについて

ユーザーIDは「Twitchでコメントした場合はTwitch IDそのもの」になるようですが、
Youtubeでコメントした場合 どうなるかは……ごめんなさい、チェックしていません…
ご利用の皆さん確認お願いいたします。
参考までに、私はTwitchアカウントでStreamlabsにログインしています。

💡ユーザーIDの調べ方

[data-from="ユーザーID"]を調べるには
Chrome・Firefoxならキーボードの 「F12」 開発者ツール → インスペクターツールを選択。
調べたいチャットにカーソルを当ててみてね。
image.png

:black_nib: 日本語対応Googleフォントを使用

今回は「Kosugiフォント」をチョイス。
Googleフォントの使い方は別途調べて頂ければすぐ分かると思いますが、
CSSの一行目に @import url(googleフォントで取得できるURL)

@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');

続いてbody{} .message{}など フォントを指定したい要素に

body {
	font-family: 'Kosugi',serif;
}

💬メッセージのテキストシャドウはお好みで

#log .message {
	text-shadow: #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px, #000 0 0 3px;
}

テキスト影つけを応用した縁取りの指定については割愛。
絵文字には既に縁取りがされているので、濃くなりすぎるのが残念。回避方法はいつか調べよう…
image.png

#log spanのborderは確認用 兼 表示崩れ対策

私の環境でのことですが、
カスタム途中にこの border がないと何故か vertical-align その他もろもろが崩れたので…
なくても崩れないようなら、以下は消してください。

#log span {
	border: solid 1px rgba(255,0,0,0);}

以上、自分用Chat Boxカスタマイズメモでした。
用途に合わせて随時変えたくなると思うので、新しいカスタムを作ったらまたメモを残していこうと思います。

  1. 昨今では非推奨の !important ですが、Stylusや今回の動画用カスタム表示など、
    個人使用目的でCSSを上書きしたいだけのときはまあ使ってしまいます。 ↩

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0