stream/onecomme の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• stream/onecomme へ行く。
• stream/onecomme の差分を削除

#author("2026-09-18T10:59:55+09:00","default:nemusg.pad","nemusg.pad")
#author("2026-09-18T11:00:19+09:00","default:nemusg.pad","nemusg.pad")
#title(わんコメのカスタムCSS)

#contents

* 概要 [#w661dfb2]

- [[公式テンプレート:https://onecomme.com/docs/templates]] の `retro` をベースにしている状態で、OBSのカスタムCSSに下記を使用することで見た目を調整しています。
- 自由に使ってください。
- Avatorは安全のため非表示にしています。（危険なアイコンを設定されると配信画面に出てしまう）
- 背景の茶色っぽい色は配信フレームの色なのでこのCSSには含まれていません。
- 指定しているフォント [[Rounded M+ (標準):http://jikasei.me/font/rounded-mplus/about.html]]

** retro 名前表示なし（今これ） [#a7b29569]

&ref(./retro_2.png,50%);

#code_x{{
body {
    font-family: "Rounded Mplus 1c Medium",sans-serif;
}

:root {
    --lcv-direction: column;
    --lcv-timeout: 30s;
}

.comment-header {
    margin-bottom: 0;
}

.name {
    display: none; /* 名前非表示 */
}

.avatar {
    display: none; /* アバターアイコン非表示 */
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-top: 6px;
    margin-right: 8px;
}
.badge {
    margin-bottom: 4px;
}

:root {
    --lcv-badge-size: 1em;
}

.comment-text {
    line-height: 1.3em;
}

.comment-text,.name {
    font-size: 24px;
}

.comment-text img {
    height: 1em;
    width: auto;
}
.comment[data-service="twitch"] .comment-text img.gift-image {
    filter: brightness(0) opacity(0.5);
}
.comment[data-service="twitch"] .comment-text img.gift-image[src*="emote_add-2.png"] + img.emote {
    height: 4em;
    width: auto;
}

.comment {
    margin: 8px 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border:0;
    outline:0;
}
.comment:last-child::after{
    display: none; /* 三角非表示 */
}

:root {
    --lcv-name-color: #222;
    --lcv-text-color: #222;
    --lcv-background-color: #ffffff;
    /*--lcv-border-color: #333333;*/
}
}}

** retro 名前表示あり [#ja550653]

&ref(./retro_1.png,50%);

こちらを

#code_x{{
.name {
    display: none; /* 名前非表示 */
}
}}

下記に変更してください

#code_x{{
.name {
    display: block;
}
}}

** 「スタンプを巨大化」対応（仮） [#l62737fd]
** Twitch「スタンプを巨大化」対応（仮） [#l62737fd]

&ref(./retro_3.png,85%);

少し画像がぼんやりしますが、通常のエモートより大きく表示できます。

#code_x{{
.comment[data-service="twitch"] .comment-text img.gift-image[src*="emote_add-2.png"] + img.emote {
    height: 4em;
    width: auto;
}
}}

#include(parts/feedback,notitle)