【ツイキャス】コメントを配信画面に表示する方法。1分でできます

ツイキャスで配信するさい、コメントを配信画面に映すにはどうしたらよいのでしょうか。

コメントを配信画面に映す

じつは簡単にできます。というのも、ツイキャスに掲載されている情報をコピー&ペーストするだけでよいからです。

実際にやってみましょう。

【スポンサーリンク】

配信ソフトが必要

まず前提として配信ソフトが必要です。たとえば、

のいずれかを使います。

配信ソフト

今回はOBSを使用しますが、ほかの配信ソフトでもかまいません。問題なくできます。

これ以降は、ツイキャスでの配信経験があることを前提としています。配信方法がわからない場合は、最初に下記ページをご覧ください。

ツイキャスでゲーム配信する方法・やり方
ツイキャスでライブ配信したい人向けの記事です。 ツイキャスの特長は、 むかしから配信サイトとして定番 ...

URLをコピーしよう

ツイキャスでは、コメントを配信画面に表示するための仕組みが最初から用意されています。

ツイキャス

どういうことかというと、まず配信画面のページを開いてください。

  1. ツイキャスにアクセスする。
  2. 画面右上の「配信する」ボタンにカーソルを合わせる。
  3. 「ツール・ゲームズ配信」をクリックする。

配信

画面が切り替わったら「ツールとの連携設定」をクリックします。

ツールとの連携設定

そして、「配信ツール向けオーバーレイ」タブをクリックしましょう。

配信ツール向けオーバーレイ

コメントを配信画面に表示」という部分にURLが表示されているので、「コピー」をクリックします。

コピー

URLをコピーできました。コメントを配信画面に表示するうえで、このURLが重要な意味を持っています。

URLをペーストしよう

あとは、いまコピーしたURLをOBSにペーストします。「ソース」の「+」アイコンから「ブラウザ」をクリックしてください。

ブラウザ

「新規作成」が選択された状態で、適当な名称をつけます。「コメント」でも「チャット」でも、なんでもかまいません。そして「OK」をクリックします。

名前

すると、下記画像のような設定画面が開きます。「URL」の部分に注目してください。ここを(1)削除し、(2)さきほどコピーしたURLをペーストしましょう。


▲URLをペーストしたところ

必要に応じて「幅」と「高さ」の設定も変更します。たとえば、表示されるコメント数を少なくしたい場合は、OBSの「ブラウザ」ソースを開いて「高さ」を200にします。

幅・高さ
▲任意の設定にしてください。このとおりでなくてかまいません。

「OK」をクリックします。完成しました。

スポンサーリンク
レクタングル(大)

コメントが表示されるか確認しよう

実際にコメントを確認してみましょう。

ツイキャスの放送ページを開いてください。自分でコメントを入力し、「コメント」ボタンをクリックします。

コメント

かりに配信中であれば、OBSおよびツイキャスの両方にコメントが表示されます。配信中でない場合は、OBSのほうにだけコメントが表示されます。

OBSに表示されたコメント
▲きちんとコメントの背景が透明になっています(透過)。お茶などのアイテムが表示されないのは仕様です。

もしコメントが表示されない場合は、以下の点を確認してください。

  • URLを正しくコピーできているか
  • URLを正しくペーストできているか(OBSの「URL」を空欄にしてペースト)
  • 自分でテストしている場合、「コメント」ボタンをクリックしたか(クリックする)
  • 「ブラウザ」ソースの順序は適切か
  • 「ブラウザ」ソースが非表示になっていないか

デザインを変更しよう

ひょっとしたら、デザインをカスタマイズしたいという人も多いかもしれません。

  • 文字の色・サイズを変えたい
  • ユーザーのアイコンを表示したい
  • コメントをもっと見やすくしたい

上記のようなデザインの変更というのは、CSSを変更すればできます。ただ、CSSといわれてもピンとこない人が多いでしょう。

CSSは、文字の装飾部分(見た目)を指定するための機能です。

そこで便利なのが、「OBSキャスコメ CSSカスタマイザー」(以下、CSSカスタマイザー)です。

OBSキャスコメ CSSカスタマイザー

使い方は簡単です。試しに、同サイトの「CSSコードをクリップボードにコピー」ボタンをクリックしてください。文字列(CSSのコード)をコピーできます。

CSSコードをクリップボードにコピー

あとはこの文字列をOBSにペーストすればよいのです。

  1. OBSの「ブラウザ」ソースをダブルクリックする。
  2. カスタム CSS」の部分を削除する。
  3. 「カスタム CSS」に文字列をペーストする。
  4. 「OK」をクリックする。

「カスタム CSS」にペースト
▲「カスタム CSS」にペーストしたところ。「URL」のほうではありません。

すると、見た目が大きく変わりました。これがCSSの効果です。

CSS追加後

カスタマイズ時の注意点

CSSカスタマイザーの「コメント欄サンプル」を見ながらカスタマイズしましょう。

コメント欄サンプル

設定ができたら、さきほどと同じようにCSSをOBSにコピー&ペーストします。コピー&ペーストを忘れないようにしてください。

  1. CSSカスタマイザーで設定する。
  2. 同サイトのCSSコードをコピーする。
  3. OBSの「ブラウザ」ソースを開き、「カスタム CSS」にCSSコードをペーストする。
CSSカスタマイザーは、あくまでもCSSを吐き出すためのものです。吐き出したコードは、OBSにコピペする必要があります。

注意点ですが、設定を変えたあとはCSSの内容が変わります。そこで、設定を変えるたびに毎回コピー&ペーストしなおしてください

たとえば、文字色を変えるまえのCSSと、変えたあとのCSSは内容が異なります。きちんとOBSにコピペしなおさないと設定が反映されません

まとめ

話をまとめます。コメントを配信画面に表示したいなら、ツイキャスに掲載されているURLをOBSにコピペしましょう。これだけです。

もしコメントをカスタマイズしたい場合は、CSSをOBSに追加します。そのCSSは、CSSカスタマイザーで吐き出せます。

本文中では書きませんでしたが、ツイキャス用のCSSを無料公開してくれているブログもあります。それを使ってカスタマイズするのもありです。

コメントの見方については、下記ページをご覧ください。

ゲーム配信中、コメントをどうやって確認すればいい?4種類の方法
ゲーム配信(生放送)が初めてだと、コメントを確認する方法はイメージしづらいかもしれません。 その理由はいくつか考えられます。 ...
スポンサーリンク
レクタングル(大)
レクタングル(大)

X(旧Twitter)で最新情報をツイートしています!フォローお願いします。

関連コンテンツ



スポンサーリンク
レクタングル(大)