# アイコン、色、テーマ

## タイトル、アイコン、ロゴ

<figure><img src="/files/336aab7bef1c8758aa406ec244db87fc75cc1043" alt="A GitBook screenshot showing title, icon and logo customization"><figcaption></figcaption></figure>

### タイトル

スペースに好きなタイトルを設定できます。注：この設定は表示されるタイトルにのみ影響します *公開されたドキュメント内で*。GitBook アプリ内のタイトルを編集したい場合は、カスタマイズメニューを閉じて、スペース上部で編集してください。

### アイコン

絵文字を設定したり、独自のアイコンをアップロードしたりできます。 **カスタマイズ** メニューで設定したアイコンは、ドキュメントサイトの favicon として使用されます。

{% hint style="info" %}
この設定は表示されるアイコンにのみ影響します *公開されたドキュメント内で*。GitBook アプリ内で使用されるアイコンを編集したい場合は、スペース内のコンテンツを編集するときに行えます。
{% endhint %}

### カスタムロゴ <mark style="background-color:purple;">（Premium と Ultimate）</mark>

公開されたスペースの *タイトルとアイコンの両方を* カスタムロゴに置き換えることができます。これにより、ドキュメントがより自社のブランドを反映するようになります。さらに、ライトモード用とダークモード用の2つのバージョンをアップロードできます。

{% hint style="info" %}
**アイコンとロゴのオプションの違いは何ですか？**

アイコン設定では、132×132 px の小さな画像をアップロードでき、 *スペースのタイトルの横に表示され、* サイトの favicon として機能します。カスタムロゴオプションでは、より大きな画像（少なくとも600 pxの幅を推奨）をアップロードでき、設定したアイコンとタイトルを完全に置き換えます。
{% endhint %}

## テーマ

テーマを使うと、公開コンテンツの配色をライトモードとダークモードの両方でカスタマイズできます。4つのテーマから選択できます。サイトの色は、選択する **メインカラー** 、 **ティント** によって直接影響を受けます。これら2つの選択はインターフェースのさまざまな部分に影響し、サイトの見た目や雰囲気を大きく変えることができます。

<figure><img src="/files/84d4ef69b7ac4615e5b3f2263d37b54f1c85d44c" alt="A GitBook screenshot showing theme options"><figcaption></figcaption></figure>

### クリーン

半透明性と最小限のスタイル要素を特徴とするモダンなテーマです。メインカラー（またはティント）は、リンクやその他の強調されたインターフェース要素に影響します。

*クリーンはすべてのサイトで利用でき、デフォルトのテーマです。*

### ミュート

要素間のコントラストを抑えた洗練されたテーマです。サイトの背景がより強調されて前景と自然に溶け合い、一部の要素は反転した見た目になります。すべてメインカラー（またはティント）に基づいています。

*ミュートはすべてのサイトで利用できます。*

### 太字 <mark style="background-color:purple;">（Premium と Ultimate）</mark>

存在感のある色と強いコントラストが特徴のインパクトの強いテーマです。メインカラー（またはティント）はサイトのヘッダーに使用され、アイコンなどのその他の強調要素もそれに合わせて色付けされます。

*ボールドは Premium または Ultimate のサイトでのみ利用できます。*

### グラデーション <mark style="background-color:purple;">（Premium と Ultimate）</mark>

グラデーション背景と色のアクセントを特徴とするトレンド感のあるテーマです。グラデーションと強調要素は、メインカラー（またはティント）で彩られます。

*グラデーションは Premium または Ultimate のサイトでのみ利用できます。*

## 色

<figure><img src="/files/9f34801c6eee3033c6b3f99fb066622471314e06" alt="A GitBook screenshot showing color customization"><figcaption></figcaption></figure>

### メインカラー

サイトのメインカラーは、強調されたインターフェース項目や、リンク、現在のページとセクション、パンくずリスト、ヘッダーの主要ボタンなどのナビゲーション要素のスタイルに影響します。

GitBook は、背景とのコントラストが低すぎる場合、または訪問者のシステムがより高いコントラストを要求している場合に、読みやすさのため個々の要素の色を自動的に調整します。

### ティントカラー

サイトのティントカラーは、ヘッダーリンク、アイコンの色、 **質問するか検索** バー

などの UI 要素を含め、サイト全体のすべてのテキストとアイコンの色をわずかに変更します。 *～であってはなりません* ティントカラーは、常にメインカラーを使用するリンクやボタンなどのナビゲーション要素に

内で、 **ティントカラー** 影響します。セクションでは、メインカラーの選択に基づいた推奨色が表示されます。それを選択してプレビューしたり、メインカラーをティントとして選んだり、カラーピッカーで完全にカスタムの色を選んだりできます。

### セマンティックカラー <mark style="background-color:purple;">（Premium と Ultimate）</mark>

セマンティックカラーは、公開コンテンツ内のヒントブロックに適用され、コードブロックにも適用できます。

