ゆきすな tools

プレビュー

チャットオーバーレイプレビュー

⭐ゆきちゃん: こんにちは！配信楽しみにしてました 🎉

TwitchFan99: 初見です！よろしくおねがいします 👋

🛡️mod_alice: 今日も楽しい配信ですね！

⭐subscriber_bob: クリップ作りました！めっちゃいいシーン

GamingPro2025: このゲーム面白そう！GG 🎮

生成された CSS

💡 OBS > ブラウザソースを追加し、URL に https://www.twitch.tv/popout/チャンネル名/chat?popout= を設定後、「カスタムCSS」に下記を貼り付けてください

/* ============================================
 * Twitch Chat OBS CSS
 * Generated by yuki-tools
 * --------------------------------------------
 * 使い方:
 *   1. OBS > ブラウザソース を追加
 *   2. URL: https://www.twitch.tv/popout/チャンネル名/chat?popout=
 *   3. 「カスタムCSS」に下記を貼り付ける
 * ============================================ */

/* ==========================================
   背景・ベース
   ========================================== */
body,
.chat-room,
.chat-line__moderation,
.chat-line__status,
.chat-line__message,
.chat-author__display-name {
  background-color: transparent !important;
  overflow: hidden;
}
html { overflow: hidden; }

/* ==========================================
   非表示にする要素
   ========================================== */

/* スクロールバー */
::-webkit-scrollbar,
.simplebar-scrollbar {
  display: none !important;
}

/* チャット入力欄・送信ボタン・ヘッダー */
.stream-chat-header,
.channel-leaderboard-container,
.chat-input,
.chat-input-section,
.chat-room__content .chat-input-container {
  visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
}

/* ハイライト・コミュニティカード */
.community-highlight-stack__container,
.community-highlight-stack__scroll-area--disable,
.community-highlight-stack__backlog-card,
.community-highlight-stack__nav-target {
  display: none !important;
}

/* ピン留めメッセージ */
.paid-pinned-chat-message-list,
.paid-pinned-chat-message-content-wrapper {
  display: none !important;
}

/* 新着・返信・その他UIボタン */
.pMQwv,
.scrollable-trigger__trigger-area,
.jIBntd,
.xxjeD,
.cBRHGH {
  display: none !important;
}

/* ステータス行（入室・退室など） */
.chat-line__status {
  display: none !important;
}

/* ユーザー通知行（サブスクライブ通知など） */
.user-notice-line {
  display: none !important;
}

/* ログイン名 (@username) */
.chat-author__intl-login {
  display: none !important;
}

/* タイムスタンプ */
.chat-line__timestamp {
  display: none !important;
}

/* ユーザー名の隣のコロン区切り */
span[aria-hidden="true"] {
  display: none !important;
}

/* ホバー時に出るUI */
.chat-line__username-container.chat-line__username-container--hoverable span div {
  display: none !important;
}

/* アナウンスライン（透明化） */
.announcement-line {
  background-color: transparent !important;
  border: none !important;
}

/* ボーダー除去（Twitchの内部クラス） */
.fiHaCw {
  border: none !important;
}

/* ==========================================
   メッセージスタイル
   ========================================== */
.chat-line__message {
  background: rgba(255, 255, 255, 1) !important;
  color: #333333 !important;
  border: 2px solid #9147ff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  font-size: 13px !important;
  margin: 6px 4px 8px !important;
  padding: 5px 10px !important;
}

/* ユーザー名色: Twitchの設定値をそのまま使用 */
/* .chat-author__display-name { color: #9147ff !important; } */

/* メッセージテキスト */
.text-fragment,
.message-parser {
  color: #333333 !important;
}

/* バッジ */
.chat-badge {
  vertical-align: middle !important;
}

/* エモート */
.chat-image {
  vertical-align: middle !important;
}