メモ帳

ツイキャスのコメント欄のオーバーレイに表示される コメントをフェードイン+フェードアウト させるCSS設定を思い付いたのでここにメモしておきます。 ( ※: 時間が経つとコメントがすべてフェードアウトして消えてしまうという事はありません。) 動的なアニメーションが既に組み込まれていない既存のカスタムCSSであれば、 このメモの最後にあるCSSアドオン を既存のカスタムCSSの最後に付け加える事でコメントのフェードイン+フェードアウトのエフェクトを追加する事が出来ると思います。 又、CSSセレクタを変更すればツイキャスだけでなくYouTubeやTwitchのコメント欄にも対応できるはずです。 [ 目次 ] コメントのフェードイン、フェードアウト アニメーション(animation)プロパティ フェードイン フェードアウト コメントの最大表示数 CSSアドオン アドオン設定 コメントのフェードイン、フェードアウト ツイキャスのコメント欄のオーバーレイ用のカスタムCSSをマウスでクリックしながらいろいろとカスタマイズ出来る『 OBSキャスコメ CSSカスタマイザ ー (v0.2) 』のメモ📝をこのサイトで公開していますが、かなり前にこのメモへのコメントとして 次の様な質問 をいただきました: OBS 2021年12月18日土曜日 9:44:00 JST コメントのフェードイン、フェードアウトとかは難しいのでしょうか カスタムCSSを使って、コメントのフェードイン、フェードアウトを表現するには、次の様な動的な表示が必要になると思いますが: フェードイン (fade in) 新しいコメントが初めて表示される際に、薄い表示状態から始まって、徐々に濃い表示になる。 すでに表示されているコメントの表示位置が新しいコメントの高さの分、下方向に移動する。

2021年末 からツイキャスのコメント欄のオーバーレイが、ツイキャスのサイトからコピーする正規のURLを使うとコメントとユーザー名に黒い縁取りが表示される仕様になりました。 コメント欄の背景がコメント文字の色に近い場合はこの黒い縁取りがあることで文字が見易くなる事もあると思いますが、カスタムCSSで設定した文字の色が縁取りの黒色に暗い場合や、後ろにくる背景画に暗い色の要素が全く含まれていない場合だと、 文字の「黒い」縁取りの存在がとても残念 に思える場合があると思います。 今回は 文字の縁取りの色を変えただけ のシンプルなカスタムCSSを作ってみました。。。 でも、それだけだとつまらないので、設定でプラスでユーザーアイコンやタイムスタンプも表示出来る仕様になっています。 OBSでツイキャスのコメント欄を設定する方法や、下に説明するCSSをOBSに読み込ませる方法については、先に別のメモ「📝 ツイキャスのコメント欄を表示 (サムネ付きで) 」を参照して下さい。 ※ 既存のカスタムCSSを変更せず、URL内の値を変更して文字の黒い縁取りを消す事も可能です。 👉 『URL内の「style=2」パラメータ』 (📝配信ツール向けオーバーレイのURLを探せ??) [ 目次 ] カスタムCSS コメント欄サンプル 設定 更新履歴 今後の改善点 (??) [関連メモ] 👉 📝「 そこまでシンプルでもないキャスコメ欄カスタムCSS 」: フォントやコメント以外の文字サイズのカスタマイズにも対応したバージョン 👉 📝 キャスコメカスタムCSS まとめ 下の 設定 で各パーツの表示/非表示の変更ができます。 コメント欄の文字の縁取りの色を変更するだけでもコメント欄がかなり映えると思いますがどうでしょう・・。 現在使っている 既存のカスタムCSSに文字の縁取りの色を変えるCSS設定を追加したい場合 は、別のメモにある次の追記を参考にしてみて下さい: