CSS
OBS
TwitCasting

【コメビュ不要】OBSにツイキャスのコメントを表示させる。


2019/3/5 Mac版でのフォントサイズがおかしい点を修正しました


image.png

タイトル通り、OBSにツイキャスのコメントを表示させるやり方です。

コメビューを透過させて載せるやり方はあったのですが、Youtube Live みたいな感じにコメビュー無しで出来ないか試してみたので、やり方を載せておきます。


1. [ソース] に [ブラウザ] を追加する


[+]マークをクリック

image.png


[ブラウザ]をクリック

image.png


[OK]をクリック

image.png


2. プロパティの設定

image.png


プロパティの設定を以下のようにします。

項目
内容

URL *

https://twitcasting.tv/ユーザー名/windowcomment/


500

高さ
800

FPS      
30

カスタムCSS *

下記説明にて記載


* URLの項目について

自分の放送ページのURLの後ろに /windowcomment/を足して、入力します。

例えば、放送ページのURLが

https://twitcasting.tv/zsyama/

の場合、

https://twitcasting.tv/zsyama/windowcomment/

といった感じになります。


* カスタムCSSの項目について

下のコードを、そのままコピペしてください。わかる方は弄っても構いません。

/*---ここから---*/

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; line-height: 1.1; font-size: 14px; }
div#content { display: flex; position: fixed; left: 10px; margin: 0; min-height: 0; max-width: none; min-width: 100vw; }

/* いろいろと非表示(1) */
div#ad-middle { display: none; }
.tw-player-page__comment__post {display: none;}
.tw-player-page__component__title {display: none;}
.alert-info {display: none;}
.alert {display: none;}
a.btn {display: none;}
.tw-player-page__comment__list { overflow: hidden; }

/* コメント間の設定 */
table.commentlist td { border: 0; }
table.commentlist tr { padding: 4px 2px 0px 2px; }

/* いろいろと非表示(2) */
table.commentlist td.img { display:none; }
img.commentthumb { display: none; }
.comment-time { display: none; }
img.premium { display: none; }
span.name { display: none; }
td.comment .smallsubtitle { display: none; }

/* ユーザー名のフォント設定 */
td.comment span.user a { color: #cccccc; }

/* コメントのフォント設定 */
td.comment .comment-text { font-size: 1.4em; color: #ffffff; }

/* 縁取り */
td.comment { 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; }

/*---ここまで---*/

設定後、[OK]をクリックすれば、表示されるはずです。