レイアウトを編集する

タイマーのレイアウトを利用シーンに応じたものにカスタマイズします

タイマーのレイアウト設定画面の開き方はこちらを参照ください。

---

Preset Style(事前定義済みのレイアウト)を利用する

事前に定義された15種類以上のPreset Styleからレイアウトを変更することができます。

Preset Styleの例

タイマーをカスタマイズ

---

個別要素ごとにレイアウトを変更する

1. Background

2. Font

3. Progress Bar Color

4. Display

変更内容は、「Preview」で変更前に確認できます。

---

1. Background

タイマーの背景色を選択できます。

「viewer」画面では、URLパラメータを設定することで背景色を透過色にすることができます。

これは、OBS Studioなどのライブ配信ツールとの統合の際に特に効果的です。

Backgroundで「グラデーションを使用」が選択できます。これは、実験的な実装で一部のスタイル機能が制限されます。

詳しくは「背景色にグラデーションを使用する」を参照ください。

---

2. Font

Font Color

タイマーの「時間」 「タイトル」 「現在時刻」の文字色を選択できます。

Font Size

タイマーの「時間」 「タイトル」 「現在時刻」の文字サイズを5段階で選択できます。

Font Sizeで設定された値にかかわらず、デバイスの画面サイズに応じて最適なサイズへ自動的に拡大・縮小されますので、画面サイズに関わらずタイマーの視認性を確保します。

Font Style

タイマーの「時間」のフォントスタイルを変更できます。 各選択肢のイメージは次のようになります。

• スタイル色

「Default」以外の選択肢で、「Outline」「Shadow」「Neon」のスタイル色を設定できます。

• タイマー文字色に透過を使用

「Default」以外の選択肢では、「タイマー文字色に透過を使用」を選択できます。 これを選択すると、タイマー文字色を背景色と一致させます。

「タイマー文字色に透過を使用」は、タイマー文字色を背景色と一致させています(擬似的な透過表現を行っています)。 そのため、URLパラメータで背景色を透過色にした場合と併用した場合、タイマーの文字色は設定されている「Background」の色になります。

---

3. Progress Bar Color

タイマー詳細設定からブルーゾーンやイエローゾーン、レッドゾーンの色を変更できます。

ブルーゾーンやイエローゾーン、レッドゾーンの色を変更

イエローゾーンとレッドゾーンに設定した残り時間になると、進行しているタイマーのタイマー文字色は自動的に各ゾーンに設定した色に強調されます。

---

4. Display

「ロゴ」 「タイトル」 「現在時刻」 「プログレスバー」 の表示・非表示を変更できます。

viewer画面では、URLパラメータを設定することでタイマーとタイトル、プログレスバーを分離することができます。

これは、OBS Studioなどのライブ配信ツールとの統合の際に特に効果的です。

---

特定のタイマーにのみ変更を適用する

設定した内容をすべてのタイマーに適用する場合には、「全てのタイマーに適用」にチェックをつけます。