質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

5661閲覧

YouTubeLiveのチャット欄のOBSによるCSS修飾について

ryoumuni0486

総合スコア12

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/29 22:20

編集2018/10/30 15:39

前提・実現したいこと↓

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/10/29 23:19

OBSはよく知らないですが、現状どのように構築されているか、どうコードを組まれているか提示されないと回答はのぞめないのではないでしょうか。
ryoumuni0486

2018/10/30 00:03

ソースコードを追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問