Amazonタイムセール

アプリ ゲーム実況

【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

投稿日:2021年2月4日 更新日:

【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ツイキャスの配信で画面にコメントを表示したい場合の表示方法を説明します。

この通りにやれば簡単に画面表示ができます。

また見やすくカスタマイズする用の「カスタムCSS」も紹介します。
コピペすればOKなので是非試してみてください!

【追加】黒文字のCSSも追加しました

【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ツイキャスのコメントを画面表示にOBSが必要なのでダウンロードをしましょう

まず今回の方法で「OBS Studio」という外部ツールが必要となるのでダウンロードをしておいてください。

無料で使えてとても優秀で使いやすい配信用ツールです。

>>> OBS ダウンロード

OBSで配信のツイキャス連携の設定を行う

まず必ず最初にお持ちのツイキャスとOBSの連携を行う必要があります。
ここではコメントを表示させる方法を記事でまとめていますが、連携をしないと「誰のコメントを表示するか」が設定されない事になります。

OBSの「設定」→ 「配信」を開きます。
OBSで配信のツイキャス連携の設定を行う【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

3つの項目があるので下記のように設定をしてください。

サービス カスタム
サーバー (ツイキャスの)RTMP URL
ストリームキー (ツイキャスの)ストリームキー

ツイキャスのRTMP URL、ストリームキーはツイキャスの配信画面の一番下の「ツールとの連携設定」に書かれているのでコピペをしてください。

OBSで配信のツイキャス連携の設定を行う【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

張り終えたら最後にOBSの画面で「適用」→「OK」を選択してください。

OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する

OBSを起動させるとこの画面が出てきます。

OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

下段左から2番目のソースという部分を見ます。

OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ソースという部分に「ブラウザ」というのを追加します。

「+」マークを押すと追加する項目が出てきます。

OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ブラウザをクリックします。

OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

自分の分かりやすい名前をつけます。
OBSにソースでブラウザを追加してツイキャスのコメントを画面表示する【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

このあと設定をします。

とても簡単なのですぐに終わります。

OBSでツイキャスのコメントを画面表示するための設定。

ブラウザを追加して、追加されたブラウザをダブルクリックで開きます。

OBSでツイキャスのコメントを画面表示するための設定。 【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

設定項目を入力していきます。

URL

一番上にある「URL」部分はツイキャスの配信画面にある「配信向けオーバーレイ」に表示されているコードをコピペします。

「配信向けオーバーレイ」はツイキャス配信画面で「ツール・ゲーム配信」の一番下にあります。
OBSでツイキャスのコメントを画面表示するための設定。 【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

OBSでツイキャスのコメントを画面表示するための設定。 【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

OBSでツイキャスのコメントを画面表示するための設定。 【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示にカスタマイズ!

これをコピーしてOBSのURL部分に張り付けます。

これだけでもツイキャスの画面にコメントを表示させることが可能です。

アイコンが表示されない・ダサイ。OBSでツイキャスのコメントを画面表示するための設定。 【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ただ、このままだとアイコンが表示されなかったり文字の大きさなどが小さい…などなど気になることがたくさんありました。

設定を変更してできたのがこちらです。

【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

ここからこの画面表示にする設定も紹介します。

全部コピー・ペーストでOKなのでお試しください。

OBSでツイキャスのコメントでアイコンを表示のオススメURL・幅・高さ・カスタムフレートの設定

OBSでツイキャスのコメントでアイコンを表示のオススメURL・幅・高さ・カスタムフレートの設定を紹介します。

OBSでツイキャスのコメントでアイコンを表示のオススメURL・幅・高さ・カスタムフレートの設定【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

URLは先ほどの「配信向けオーバーレイ」のコードをコピペして貼り付けます。

他の設定はこれにしています。

400
高さ 580
FPS 30

次にアイコン表示や文字の大きさを変える方法を紹介します。
コピペだけなのでこちらも是非!

スポンサーリンク

