YouTube対応　横型コメントCSS　ジェネレータ
Horizontal YouTube chat CSS generator

by 青星ふらみ・ X・ツイッターでシェア！

当サイトでYouTubeLive + OBS でコメントを“横一列”に表示するためのCSSを作成できます。
This site allows you to generate custom CSS to create a chat which flows horizontally for your YouTube live to show it using OBS.

(スパチャやメンバーシップのマイルストーンチャットの動作確認は不十分です。何卒ご了承ください。)
(Superchats, membership welcome messages etc might not look properly yet)

使い方・How to use

こちらのサイト【 http://css4obs.starfree.jp/ 】にてお好みでフォントやサイズを調整し、カスタムCSSを作成してください。
※こちらのサイト以外のカスタムCSSも動作する可能性はありますが保証できません。
Generate custom CSS with your favourite chat style using https://chatv2.septapus.com/.
Other custom styles for YouTube chat might be compatible as well, but not guaranteed 😅
作成したカスタムCSSをこちらにペーストしてください。
Paste that custom CSS here:

( )
設定
※細かい調整が必要であれば数値を変更してください。
初期設定でも正常に動作します。（サイトを再度読み込むことで初期設定に戻ります）
Adjust below settings if needed. The initial values should look just ok so you can try with default ones first.
こちらのカスタムCSSをブラウザソースのカスタムCSSにペーストしてください。
Copy below CSS and paste it into "Custom CSS" of OBS browser source.
出来上がり～✨
Done! ✨

・個人、法人問わず利用可能です。収益化している配信での使用も問題ありません。
・当CSSの第三者への再配布、販売、自作発言は禁止です。
・用途に合わせて自由に改変可能です。
・改変したものであっても再配布、販売、自作発言は禁止です。
・クレジット表記、使用報告の義務はありません。
・当サイト、当CSSの利用によって発生したトラブルについては一切責任を負いかねます。
・当サイトは「Chat v2.0 Style Generator」制作者様に許可を得て制作、配布をしております。

お問い合わせはAoboshi FuramiのX（旧Twitter）のDMよりご連絡ください

日本語版サポート　ネル・ニュアージュ

- you can use it on your stream freely for both personal and commercial streams
- you can modify it to your needs
- do not release any part of this site, modified or not, as your own
- you don't have to credit the author to use it
- author of this site can't take responsibility for any problems occuring when using this css
- author of this site is not affiliated with "Chat v2.0 Style Generator" however its author gave a permission to create a horizontal chat based on it

If you have any questions, ask the author via DM on X（Twitter）.

Help with japanese translation: ネル・ニュアージュ

プレビュー・preview

コメント頻度・comments frequency

プレビュー背景色・background

/* ==================== HORIZONTAL CHAT ======================= */
/* =================== by Aoboshi Furami ====================== */
/* ============ https://furami.ch/tools/yokochat/ ============= */
/* =================== https://furami.ch/ ===================== */
/* VERSION v0.2.2 */

:root {
    /*CONFIG*/--animation-speed: 1000; /* [💬🏃‍♀️] px/s | コメントの移動速度・speed of comments movement */  
    /*CONFIG*/--horizontal-spacing: 32; /* [💬↔💬] px | コメント同士の左右の距離・horizontal distance between comments */
    /*CONFIG*/--slidein-amount: 32; /* [⏮📏] px | 新規コメントの移動量（数値の分だけ右奥からコメントが流れてきます） ※0を使用すると新規コメントのアニメーションが無効になります。・additional slide-in amount of new comments (they will start this distance more to the right). Write "0" to disable the additional slide-in animation.*/
    /*CONFIG*/--slidein-animation-speed: 50; /* [⏮🏃‍♀️] px/s | 新規コメントの移動速度 ※0は使用しないでください・speed of the additional slide-in (please do not set it to 0)*/
    /*CONFIG*/--adjust-user-avatar: 0px; /* [😀⬇⬆] アイコンの位置調整（例：『10px』→10px“下”に移動、『-10px』 →10px“上”に移動します）　※pxは消さないでください・adjust position of user avatar. ("10px" will make it appear 10 pixels lower, "-10px" will make it appear 10 pixels higher) */
    /*CONFIG*/--adjust-user-badge: 0px; /* [💸⬇⬆] メンバーバッジの位置調整（例：『10px』→10px“下”に移動、『-10px』 →10px“上”に移動します）　※pxは消さないでください・adjust position of user's badge if it's in strange position now. ("10px" will make it appear 10 pixels lower, "-10px" will make it appear 10 pixels higher) */
    /*CONFIG*/--adjust-user-name: 0px; /* [🖋⬇⬆] 名前（チャンネル名）の位置設定（例：『10px』→10px“下”に移動、『-10px』 →10px“上”に移動します）　※pxは消さないでください・adjust position of user's name. ("10px" will make it appear 10 pixels lower, "-10px" will make it appear 10 pixels higher) */
    /*CONFIG*/--adjust-message: 0px; /* [📄⬇⬆] メッセージ（コメント文面）の位置調整（例：『10px』→10px“下”に移動、『-10px』 →10px“上”に移動します）　※pxは消さないでください・adjust position of message. ("10px" will make it appear 10 pixels lower, "-10px" will make it appear 10 pixels higher) */
    
    /* internal */
    --max-single-comment-width: 20000;
    --min-single-comment-width: 80;
}

