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

**URL:** <https://forum.onecomme.com/t/topic/1601>\
**Category:** カスタマイズ\
**Created:** [2024 年 4 月 12 日午前 10:17 UTC](https://forum.onecomme.com/t/topic/1601 "2024-04-12T10:17:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 4 月 12 日午前 10:17 UTC](https://forum.onecomme.com/t/topic/1601/1 "2024-04-12T10:17:30Z")

</div>

## 対象

テンプレート

## 対象となるサービス

すべて

## 内容

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

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

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![ASTIE](https://yyz1.discourse-cdn.com/flex031/user_avatar/forum.onecomme.com/astie/32/58_2.png) [@ASTIE](https://forum.onecomme.com/u/ASTIE)\
**Post date:** [2024 年 4 月 13 日午前 12:15 UTC](https://forum.onecomme.com/t/topic/1601/2 "2024-04-13T00:15:29Z")

</div>

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

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

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/c/c558ce26380208a6937b4a6a53bfaf80476d2728.png)

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

```auto
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](https://canada1.discourse-cdn.com/flex031/uploads/onecomme/original/2X/5/577ca7512da6f74fd854ba84ca4beaead37c1eb2.png)

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

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 4 月 13 日午前 3:24 UTC](https://forum.onecomme.com/t/topic/1601/3 "2024-04-13T03:24:22Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![yukihiko78](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@yukihiko78](https://forum.onecomme.com/u/yukihiko78)\
**Post date:** [2024 年 4 月 14 日午前 3:02 UTC](https://forum.onecomme.com/t/topic/1601/4 "2024-04-14T03:02:16Z")

</div>

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

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