前提・実現したいこと↓
OBSでYouTubeLIVEのチャットニコニコ風に映すためにCSSを書いてます。
とりあえず右から左へ流れるようには出来たのですが、新しいチャットが下に来てしまいます。
なので、これを上に新しいチャットが来るようにしたいです。
やりたいこと
YouTubeLIVEのチャットの更新される方向をCSSで上にしたい
現状のソースコード
CSS
1@import url("https://fonts.googleapis.com/earlyaccess/notosansjp.css"); 2 3/*チャットの背景を消す*/ 4yt-live-chat-renderer { 5 background-color: transparent !important; 6} 7yt-live-chat-text-message-renderer, 8yt-live-chat-text-message-renderer[is-highlighted] { 9 background-color: transparent !important; 10} 11 12/*上のやつと入力欄を消す*/ 13yt-live-chat-header-renderer, 14yt-live-chat-message-input-renderer { 15 display: none !important; 16} 17 18/*スクロールバーを消す*/ 19yt-live-chat-item-list-renderer #items{ 20 overflow: hidden !important; 21} 22 23yt-live-chat-item-list-renderer #item-scroller{ 24 overflow: hidden !important; 25} 26 27/*アニメーションの設定*/ 28 29@keyframes anim { 30 0% { 31 opacity: 1; 32 transform: translateX(100%); 33 } 34 100% { 35 opacity: 1; 36 transform: translateX(-150%); 37 } 38} 39 40yt-live-chat-text-message-renderer, 41yt-live-chat-legacy-paid-message-renderer { 42 animation-timing-function: linear; 43 animation: anim 15s; 44 animation-fill-mode: forwards; 45} 46 47/*チャットの設定*/ 48yt-live-chat-text-message-renderer #message, 49yt-live-chat-text-message-renderer #message * { 50 font-family: "Noto Sans JP"; 51 color: #ffffff !important; 52 font-size: 80px !important; 53 line-height: 80px !important; 54 white-space: nowrap; 55 overflow: visible; 56 text-overflow: ellipsis; 57 text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000; 58} 59
補足情報(FW/ツールのバージョンなど)
使用OS:Windows 10
OBSバージョン:22.0.2
あなたの回答
tips
プレビュー