OBSでツイキャスのコメント表示でオススメのカスタムCSS。アイコンを表示し見やすくするための設定

OBSでツイキャスのコメント表示でオススメのカスタムCSS。アイコンを表示し見やすくするための設定はこちらです。

このコードを最初から最後までコピーをして「カスタムCSS」に張り付けます。

※こちらは文字が「白色」です。文字が「黒色」を希望の方はもう少し先にあるコードをコピペしてください。

>>> 黒い文字が良い場合はこちら

/* 解説
* 色の指定方法はキーワードでもカラーコードでもrgba()でも何でも使いやすいの使ってください。
*/

/*
* 全体
*/
body[data-is-embedded="true"] {
/* 背景色 */
background-color:rgba(255,255,255,0);
}

.tw-comment-list-view__scroller {
/* スクロールバーをなくす */
overflow:hidden !important;
}

/*
* アイコンとコメントの表示領域全体
*/
body[data-is-embedded="true"] .tw-comment-item {
/* 外側にスペースをつくる */
margin:0;
/* 内側にスペースをつくる */
padding:0;
/* 下に線をつける
ここでは太さ、色、破線を指定している。 */
border-bottom:2px rgba(255,255,255,1) dashed;
}

/*
* アイコン部分。
* アイコン要らない場合、display:blockを消す。
*/
body[data-is-embedded="true"] .tw-comment-item-icon {
display:block;
}

