> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/customization/icons-colors-and-themes.md).

# アイコン、色、テーマ

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

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FBYTJub4AuG2iJDCS31vp%2Ftitle_icon_logo%402x.png?alt=media&#x26;token=2e3fd867-a480-40da-919b-d5c1e6225317" alt="A GitBook screenshot showing title, icon and logo customization"><figcaption></figcaption></figure>

### タイトル

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

### アイコン

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

{% hint style="info" %}
この設定は、表示されるアイコンにのみ影響します *公開されたドキュメント内で*。GitBook アプリ内で使用されるアイコンを編集したい場合は、コンテンツをそのセクション自体で編集する際に変更できます。
{% endhint %}

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

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

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

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

## テーマ

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

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FtFNAAIZeXh1JKtnWepYZ%2Ftheme%402x.png?alt=media&#x26;token=d8d191df-5ed8-44b1-886a-bd9344add841" alt="A GitBook screenshot showing theme options"><figcaption></figcaption></figure>

### クリーン

透過表現と最小限のスタイルの要素を備えたモダンなテーマです。プライマリカラー（またはティント）は、リンクやその他の強調されたインターフェース要素に影響します。

*Clean はすべてのサイトで利用でき、既定のテーマです。*

### Muted

要素間のコントラストを抑えた洗練されたテーマです。サイトの背景がより際立ち、前景と自然に溶け合います。また、いくつかの要素は反転した見た目になります。これらはすべて、プライマリカラー（またはティント）に基づいています。

*Muted はすべてのサイトで利用できます。*

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

鮮やかな色と強いコントラストが際立つインパクトのあるテーマです。サイトのヘッダーにはプライマリカラー（またはティント）が使われ、アイコンなどの他の強調要素もそれに合わせて色付けされます。

*Bold は Premium または Ultimate のサイトでのみ利用できます。*

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

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

*Gradient は Premium または Ultimate のサイトでのみ利用できます。*

## カラー

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FkfBttkCRhIqoNFZGXkX4%2Fcolors%402x.png?alt=media&#x26;token=2ddbf1b0-7893-4fc2-a849-f92656b3151f" alt="A GitBook screenshot showing color customization"><figcaption></figcaption></figure>

### プライマリカラー

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

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

### ティントカラー

サイト全体のすべてのテキストとアイコンの色が、ヘッダーのリンク、アイコンの色、そして **検索または質問する** バーなどの UI 要素を含めて、

ティントカラーは *影響し* ません。リンクやボタンなどのナビゲーション要素には影響せず、これらは常にプライマリカラーを使用します。

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

<details>

<summary>ティントを使って背景色を設定する</summary>

非常に明るい（白に近い）か非常に暗い（黒に近い）ティントを選び、その色がニュートラルな色合いに近い場合、GitBook は既定の白または暗色の背景の代わりに、それをサイトの正確な背景色として使用します。これにより、適切なティントを選ぶだけで、ライトモードでは控えめなオフホワイトや温かみのある紙のような質感を、ダークモードでは特定の深い暗色の背景をドキュメントに与えられます。

{% hint style="info" %}
覚えておくべき点がいくつかあります。

* ティントはニュートラルに近い必要があります（色味はごく薄く）。強い色のティントは GitBook の標準背景を維持し、アクセント部分にのみ色が付きます。
* 明るい、または暗いとはっきり分かる必要があります。中間的なグレーでは背景は変わりません。
* この **Bold** テーマでは、ティントはページ背景ではなくヘッダーのスタイルに適用されるため、背景はそのままです。
  {% endhint %}

</details>

### セマンティックカラー <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="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F6uYUpJto7WTkJf9BUPHv%2Fsettings%20-%20dark.svg?alt=media&#x26;token=bf52415f-e999-43a2-9a1a-c85176a014cd" media="(prefers-color-scheme: dark)"><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FwkBqgOPry9HAcW4cxJk0%2Fsettings.svg?alt=media&#x26;token=67bdbb00-ebf3-4a2d-9df8-0c822406f71c" alt=""></picture> ボタンをクリックしてください。

## モード

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

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

### 既定のモード

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

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

## サイトスタイル

<figure><img src="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FB8hReiw1xjsXedx7kM2J%2FSite%20styles%402x.png?alt=media&#x26;token=99b1f18b-d1f3-42e4-b11f-4b7bee1c4ceb" 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="https://1050631731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FjAXB2lbCWFVFhHTDmY3s%2Fsidebar_styles%402x.png?alt=media&#x26;token=c922b2e7-04de-4140-97e0-802375f9c92f" alt="A GitBook screenshot showing sidebar style options"><figcaption><p>このメニューでは、異なるスタイルによってサイドバーの見た目がどう変わるかを視覚的に把握できます。</p></figcaption></figure>

### 背景スタイル

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

選択肢は 2 つあります — **既定** と **塗りつぶし** — それぞれ、目次がどのように変わるかを視覚的に示します。

### リストスタイル

サイドバーのリストと選択中の項目のスタイルを選択します。選択肢は 3 つあります — **既定**, **ピル** と **ライン** — それぞれ、目次がどのように変わるかを視覚的に示します。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/customization/icons-colors-and-themes.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
