# 背景色にグラデーションを使用する

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fu68iFhrD8GNys10CBptb%2Fbg_gradation.gif?alt=media&#x26;token=3af83340-72cd-492a-bc25-95f90f6bdc65" alt="背景色にグラデーションを使用"><figcaption><p>背景色にグラデーションを使用</p></figcaption></figure>

{% hint style="danger" %}
グラデーション機能は実験的な機能です。一部のスタイル機能が制限されます。

グラデーション表現は描画処理に負荷がかかるため、デバイスの能力によっては動作が重くなる可能性があります。動作が重い場合には、[アニメーションを無効にする](#animshonwosuru)かグラデーションの使用をしない選択肢をご検討ください。
{% endhint %}

***

## グラデーションを有効にする

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

Backgroundから「グラデーションを使用」にチェックすることでグラデーション機能を有効にできます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FkVWT6QuN78oCXALqenGT%2Fset_bg_gradation.png?alt=media&#x26;token=b5b53e93-ddde-4593-9ff0-e227a32ab371" alt="グラデーション機能を有効化" width="563"><figcaption><p>グラデーション機能を有効化</p></figcaption></figure>

***

## アニメーションの半周期時間の設定

グラデーションのプレビュー下のタイムカーソルを動かすことで、アニメーションの動きを確認できます。

アニメーションの半周期時間は、カーソル右下から設定できます。\
デフォルトは300秒です。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FExQYz9Gxd1m5f4Wjzl5u%2Fbg_gradation_anime.gif?alt=media&#x26;token=c7b7f7a8-a3c1-4dd2-9464-74b2c6f3d653" alt="アニメーションの動きを確認"><figcaption><p>アニメーションの動きを確認</p></figcaption></figure>

{% hint style="danger" %}
周期時間を短く設定(0秒以外)すると、グラデーション表現の描画処理に負荷がかかります。
{% endhint %}

***

### アニメーションを無効化する

半周期時間を0秒に設定することで、アニメーションを無効化できます。

***

## エレメントの設定

グラデーションは3つの円形のエレメントで表現されます。

### ランダム設定

グラデーションのプレビュー右下の「ランダム生成」をクリックすると、グラデーションをランダムに生成します。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2F40PYqYyvzfi6yPQzo0WF%2Frundom_gradation.gif?alt=media&#x26;token=792286dc-a896-408e-81cb-67ff0c9d2d86" alt="グラデーションのランダム生成"><figcaption><p>グラデーションのランダム生成</p></figcaption></figure>

### 個別エレメントのカスタマイズ

各エレメントの「色」と「位置(x,y)」と「グラデーションの開始及び終了位置(s,e)」を半周期時間の開始、中間、終了の3時点で個別にカスタマイズできます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FEyxiA7al14x8wvJQDLmG%2Fcustom_bg_gradation_element.png?alt=media&#x26;token=cf0f1e1b-fff7-40cc-a5bf-24e41320bc58" alt="個別エレメントのカスタマイズ"><figcaption><p>個別エレメントのカスタマイズ</p></figcaption></figure>

{% hint style="info" %}
位置について

x座標は、画面の左端が0%、画面の右端が100%です。y座標は、画面の上端が0%、画面の下端が100%です。
{% endhint %}

{% hint style="info" %}
グラデーションの開始及び終了位置について

グラデーションの開始位置(※)まで原色をつかい、終了位置(※)で透明色になるようなグラデーションを描きます。\
※ エレメントの中心から最も遠い画面の縁までの距離の百分率(%)
{% endhint %}


---

# 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/advanced-settings-operation/set-background-gradation.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.