# レイアウトを編集する

{% hint style="info" %}
[タイマーのレイアウト設定画面の開き方](https://docs.timer-share.com/quick-start/customize/..#taimreiautonoki)はこちらを参照ください。
{% endhint %}

***

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

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FPBkGZAqtcXLLdH7fBrvy%2Ftimer_settings_presetstyle.png?alt=media&#x26;token=143777ab-bb73-4fbf-a89f-cf253373de47" alt="" width="563"><figcaption></figcaption></figure>

#### Preset Styleの例

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2F1sFyOaog7ES1q2rLrsEg%2Fstyles.png?alt=media&#x26;token=a6941b1b-f435-448a-b3a0-c32daa46e3fd" alt="タイマーをカスタマイ"><figcaption><p>タイマーをカスタマイズ</p></figcaption></figure>

***

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

1. [Background](#id-1.-background)
2. [Font](#id-2.-font)
3. [Progress Bar Color](#id-3.-progress-bar-color)
4. [Display](#id-4.-display)

{% hint style="success" %}
変更内容は、「Preview」で変更前に確認できます。

<img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fohrv2P53uXONqYvJ9RSk%2Ftimer_settings_preview.gif?alt=media&#x26;token=794cbc5c-2b6b-44ae-925d-8210a3aac0db" alt="" data-size="original">
{% endhint %}

***

### 1. Background

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fd2zcn24D9qsZ4QWtBP1e%2Ftimer_settings_bg_color.png?alt=media&#x26;token=be8f6624-dc0e-48a4-aa54-7a1fa4013b4c" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="success" %}
「viewer」画面では、[URLパラメータを設定することで背景色を透過色にする](https://docs.timer-share.com/quick-start/advanced-settings-operation/use-url-parameters/viewer-bg-transparent)ことができます。

これは、OBS Studioなどの[ライブ配信ツールとの統合](https://docs.timer-share.com/integration/live-streaming)の際に特に効果的です。
{% endhint %}

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

詳しくは「[背景色にグラデーションを使用する](https://docs.timer-share.com/quick-start/advanced-settings-operation/set-background-gradation)」を参照ください。
{% endhint %}

***

### 2. Font

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FwJZWQOz0KAF6uUpLQmjl%2Ftimer_settings_text.png?alt=media&#x26;token=fc05c629-f7f1-49c7-b047-d4c920cb5e64" alt="" width="563"><figcaption></figcaption></figure>

#### Font Color

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

#### Font Size

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

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

#### Font Style

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FHp7D1wkM4GhKFjp8Iedg%2Ftimer_settings_font_style.png?alt=media&#x26;token=dd792074-a873-4ee1-9533-1f293e517a03" alt=""><figcaption></figcaption></figure>

* スタイル色

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

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

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

{% hint style="warning" %}
「タイマー文字色に透過を使用」は、タイマー文字色を背景色と一致させています(擬似的な透過表現を行っています)。\
そのため、[URLパラメータで背景色を透過色にした場合](https://docs.timer-share.com/quick-start/advanced-settings-operation/use-url-parameters/viewer-bg-transparent)と併用した場合、タイマーの文字色は設定されている「Background」の色になります。
{% endhint %}

***

### 3. Progress Bar Color

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FchqjKJQeBQfgXIxsAy4Z%2Fprogressber_color.png?alt=media&#x26;token=636a048c-f6d6-47f9-8524-266dcc462a9f" alt=""><figcaption><p>ブルーゾーンやイエローゾーン、レッドゾーンの色を変更</p></figcaption></figure>

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

***

### 4. Display

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FTruAfgQENxsSEHEk6irW%2Ftimer_settings_display.png?alt=media&#x26;token=3a8c38ea-15d0-419e-882e-95bea4dc015d" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="success" %}
viewer画面では、[URLパラメータを設定することでタイマーとタイトル、プログレスバーを分離する](https://docs.timer-share.com/quick-start/advanced-settings-operation/use-url-parameters/viewer-screen-separation)ことができます。

これは、OBS Studioなどの[ライブ配信ツールとの統合](https://docs.timer-share.com/integration/live-streaming)の際に特に効果的です。
{% endhint %}

***

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

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fflhli6158JVJYvkIIfCx%2Ftimer_settings_savetype.png?alt=media&#x26;token=0e06ae8e-77d8-4e68-97d6-af3b11bbdb2b" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.timer-share.com/quick-start/customize/edit-display-timer-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.