自分が使っているYoutubeコメント表示用カスタムCSS
/* 以下コメントアウト解除で名前を表示 */
/* .yt-live-chat-author-chip{
font-size: 30px !important;
color:#CCFFFF!important;
} */
/* 以下コメントアウトで名前を表示 */
.yt-live-chat-author-chip{display: none !important;}
/* 背景透過 */
* {
background: transparent !important;
}
/* コメント以外の部分消去 */
.stream-chat-header,
.tw-z-default,
.chat-input,
.chat-line__status {
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
border: none !important;
}
/* 名前の後ろのコロン消去 (有効化する場合は1行下と5行下の行を削除) */
span[data-test-selector="chat-message-separator"] {
display: none !important;
}
/* メッセージのコンテナ */
/* デフォルトでは左右20px、上下5pxのpaddingが入っている */
.chat-line__message, * {
color: #FFFFFF!important ;
font-family: "メイリオ", sans-serif;
font-size: 24px !important;
text-shadow:2px 2px 0 rgba(51, 51, 51, 1), -2px -2px 0 rgba(51, 51, 51, 1),
-2px 2px 0 rgba(51, 51, 51, 1), 2px -2px 0 rgba(51, 51, 51, 1),
0px 2px 0 rgba(51, 51, 51, 1), 0-2px 0 rgba(51, 51, 51, 1),
-2px 0 0 rgba(51, 51, 51, 1), 2px 0 0 rgba(51, 51, 51, 1);
line-height: 100% !important;
font-weight: 600 !important;
letter-spacing : 2px;
}
/* ユーザー名のスタイル */
/* コンテナ */
.chat-line__username-container {
}
/* チャットバッジ消去 (無効化する場合は下3行を削除) */
img,
yt-live-chat-header-renderer,
.yt-live-chat-message-input-renderer,
.style-scope yt-live-chat-viewer-engagement-message-renderer,
.chat-line__username-container span:first-child {
display: none !important;
}
/* ユーザー名コンテナ */
.chat-line__username {
}
Twitchとほぼ同じコードですが、指定してあげないといけない名前が違ったのでそこだけ変えています。
コード最初の方のコメントアウトを解除し、その次をコメントアウトすることでユーザー名を表示できます。
10/12追記:最新のCSSでないとコメントのアイコンが表示されます。