# アイコン、色、テーマ

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

<figure><img src="https://4217681718-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://4217681718-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>

### クリーン

透明感と最小限のスタイルで仕上げられた、モダンなテーマです。プライマリカラー（またはティント）は、リンクやその他の強調されたUI要素に影響します。

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

### ミューテッド

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

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

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

鮮やかな色と強いコントラストが特徴の、インパクトのあるテーマです。サイトのヘッダーにはプライマリカラー（またはティント）が使用され、アイコンなどの他の強調要素にも同じ色が適用されます。

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

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

グラデーション背景と彩り豊かな要素が特徴の、先進的なテーマです。グラデーションと強調要素にはプライマリカラー（またはティント）が適用されます。

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

## 色

<figure><img src="https://4217681718-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>

### プライマリカラー

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

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

### ティントカラー

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

を含む、サイト全体のすべてのテキストとアイコンの色をさりげなく変化させます。 *してはいけません* ティントカラーは

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

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

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

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

{% hint style="info" %}
**注:** 各ヒントスタイルの背景色を変更できます。これらの変更は、カスタマイズ中の公開サイトに反映されます。
{% endhint %}

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

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

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

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

ドキュメントのライトモードとダークモードごとに個別のコードテーマを選択できます。また、任意のライト/ダーク配色を任意のモードで使用できます。たとえば、ドキュメントがライトモードのときにダークなコードテーマを使うこともできます。

デフォルトでは、選択したテーマはコードブロックと OpenAPI ブロックの両方に適用されます。OpenAPI ブロックに別のテーマを設定したい場合は、 **ブロックタイプごとにカスタマイズ** <picture><source srcset="broken-reference" media="(prefers-color-scheme: dark)"><img src="https://4217681718-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://4217681718-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://4217681718-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つのオプションがあります — **デフォルト**, **ピル** 、 **ライン** — それぞれ、目次がどのように変わるかを示す視覚的な表示があります。