手順

OBSを利用している前提です。

前回：

チャット（画面右のコメント欄）を配信画面に表示する

youtubeのチャットのurlを取得

1. ライブダッシュボードの画面に行きます（以下ライブダッシュボードへのリンク）

2. チャットをポップアウトしてurlをコピーする

f:id:misos:20190420181203p:plain — ライブダッシュボード右からチャットをポップアウトしてそのurlをコピーする

新しくチャットのみのページが開くので、そのurlをコピーしてください。

OBS内部に表示

1. OBSのソースにブラウザを追加

f:id:misos:20190420164156p:plain — ソースにブラウザを追加する

2. urlにチャットのurlをコピー

f:id:misos:20190420181520p:plain — urlの欄にチャットのurlを貼り付ける

この時点でチャットが画面に映っていると思います。しかしチャットの背景が白色で目立つので以下「スタイルシートを作る」で作ったCSSを使ったりすることで配信画面の邪魔にならないように調整します。

チャットの見た目やフォントの変更をする

スタイルシートを作る

Chat v2.0 Style Generatorという素晴らしいサイトがあるので、これを使ってテンプレートを作ります。

作ったものをそのまま使用してもいいですが、英語用のフォントなので漢字なのど表示が気になった場合は日本語のフォントを適用します。

日本語のウェブフォントを適用する

次に、上記で生成したCSSのフォントは主に英語向けなので漢字などは代替のフォントが適用されるか表示されなくなってしまうので日本語のフォントに置き換えます。

googlefonts.github.io

日本語の（ウェブ）フォントは他にも複数ありますが、特に個人サイトの物を使うときは特に利用規約に注意してください。

@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru");

をCSSの冒頭に追記して、CSS内部で font-family: "フォント名"; となっているところのフォント名を日本語フォントに置き換えます。Kosugi Maruフォントを使う場合は最終的に以下のような形になります。

@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru");

/* Background colors*/
body {
  overflow: hidden;
  background-color: rgba(0,0,0,0);
}
/* Transparent background. */
yt-live-chat-renderer {
  background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
  background-color: transparent !important;
}

yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
  background-color: transparent !important;
}


yt-live-chat-author-chip #author-name {
  background-color: transparent !important;
}
/* Outlines */
yt-live-chat-renderer * {
  text-shadow: -1px -1px #000000,-1px 0px #000000,-1px 1px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000;
  font-family: "Kosugi Maru";
  font-size: 25px !important;
  line-height: 25px !important;
}

yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content {
  overflow: initial; !important
}

/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items{
  overflow: hidden !important;
}

yt-live-chat-item-list-renderer #item-scroller{
  overflow: hidden !important;
}

/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
  display: none !important;
}

/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

yt-live-chat-paid-message-renderer #header {
    padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {

  width: 24px !important;
  height: 24px !important;
  border-radius: 24px !important;
  margin-right: 6px !important;
}

/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
  display: none !important;
  vertical-align: text-top !important;
}

/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {

  color: #999999 !important;
  font-family: "Kosugi Maru";
  font-size: 25px !important;
  line-height: 25px !important;
}

/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
  color: #ffd600 !important;
}

yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  color: #5e84f1 !important;
}

yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  color: #0f9d58 !important;
}

/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
  color: #cccccc !important;
  font-family: "Kosugi Maru";
  font-size: 25px !important;
  line-height: 25px !important;
}

yt-live-chat-text-message-renderer #author-name::after {
  content: ":";
  margin-left: 1px;
}

/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
  color: #ffffff !important;
  font-family: "Kosugi Maru";
  font-size: 25px !important;
  line-height: 25px !important;
}


/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
  color: #ffffff !important;
  font-family: "Kosugi Maru";
  font-size: 30px !important;
  line-height: 30px !important;
}

yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
  color: #ffffff !important;
  font-family: "Kosugi Maru";
  font-size: 28px !important;
  line-height: 28px !important;
}

yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
  color: #ffffff !important;
  font-family: "Kosugi Maru";
  font-size: 28px !important;
  line-height: 28px !important;
}

yt-live-chat-paid-message-renderer {
  margin: 4px 0 !important;
}

yt-live-chat-legacy-paid-message-renderer {
  background-color: #0f9d58 !important;
  margin: 4px 0 !important;
}

yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
  text-decoration: none !important;
}

yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
  display: none !important;
}

yt-live-chat-ticker-renderer {
  background-color: transparent !important;
  box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
  display: none !important;
}


yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
  color: #ffffff !important;
  font-family: "Kosugi Maru";
}

yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
  display: none !important;
}

@keyframes anim {
0% { opacity: 0; transform: translateX(16px); }
100% { opacity: 1; transform: none;}
}

yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
  animation: anim 2000ms;
  animation-fill-mode: both;
}