.tw-comment-item-icon>img {
/* 角に丸みをつける */
border-radius:20px;
margin:10px;
/* 横幅 */
width: 45px;
/* 高さ */
height: 45px;
/* 影 */
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
/* 名前、コメント、テロップをまとめたブロック
* padding:上下左右にスペースを開ける。数字を小さくするとぎゅっとなる。
*/
body[data-is-embedded="true"] .tw-comment-item-body {
background:rgba(0,0,0,0) !important;
padding:10px 0;
/* 文字の影 */
text-shadow: none;
}

/* 偶数行だけ背景色を変える(コメントアウト中)
body[data-is-embedded="true"] #comment-list-app div div.tw-comment-list-view__scroller > div > div:nth-child(2n) {
background-color:rgba(128,255,255,0.5) !important;
}
*/

/* 
* ユーザー名
*/
body[data-is-embedded="true"] .tw-comment-item-name {
/* 文字色 */
color:rgba(255,255,255,1) !important;
/* 文字サイズ */
font-size:12px;
/* フォント */
font-family:'UD デジタル 教科書体 NP-R','Meiryo UI';
/* 影 */
text-shadow: none;
/* 文字の太さ */
font-weight:400;
}

/*
* コメント
*/
body[data-is-embedded="true"] .tw-comment-item-comment {
/* 文字色 */
color:rgba(255,255,255,1) !important;
/* コメントを縦に並べる */
display:block;
/* 文字サイズ */
font-size:18px;
/* フォントの種類 */
font-family:'UD デジタル 教科書体 NP-R','Meiryo UI';
/* コメント領域の外側にスペース */
margin:0;
/* コメント領域の内側にスペース */
padding:0;
max-width:100%
}
/*
* 日付の表示(コメントアウト中)
* displayをblockとかにすると表示できる。

.tw-comment-list-view__scroller .tw-comment-item-date {
display: block;
} */

これで終わりです!

黒い文字が良い場合はこちら

黒い文字が良い場合はこちら OBSでツイキャスのコメント表示でオススメのカスタムCSS。アイコンを表示し見やすくするための設定【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

今は背景を変えて文字が白色だと見にくくなってしまったため、現在は文字色を「黒」にしています。

文字が黒色が欲しい人はこのコードを最初から最後までコピーをして「カスタムCSS」に張り付けます。

/* 解説
* 色の指定方法はキーワードでもカラーコードでもrgba()でも何でも使いやすいの使ってください。
*/

/*
* 全体
*/
body[data-is-embedded="true"] {
/* 背景色 */
background-color:rgba(255,255,255,0);
}

.tw-comment-list-view__scroller {
/* スクロールバーをなくす */
overflow:hidden !important;
}

/*
* アイコンとコメントの表示領域全体
*/
body[data-is-embedded="true"] .tw-comment-item {
/* 外側にスペースをつくる */
margin:0;
/* 内側にスペースをつくる */
padding:0;
/* 下に線をつける
ここでは太さ、色、破線を指定している。 */
border-bottom:2px rgba(255,255,255,1) dashed;
}

/*
* アイコン部分。
* アイコン要らない場合、display:blockを消す。
*/
body[data-is-embedded="true"] .tw-comment-item-icon {
display:block;
}

.tw-comment-item-icon>img {
/* 角に丸みをつける */
border-radius:20px;
margin:10px;
/* 横幅 */
width: 45px;
/* 高さ */
height: 45px;
/* 影 */
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
/* 名前、コメント、テロップをまとめたブロック
* padding:上下左右にスペースを開ける。数字を小さくするとぎゅっとなる。
*/
body[data-is-embedded="true"] .tw-comment-item-body {
background:rgba(0,0,0,0) !important;
padding:10px 0;
/* 文字の影 */
text-shadow: none;
}

/* 偶数行だけ背景色を変える(コメントアウト中)
body[data-is-embedded="true"] #comment-list-app div div.tw-comment-list-view__scroller > div > div:nth-child(2n) {
background-color:rgba(128,255,255,0.5) !important;
}
*/

/* 
* ユーザー名
*/
body[data-is-embedded="true"] .tw-comment-item-name {
/* 文字色 */
color:rgba(0,0,0,1) !important;
/* 文字サイズ */
font-size:12px;
/* フォント */
font-family:'UD デジタル 教科書体 NP-R','Meiryo UI';
/* 影 */
text-shadow: none;
/* 文字の太さ */
font-weight:400;
}

/*
* コメント
*/
body[data-is-embedded="true"] .tw-comment-item-comment {
/* 文字色 */
color:rgba(0,0,0,1) !important;
/* コメントを縦に並べる */
display:block;
/* 文字サイズ */
font-size:18px;
/* フォントの種類 */
font-family:'UD デジタル 教科書体 NP-R','Meiryo UI';
/* コメント領域の外側にスペース */
margin:0;
/* コメント領域の内側にスペース */
padding:0;
max-width:100%
}
/*
* 日付の表示(コメントアウト中)
* displayをblockとかにすると表示できる。

.tw-comment-list-view__scroller .tw-comment-item-date {
display: block;
} */

ツイキャスのコメント欄の位置や大きさはOBSで移動・拡大可能

コメント欄の位置や大きさはOBS上で簡単に変更可能です。

ツイキャスのコメント欄の位置や大きさはOBSで移動・拡大可能【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示&透過にカスタマイズ!

左クリックを押しながらマウスを動かせば位置を動かせます。

隅の「■」をクリックしながら移動させれば拡大・縮小ができます。

ここらへんはお好みで操作してみてください。

【OBS】ツイキャスのコメントを画面表示させる方法。オススメのCSSで見やすくアイコン表示にカスタマイズ!

ツイキャスのコメントを画面表示させる方法の紹介でした。

簡単に設定可能ですのでお試しください^^

お役に立てれば嬉しく思います!

Amazonタイムセール

記事が気に入ったら
いいね!しよう

更新情報用を受け取る

  • この記事を書いた人
  • 最新記事

のり - norinori0107

ギタリスト、世界一周バックパッカー、経営者、ブロガーなどなど。ブログのアクセスは月34万PV達成!(34万PV達成記事はこちら)、累計810万PV達成。 ミルクティーとフルグラと甘い物と犬が好きです! ■ 詳しいプロフィール ■お問い合わせはコチラからどうぞ

-アプリ, ゲーム実況
-,

Copyright© のり部屋 , 2021 All Rights Reserved.