#items {
    height: 100vh;
}

#item-scroller.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer {
    overflow: visible !important;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    left: auto !important;
    /* right: calc(-1px * var(--horizontal-spacing)); */
    right: 0;
}

#message.yt-live-chat-text-message-renderer {
    overflow: visible !important;
    contain: none !visible;
}

#item-offset {
    min-height: 100vh !important;
    max-height: 100vh !important;
}

/* yt-live-chat-paid-message-renderer #author-photo, yt-live-chat-legacy-paid-message-renderer #author-photo */
yt-live-chat-text-message-renderer #author-photo {
    position: relative !important;
    top: var(--adjust-user-avatar);
}

yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer {
    position: relative !important;
    top: var(--adjust-user-badge);
}

yt-live-chat-text-message-renderer #author-nam {
    position: relative !important;
    top: var(--adjust-user-name);
}

yt-live-chat-text-message-renderer #message {
    position: relative !important;
    top: var(--adjust-message);
}

yt-live-chat-text-message-renderer #menu {
    display: none !important;
}

@keyframes growfromzero {
    0% { 
        max-width: calc(var(--min-single-comment-width) * 1px);;
    }
    100% {
        max-width: calc(var(--max-single-comment-width) * 1px);
    }
}

@keyframes growmargin {
    0% {
        margin-right: calc(-1px * var(--horizontal-spacing) - 1px * var(--min-single-comment-width));
        right: calc(-1px * var(--horizontal-spacing));
    }
    100% {
        margin-right: 0;
        right: 0;
    }
}

@keyframes slidein {
    0% {
        left: calc(1px * var(--slidein-amount));
    }
    100% {
        left: 0;
    }
}

yt-live-chat-text-message-renderer,
yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-membership-item-renderer {
    animation: 
    growfromzero calc(var(--max-single-comment-width) / var(--animation-speed) * 1000ms), 
    growmargin calc(var(--horizontal-spacing) / var(--animation-speed) * 10 * 1000ms),
    slidein calc(var(--slidein-amount) / var(--slidein-animation-speed) * 1000ms);
    animation-timing-function: 
    linear, 
    cubic-bezier(0.360, 0.000, 0.340, 1.000),
    /* cubic-bezier(0.645, 0.045, 0.355, 1.000); */
    /* cubic-bezier(0.230, 1.000, 0.320, 1.000); */
    cubic-bezier(0.360, 0.000, 0.340, 1.000);
    animation-fill-mode: both;
    /* animation-delay: 0ms, 0ms, calc(var(--min-single-comment-width) / var(--animation-speed) * 10 * 1000ms); */
    animation-delay: 0ms, 0ms, 0ms;
    padding-left: 0 !important;
    padding-right: calc(var(--horizontal-spacing) * 1px) !important;
    height: min-content;
    align-self: center;
    overflow: visible !important;
    contain: none !important;
}

/* ============ END of CSS ============ */
/* =========== CSSはここまで =========== */

YouTube対応 横型コメントCSS ジェネレータ Horizontal YouTube chat CSS generator

by 青星ふらみ ・ X・ツイッターでシェア！

使い方・How to use

プレビュー・preview

YouTube対応　横型コメントCSS　ジェネレータ
Horizontal YouTube chat CSS generator

by 青星ふらみ・ X・ツイッターでシェア！