配信オーバーレイ関係

【ツイキャス】OBS・Xsplitで配信画面にコメントを表示(オーバーレイ)させる方法「CSS有り」

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

配信画面にツイキャスのコメントをオーバーレイ表示させる方法を紹介します

ツイキャスではもともとコメントを配信ソフト「OBS・Xsplit」で表示させるブラウザソースを使うやり方が用意されていますが、それに加えてカスタムCSSで調整したコメント表示を書いていきます

正直ツイキャスから用意されているので簡単なのですが、カスタムCSSは難しいのでそれも兼ねて備忘録的な感じの記事です

また今回紹介するやり方は一部の配信者はコメントビューア(コメビュ)がいらないんじゃないかなと思います

この記事はこんな方におすすめ

  • 配信画面にツイキャスのコメント表示させたい
  • カスタムCSSで調整したい

ツイキャスから用意されている埋め込み用URLを使う

これから説明していきますが、すでにツイキャスで活動している人がこの記事を見ていると思うので、アカウントの開設方法や配信のやり方については割愛していきます

あくまでも配信画面に配信コメントをオーバーレイ表示させていくための記事なのであしからず

step
1
自分の配信ページに行く

  1. ツイキャスにログイン
  2. 配信するをクリック
  3. ゲームズ配信をクリック

step
2
コメント用URLをコピー

ポイント

https://twitcasting.tv/ここに自分のID/windowcomment?embedded=1

step
3
OBS・Xsplitにコメントを埋め込んでみる

今回はOBS Studioで説明していきます。Xsplitを使っている人はなれている人だと思うので割愛

メモ

配信ソフト側のブラウザソースにURLを貼るだけ

  • Xsplit=「ソースの追加」→「ウェブページ」にツイキャスのコメントURLを貼る
  • OBS=「ソースの + 」→「ブラウザ」にツイキャスのコメントURLを貼る

 

  1. +マーククリック
  2. ブラウザをクリック
  3. ソースを作成する上でわかりやすい名前にし、OKボタンクリック
  • OBSブラウザソース

    ステップ1

step
4
コメントURLを貼り付ける

 

  1. URLにツイキャスから用意されているURLを貼る
  2. 幅・高さは各自で調整
  3. OKボタンをクリック

step
5
実際に表示されるか確認

カスタム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; }

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

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

実際にOBS側にカスタムCSSを入力していきます

  1. カスタムCSSに上記のコードを入力
  2. OKをクリック

これで完了ですが、分かる人は自分で調整するほうが無難でしょう

まとめ

結構簡単にできたかと思います

配信画面にコメントあると、アーカイブ確認したときにわかりやすいと思います。その際今回紹介したやり方をやってみると良いでしょう

ストリーミング配信関連

2020/1/5

【ツイキャス】レベルを効率よく上げる方法とは?レベルをあげて特典を解放させよう!

ツイキャスではレベルという概念がありますが、そのレベルを爆速的に効率良く上げる方法を紹介します しかし、これから紹介していく方法は注意点があるのでそこだけ頭に入れておいてください。後で後述します では、どのようにして効率良くレベルを上げることはできるのか! その方法はブログやホームページ、ウェブサイトに自分の配信を埋め込むことです。この方法はデメリットもありますが、効率良くレベル上げができるのが最大のメリット この記事はこんな方におすすめ とにかくレベルを上げたい レベルを上げて機能を解放させたい 先に注 ...

ReadMore

ストリーミング配信関連

2020/1/2

【ツイキャス】過去の動画(アーカイブ)をしっかり残す(保存)のやり方の解説

ツイキャスでは過去の配信を録画として残せる機能があります 録画を残せますが、しっかりしたタイトルや適切なタイトルにしないと過去の配信が消える始末になるので、そのやり方を紹介します 一応運営によるヘルプに記載されていますが、自分のブログに備忘録がてら残しておきます こういう記事って案外記憶から消える際に記事に残ってるので助かるんですよね ヘルプを見てもわからない人がいると思うので参考になれば幸いです 関連 【ツイキャス】過去動画と配信をブログに埋め込む方法【PV数があれば収益解放も】 【ツイキャス】ブログに ...

ReadMore

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

ReinyaN

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

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

新着最新記事5件

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

Copyright© AkaMaruServer , 2020 All Rights Reserved.