テンプレート"synapse"のカスタムCSSについて

カスタマイズ
1

対象

テンプレート

対象となるサービス

すべて

内容

テンプレート “synapse” のフォントや表示時間の変更したり、特定のユーザーを非表示にする為にカスタムCSS を追加したいと思っています。

OBS にてカスタムCSS を追加することで、フォントは他のテンプレートと同様の CSS を追加することで変更することができましたが、表示時間の変更や特定ユーザーのみを非表示にすることができませんでした。

表示時間の変更と特定ユーザーの非表示には、下記の CSS を OBS で指定しました。

:root {
–lcv-direction: column;
–one-sdk-life-time: 9000
}

[data-user=“ゆきひこ”] {
display: none;
}

表示時間は30秒から変わらず、特定ユーザーを非表示にする CSS を追加すると指定したユーザーだけでなく、全てのユーザーが表示されなくなってしまいます。

他のテンプレートでは反映されるのですが “synapse” では反映されないので、どのような CSS を追加すればよろしいでしょうか？

2

こんにちは
synapseは標準のテンプレートのようにCSSから適用する機能がありません
そのため、script.js自体に修正を加える必要があります

■ 表示時間の調整について
script.js 3行目の LIFE_TIME の数字を変更してください（1000 = 1秒）

image
image755×157 11.1 KB

■ 除外するユーザーについて
script.js 131行目～148行目の mounted() { ... }, 部分を下記に置き換えて、テストユーザーの部分を除外したいユーザー名に変更してください

mounted () {
  const EXLUDE_USERS = [
    'テストユーザー',
    'テストユーザー2',
  ]
  OneSDK.setup({
    jsonPath: JSON_PATH,
    commentLimit: LIMIT,
    mode: 'diff'
  })
  OneSDK.subscribe({
    action: 'comments',
    callback: (comments) => {
      if (comments.length !== 0) {
        this.comments.push(...comments.filter(comment => !EXLUDE_USERS.includes(comment.data.name)))
      }
    }
  })
  OneSDK.connect()
  world.start()
},

image
image1579×802 57.5 KB

, など漏れやすいので気を付けてください

3

ご回答いただきまして、ありがとうございます！

本日は家に戻れないため、明日以降になりますが試して結果をご報告させていただきます。

4

ご報告が遅くなりまして申し訳ございません。

表示時間の調整と除外ユーザーの設定に関しまして、無事に希望通りにすることができました。
この度はありがとうございます！