> 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/saitowosuru/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 %}

### カスタムロゴ <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

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

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

### クリーン

透過感と最小限の装飾要素を特徴とするモダンなテーマです。基本色（またはティント）はリンクや、他の強調されたインターフェース要素に影響します。

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

### ミュート

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

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

### 太字 <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

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

### グラデーション <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

*グラデーションは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要素を含む、サイト全体のすべてのテキストとアイコンの色をさりげなく変化させます: **質問するか検索** バー。

ティント色は *CRをマージしません* リンクやボタンのようなナビゲーション要素に影響します。これらは常に基本色を使用します。

で、 **ティント色** セクションでは、基本色の選択に基づいた提案色が表示されます。いずれかを選んでプレビューしたり、基本色をティントとして選んだり、カラーピッカーで完全にカスタムの色を選ぶことができます。

<details>

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

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

{% hint style="info" %}
留意点がいくつかあります:

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

</details>

### セマンティックカラー <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

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

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

### コードテーマ <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

コードテーマは、公開ドキュメント内のコードブロックと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>

### フォントファミリー <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

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

### カスタムフォント <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

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

GitBookは現在次をサポートしています `.woff` 、 `.woff2`。その他の形式については、次へお問い合わせください <support@gitbook.com>.

### アイコン <picture><source srcset="/files/8pdGCn8TI6WIcFGsPNFh" media="(prefers-color-scheme: dark)"><img src="/files/847fbb978db0c30d224cc5849da682d93f0b9b31" alt=""></picture> <picture><source srcset="/files/iRBqMn8OAyswwIZUIKbS" media="(prefers-color-scheme: dark)"><img src="/files/f23f823c4b88dec961c3d26814440cfa9a694b56" alt=""></picture>

ページアイコンを使用する場合、表示されるアイコンのウェイトとスタイルをここで設定します。

### 角のスタイル

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

### 奥行きスタイル

カード、ボタン、その他の影が付いた要素に適用される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/saitowosuru/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.
