---
type: how-to
title: ゲームのスキンをカスタマイズする
summary: スキンタブで、モード（ライト、ダーク、または両方）ごとにまとめられたゲームの色と視覚アセットを上書きします。Alpha プラン以上で利用可能。
---

ゲームは既定の見た目とともに出荷されます。ゲームのエディターの **スキン** タブで、その色を上書きし、その視覚アセット（画像、そしてゲームが使う場合は音声と動画）を入れ替え、作者が公開した色以外のつまみ（トグル、数値、選択肢）を設定できるので、チャレンジがあなたのブランドに合います。変更はレンダリングされるゲームに適用されます。

スキンのカスタマイズは **Alpha プラン以上**（Alpha、Troop、Apex）で利用可能です。

## 色、アセット、その他のつまみを設定する

サイトキー（またはチーム）の **ゲーム** ページでゲームを開き、それから **スキン** タブを開きます。タブは、ゲームの作者が公開したスロットを示します。ほとんどは色とアセットですが、作者は **トグル**（オン/オフ）、**数値**（しばしば最小と最大つき）、あるいは固定リストからの **選択肢** も公開できます。色は hex か `rgb()` 値で設定し、アセットはファイルをアップロードするか URL を貼り付けて設定し（下記参照）、ほかのスロットは示されるコントロールで設定します。スロットに触れずに残せば、ゲームのバンドル済みの値を保ちます。

## 実行時にスキンがどう選ばれるか

各プリセットは、それが働く **モード** を宣言します。ライト、ダーク、または **any**（どちらの背景でもよく読めます）です。モードごとに 1 つの既定があるので、訪問者のデバイスがどちらのモードを好んでも、ゲームは正しく見えます。`any` とマークされたプリセットは、ライト、ダーク、または両方の既定になる資格があります。1 つを選ぶのは 2 段階で起きます。

まずウィジェットが、どのスキンを求めるか決めます：

1. ページが設定していれば、ウィジェットの `skin` 属性。厳密なプリセット名（たとえば `midnight`）か、ショートカット `light` / `dark` です。
2. それ以外は、訪問者のシステム設定（`prefers-color-scheme`）。`light` か `dark` に解決されます。

それからサーバーが、あなたの上書きをマージした後（サイトキー、チーム、ゲームのバンドル済みセットの順）、それをプリセットに対して照合します。属性の厳密なプリセット名はきっぱり勝ちます。それ以外は、選ばれたモードについて、サーバーは宣言順で、そのモードの資格があり **既定** とマークされた最初のプリセットを取ります（プリセットは、そのモードがそのモードか `any` のとき資格があります）。既定とマークされたものがなければ、最初の資格あるプリセットを取ります。

`any` プリセットは両方のモードの資格があるので、1 つのスキンをどこでも既定にしたり、片方のモードに専用のスキンを与えて `any` スキンにもう片方をカバーさせたりできます。スキンタブでは、`any` スキンはライトとダークの両方のグループの下に現れ、どちらか、または両方の既定として設定します。

`<caputchin-game>` 要素では、インラインの `skin` オブジェクトも渡せます。属性の値として書かれた JSON オブジェクトで、たとえば `skin='{"primary":"#7c3aed"}'` です。ウィジェットはそれをそのマウントのスキンシグナルとしてサーバーへ送り、サーバーはそれをパースして解決済みのプリセットの上に重ねるので、あなたのインラインの色とアセットは上のすべて（あなたのチームとサイトキーの上書きを含む）に勝ちます。それはあなた自身のマークアップのプロパティなので、どのプランでも動きます。チェックボックスの `<caputchin-widget>` はインラインスキンを受け付けません。その `skin` 属性は `light` / `dark` かプリセット名だけを取ります。なぜこの埋め込みごとの作成が無料かは [私たちの哲学](/docs/understanding-caputchin/philosophy) を参照してください。

## アセット：アップロードかリンク

アセットスロット（画像、音声、動画）は、アップロードしたファイルか、あなたが貼り付ける URL のどちらかを取ります：

- **アップロード**：Caputchin はファイルのスナップショットを保存します。それは凍結されるので、もう一度アップロードしない限り変わりません。
- **リンク**：あなたがホストするファイルへの `https` URL を貼り付けます。それはライブなので、その URL のファイルを置き換えると、次の読み込みでゲームが更新されます。

ゲームはサンドボックス化されたフレームで動くので、リンクされたアセットは、そのオリジンが許可される場合だけ読み込まれます。Caputchin がそれをあなたの代わりに扱います。あなたのスキンプリセットが指すオリジンちょうどを許可し、ほかは何も許可しません。あなた自身がどのポリシーも変えません。

各アセット型は固定のフォーマットのセットを受け付けます（たとえば画像なら PNG、JPEG、WebP、SVG、GIF）。正確なフォーマットと色のルールは [スキーマリファレンス](/docs/references/customization-schema) にあります。

## 何が適用され、どこで

スキンの上書きはサーバーで、最も具体的なものが勝つで解決されます。サイトキーのプリセットはチームのプリセットに勝ち、それはゲームのバンドル済みのスキンに勝ちます。バンドル済みのプリセットを拡張し、欲しいスロットだけを上書きして、残りを継承できます。

## スキンの値がどうゲームに届くか [#how-a-skin-value-reaches-the-game]

サーバーはあなたのスキン（バンドル済みセットの上にマージされたあなたの上書き）を解決し、結果を **ゲーム自身のコード** に渡します。それがそれで自分を描きます。色とアセットの URL はテキストとして届き、トグルは本物の `true` / `false`、数値は本物の数値、選択肢は選ばれた文字列として届きます。各値がどう使われるかはゲームの作者が決めるので、スロットが実際に何を変えるかはゲーム次第です。ゲームのために CSS は一切書きません。それはあなたのページからスタイルできないサンドボックス化されたフレームで動きます。

**ウィジェットシェル**（ゲームの周りの Caputchin のクロームと、単独のチェックボックス）は別です。その解決済みのスキンは、`--cpt-skin-<token>` という名前の CSS カスタムプロパティとしてあなたのページにも公開され、あなた自身のスタイルシートから読んだり上書きしたりできます。その面と、シェルをホワイトラベルする方法は [CSS でウィジェットをスタイルする](/docs/widget-customization/css-parts) で扱います。それらの変数はシェルのものだけです。ゲームのスキンは運びません。

## あわせて読む

- [ゲームのカスタマイズの概要](/docs/game-customization/overview)：ゲームを登録して管理する。
- [構成](/docs/game-customization/configurations) と [言語](/docs/game-customization/locale)：ほかの 2 つの軸。
- [スキーマリファレンス](/docs/references/customization-schema)：色のルール、アセットのフォーマット、プリセットモデル。
- [CSS でウィジェットをスタイルする](/docs/widget-customization/css-parts)：シェルの `--cpt-skin-*` 変数とシャドウパーツ。