Streamlabs-Chat Boxの設定

Youtube、Twitch、Mixer のコメントを配信画面に

表示させることができます。


Streamlabs


任意のアカウントでログインしてください。

ログイン後、右側上部のアカウントアイコンをクリックから日本語を選択。

左側 すべてのウィジェットをクリック

チャットボックスをクリックしてください。

ウィジェットURLをコピー

【Xsplit】

ソースの追加ーウェブページーURL の部分に貼り付けてOK

【OBS系】

ソース追加ーブラウザー(ローカルファイルにチェックは無しで)

Streamlabs OBS では ブラウザー のソースを追加 から

URLの部分に貼り付けてください。(表記されてるものを削除後)

580x200

場所や幅、高さは任意の場所やサイズに変更してください。


【My設定】

Font Size=20px に変更

カスタムHTML/CSSを有効にします を Enabled(有効) にチエック

その下の部分

CSS をクリックにて 表記されてるものを削除したあと


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

* {

box-sizing: border-box;

}

html, body {

height: 100%;

overflow: hidden;

}

body {

text-shadow:

black 2px 0px, black -2px 0px,

black 0px -2px, black 0px 2px,

black 2px 2px , black -2px 2px,

black 2px -2px, black -2px -2px,

black 1px 2px, black -1px 2px,

black 1px -2px, black -1px -2px,

black 2px 1px, black -2px 1px,

black 2px -1px, black -2px -1px;

background: {background_color};

font-family: 'メイリオ';

font-size: {font_size};

line-height: 1.4em;

color: {text_color};

text-transform: none;

}

#log>div {

animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;

-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;

}

.colon {

display: none;

}

#log {

display: table;

position: absolute;

bottom: 0;

left: 0;

padding: 5px 10px 10px;

width: 100%;

table-layout: fixed;

}

#log>div {

display: table-row;

}

#log>div.deleted {

visibility: hidden;

}

#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 .message,#log .meta {

vertical-align: top;

padding-bottom: 0.1em;

}

#log .meta {

text-align: left;

padding-right: 0.5em;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

#log .message {

word-wrap: break-word;

}

.badge {

display: inline-block;

margin-right: 0.1em;

position: relative;

height: 1em;

vertical-align: middle;

top: -0.1em;

}

.name {

line-height: 1.5;

font-family: 'UD デジタル 教科書体 N-R';

margin-left: 0.2em;

}


を コピペしてください。

サービス設定 クリックにて保存


39行目  font-family: 'メイリオ';  メイリオの部分書き換えで

コメントの文字フォントを 任意のフォントに変更出来ます。

167行目 ユーザー名のフォントを指定する場所なので

任意のフォントに変更出来ます。

164行目 color:#208cd7; 

などを追加にて ユーザー名の色を固定できます。    

color:カラーコード;  例 color:#ff0000;    (赤)

165行目 

line-height: 1.5;

フォント変更からユーザー名とコメント表示に段差が出るてしまう場合

1.5の部分を変更してください。

1.0~2.0


吹き出し風に

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

* {

box-sizing: border-box;

}

html, body {

height: 100%;

overflow: hidden;

}

body {

text-shadow:

black 2px 0px, black -2px 0px,

black 0px -2px, black 0px 2px,

black 2px 2px , black -2px 2px,

black 2px -2px, black -2px -2px,

black 1px 2px, black -1px 2px,

black 1px -2px, black -1px -2px,

black 2px 1px, black -2px 1px,

black 2px -1px, black -2px -1px;

background: {background_color};

font-family: 'UD デジタル 教科書体 N-R';

font-size: {font_size};

line-height: 1.4em;

color: {text_color};

text-transform: none;

}

#log>div {

    animation: fadeIn 1s ease forwards, fadeOut 1s ease {message_hide_delay} forwards;

-webkit-animation: fadeIn 1s ease forwards, fadeOut 1s ease {message_hide_delay} forwards;

}

.colon {

display: none;

}

#log {

display: table;

position: absolute;

bottom: 0;

left: 0;

padding: 5px 10px 10px;

width: 100%;

table-layout: fixed;

}

#log>div {

display: table-row;

}

#log>div.deleted {

visibility: hidden;

}

#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 .message,#log .meta {

vertical-align: top;

padding-bottom: 0.1em;

}

#log .meta {

text-align: left;

padding-right: 0.5em;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

#log .message {

word-wrap: break-word;

}

.badge {

display: inline-block;

margin-right: 0.1em;

position: relative;

height: 1em;

vertical-align: middle;

top: -0.1em;

}

.name {

line-height: 1.5;

font-family: 'メイリオ';

margin-left: 0.2em;

}

.message {

position: relative;

display: inline-block;

margin: 1.5em 0 1.5em 0px;

padding: 5px 10px;

background-color:rgba(0,0,0,0.4);

border-radius: 10px;

}

.message:before {

content: "";

border: 5px solid transparent;

border-right: 15px solid rgba(0,0,0,0.4);

position: absolute;

top: -30%;

left: -15px;

transform: rotate(45deg);

}



ブリキ屋 ゲーム基地

赤文字は、全てリンクされています。

0コメント

  • 1000 / 1000