[OBS] Twitchコメント欄向けCSSカスタマイザー (試作)

- 8/10/2024

(Twitch Chat Overlay CSS Customizer Prototype)

Chrome拡張機能の「TwitchコメカスタムCSSテスター」をChromeウェブストアで公開していますが、この拡張機能に読み込ませるテスト用のカスタムCSSも必要だと思ったので、Twichのコメント欄 (チャットオーバーレイ) 向けの簡単なCSSカスタマイザーをここに置いておきます。

このページでクリップボードにコピー出来るCSSを使うと、Twitchのチャット欄をポップアップして表示したコメント欄のURLを使って表示するオーバーレイを、マウス操作でカスタマイズする事が出来ます。

[目次]

TwitchコメカスタムCSSテスター
サポートページ

#Twitchコメカスタム (#ツイッチコメ欄カスタムCSS、 #トイッチコメ欄カスタムCSS)

Twitchのコメント欄 (チャットオーバーレイ)

Twitchのライブ配信をパソコンのブラウザで視聴する時にウインドウの右側に表示されるコメント欄を、「チャットをポップアウト」でポップアップすると

https://www.twitch.tv/popout/ユーザー名/chat?popout=

というURLでコメント欄が別のウインドウで表示されます。

配信ソフトの「OBS」のブラウザや、Chrome拡張機能の「TwitchコメカスタムCSSテスター」を使って、上記のURLにこのページのカスタムCSSを読み込ませて表示すると、標準のTwitchコメント欄とは違うレイアウトにカスタマイズして表示する事が出来ます。

カスタムCSSCustom CSS

@import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap");
/* 絵文字フォントの読み込みLoading Emoji Fonts */
@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

/*
  Generated by Twitchコメント欄向けカスタムCSS (試作)Twitch Chat Overlay CSS Customizer Prototype
  url: https://kiimemo.blogspot.com/2024/08/chat-overlay-custom-css-for-twitch.html
*/

.stream-chat-header,
.chat-room, body {
  background-color: transparent !important;
}

/* チャットヘッダー 非表示Hiding Chat Headers */
.stream-chat-header *,
.stream-chat-header {
  //display: none !important;
  max-height: 0px;
  overflow-y: hidden;
}
/* ユーザーランキング 非表示Hiding User Ranking */
.chat-room__content > div:first-child * {
  //display: none !important;
  max-height: 0px;
  overflow-y: hidden;
}
.chat-room__content > div:not(.chat-list--default) * {
  max-height: 0px;
  overflow-y: hidden;
}

/* コメント入力欄 非表示Hiding Comment Input */
.chat-input {
  /* display: none !important; */
  height: 1px;
  overflow-y: hidden;
}

/* ステータス "Welcom to the chat room" を非表示Hiding "Welcom to the chat room" Status */
.chat-line__status {
  display: none;
}

/* メッセージの区切り線Dividers */
.chat-line__message{
  border-bottom: 3.8px double #8080ff; 
}

/* ユーザーノーティスを非表示Hiding User Notices */
.user-notice-line {
  display: none;
}

/* コメントChat Messages */
.chat-line__message * {
  font-family: 'メイリオ','Noto Color Emoji', sans-serif;
  font-size: 18px !important;
  color: #000000 !important;
  font-weight: bold;
  font-style: italic;
  line-height: 150% !important;
  font-weight: 600 !important;
  letter-spacing : 2px;
}
.chat-line__message span[data-a-target=chat-line-message-body] {
  text-shadow: 2px 2px 4px #ff0000;
}

.chat-line__message .chat-line__no-background {
  display: inline-block !important;
}
  
.chat-line__message .chat-line__message-container {
  padding: 8px;
  #ffffff;
  border-radius: 8px;
  border-radius: 8px 4px 8px 4px;
  border: 2px solid 000ff;
}



/* ユーザー名のスタイル */

/* コンテナ */
.chat-line__username-container {
}

/* チャットバッジ非表示 （無効化する場合は下3行を削除) */
.chat-line__username-container span:first-child {
  display: none !important;
}

/* ユーザー名コンテナ */
.chat-line__username {
}

#Twitchコメカスタム

当サイトで公開しているカスタムCSSを、ツイキャスの配信中にコメント欄を表示する目的で使う場合は問題ありませんが、コードの一部又は全体をそのままコピーして、まるで自分が作ったかの様に他のサイトで公開/配布する事はくれぐれも控えて下さい。

You are permitted to edit and to use the generated CSSs to create your creative contents. However, unless permitted by kiimemo.blogspot.com, redistributing and/or falsely claiming intellectual property on parts or whole of the contents of this page via online media is prohibited .

コメント欄サンプル

下は配色を確認する為のサンプル表示になります。 (設定を変更するとサンプルの表示が更新されます。)

: 設定はブラウザに一定期間保存される設定になっていますが、左のリセットボタンで既定値に初期化出来ます。Your browser may recall your previous settings however the setting can be reset to defaults by tapping the RESET button on the left.

Welcome to the chat room!

user_0826

メッセージ1

ユーザー名B

こんばんは

userc redeemed reward

400

userc

メッセージ2　メッセージ2　メッセージ2　メッセージ2　メッセージ2　メッセージ2　メッセージ2

実際に表示されるパーツのサイズや位置がサンプルと微妙に違う場合があるので、『コメ欄』✚ (プラス)や、OBSなどの実際に使う環境内で再度確認して下さい。

例

同じコメント幅

(例) 既定値 + 同じコメント幅

(例) 太めのコメント枠 & 四隅の角 + 同じコメント幅

(例) 二重線のコメント枠 & 四隅の角 + 同じコメント幅

各コメントの幅

単色背景

(例) 既定値

(例) 太めのコメント枠 & 四隅の角

(例) 二重線のコメント枠 & 四隅の角

背景色が文字の色と近い場合は「コメントのフォント」で「縁取りの色を指定」に違う系統の色を設定する事でコメントが読み易くなります。

グラデーション

グラデーションの向きは「角度」で0°～180°調節出来ます。

(例) グラデーション（横） & 枠無し

(例) グラデーション（斜め） & 枠有り

(例) グラデーション（縦） & 枠有り（水色）

(例) グラデーション（横） & 枠有り

このページのカスタムCSSではユーザー名の色を変更しない為、ユーザー名が表示される部分の背景色は明るめの色に設定する事をお勧めします。

備考

現在、全てのコメントの枠が同じ幅で表示される仕様になっていますが、機会があったらコメントの幅に合わせたバージョンも選択出来る様にしたいと思います (02/Sep/2024: 更新しました。)。あと、新しく表示されるコメントのアニメーションも加えたいかと。

更新履歴

[11/Sep/2024]	コメント背景に、これまでの単色塗り潰しに加えて、線形グラデーションのオプションを追加しました。
[02/Sep/2024]	設定の「コメント幅」>「同じ幅のコメント枠」で、全てのコメントを同じ幅()か、各コメントの幅()で表示するオプションを追加。設定に英語表示のオプションを追加。（翻訳家では無いので表現に多少間違いがあるかもしれません。）
[17/Aug/2024]	リセットボタンの位置をサンプルの上に移動。
[14/Aug/2024]	設定の項目を追加。フォント設定: 太文字&イタリック。コメント背景色: 透明度。コメントの４隅: 別々の半径設定。
[13/Aug/2024]	一部の設定値がCSS値に反映されない不都合を修正。
[11/Aug/2024]	初公開

このブログを検索

kii-memo-dev

ラベル

アーカイブ