メインコンテンツまでスキップ
Version: 5.0

テンプレートで自分のコメントにだけスタイルを適用する方法

自分のコメントだけ異なるスタイルを適用するCSSの例

※必ずテンプレートを複製して別名のフォルダを作ってカスタマイズしてください

OBSにテンプレートを表示し、カスタムCSSに下記のように適用したCSSを追加します

[data-user='あなたの名前'] {  
background: #000;
}

例 Lineテンプレートで特定の名前のユーザーの吹き出しだけ反対側に出す

OBSのカスタムCSSの次のCSSを追加します

※ 「テストユーザー」の部分はユーザー名に合わせて変更してください

[data-user="テストユーザー"] {  
--lcv-side-left-visible: none;
--lcv-side-right-visible: block;
--lcv-side: var(--lcv-side-right);
--lcv-icon-side: var(--lcv-icon-side-right);
align-self: flex-end;
}
[data-user="テストユーザー"] .comment-block {
text-align: right;
}
[data-user="テストユーザー"] .comment-text {
text-align: left;
}

※ line-rightの場合

[data-user="テストユーザー"] {  
--lcv-side-left-visible: block;
--lcv-side-right-visible: none;
--lcv-side: var(--lcv-side-left);
--lcv-icon-side: var(--lcv-icon-side-left);
align-self: flex-start;
}
[data-user="テストユーザー"] .comment-block {
text-align: left;
}
[data-user="テストユーザー"] .comment-text {
text-align: right;
}