各ヒントスタイルの背景色を変更できます。これらの変更は、カスタマイズしている公開サイトに反映されます。

{% hint style="info" %}
**注：** GitBook エディター内のヒントブロックは常に標準の色のままで、サイトのセマンティックカラーとは一致しません。
{% endhint %}

### コードテーマ <mark style="background-color:purple;">（Premium と Ultimate）</mark>

コードテーマは、公開ドキュメント内のコードブロックと API ブロックの見た目を変更します。

テーマ一覧には以下が含まれます：

* **アダプティブテーマ** — これらの標準的なライトモードとダークモードのテーマは、サイトのカラーパレットを使ってブランドに合わせます。
* [**Shiki**](https://shiki.style/themes) **テーマ** — ライトモードとダークモードの両方で、60種類以上のテーマプリセットから選べます。

ドキュメントのライトモードとダークモードに、それぞれ個別のコードテーマを選べます。また、どのモードでもライトまたはダークの配色を使用できます。たとえば、ドキュメントがライトモードのときにダークなコードテーマを使うこともできます。

デフォルトでは、選択したテーマはコードブロックと OpenAPI ブロックの両方に適用されます。OpenAPI ブロックに別のテーマを設定したい場合は、 **ブロックタイプごとにカスタマイズ** <picture><source srcset="/files/CG9bVSmdbJnQxrYiNbRI" media="(prefers-color-scheme: dark)"><img src="/files/477fc6b8be7ea4395872753916f62023abc28604" alt=""></picture> ボタンをクリックしてください。

## モード

### モード切り替えを表示

訪問者がライトモードとダークモードを手動で切り替えられるようにしたい場合は、これを有効にしてください。読者は、デスクトップとモバイルの両方で、公開されたページの下部にある切り替えを見つけることができます。

### デフォルトのモード

訪問者にデフォルトでライトモードまたはダークモードのどちらでコンテンツを表示するかを選択します。 **モード切り替えを表示** が有効な場合、モードを切り替えられます。無効な場合は、ここで選択したモードのみが表示されます。

*注：GitBook アプリ内でテーマを変更するには、サイドバー下部の設定メニューに移動してください。*

## サイトのスタイル

<figure><img src="/files/784179aca29e94af972a0825cfbcf1a2264280c7" alt="A GitBook screenshot showing site style settings"><figcaption></figcaption></figure>

### フォントファミリー <mark style="background-color:purple;">（Premium と Ultimate）</mark>

厳選された人気のオプション一覧から、公開コンテンツ用の標準フォントと等幅フォントのファミリーを選択できます。

{% hint style="info" %}
等幅フォントは、ドキュメントサイトのコードブロックと OpenAPI ブロックで使用されます。
{% endhint %}

### カスタムフォント <mark style="background-color:purple;">（Ultimate のみ）</mark>

独自の標準フォントと等幅フォントをアップロードして、公開コンテンツをブランドのスタイルガイドに合わせることができます。フォントをアップロードするには、 **カスタムフォントを追加** をクリックし、指示に従ってください。通常ウェイトと太字ウェイトの両方のフォントファイルをアップロードする必要があります。

GitBook は現在、 `.woff` 、 `.woff2`をサポートしています。その他の形式については、 <support@gitbook.com>.

### アイコン <mark style="background-color:purple;">（Premium と Ultimate）</mark>

にお問い合わせください。ページアイコンを使用する場合は、ここで表示されるアイコンの太さとスタイルを設定します。

### 角のスタイル

ブランドのスタイルの好みに合わせて、角を丸くするか直線にするかを選択します。

### 奥行きのスタイル

カード、ボタン、その他影のある要素に適用される2つの奥行きスタイルから選択します：

* **控えめ：** 少しの影と立体感があります。
* **フラット：** 影や立体感はありません。

### リンクのスタイル

2つのリンクデザインから選択します：

* **デフォルト：** リンク全体をメインカラーまたはティントカラーで強調表示します。
* **アクセント：** リンクに色付きの下線を追加し、テキストの色は変更しません。

## サイドバーのスタイル

<figure><img src="/files/d31e67a9429680a5db18bb4b58bc5979d5608812" alt="A GitBook screenshot showing sidebar style options"><figcaption><p>このメニューでは、さまざまなスタイルによってサイドバーの見た目がどう変わるかを視覚的に確認できます。</p></figcaption></figure>

### 背景スタイル

サイドバーコンテナの背景スタイルを選択します。色は選択したテーマから導き出されます。

2つのオプションがあります — **デフォルト** 、 **塗りつぶし** — それぞれ、目次がどのように変わるかを視覚的に示します。

### リストスタイル

サイドバーのリストと選択項目のスタイルを選択します。3つのオプションがあります — **デフォルト**, **ピル** 、 **ライン** — それぞれ、目次がどのように変わるかを示す視覚的な表現があります。


---

# 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://gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/customization/icons-colors-and-themes.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.
