アイコン、色、テーマ

公開ドキュメント全体で、アイコン、色、テーマ、その他のより細かな設定をカスタマイズします

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

タイトル

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

アイコン

絵文字を設定するか、独自のアイコンをアップロードできます。あなたが「 カスタマイズ 」メニューで設定したアイコンは、ドキュメントサイトのファビコンとして使用されます。変更が公開済みのドキュメントに反映されるまで数分かかる場合があります。新しいファビコンが表示されない場合は、ブラウザに古いものがキャッシュされている可能性があるため、別のブラウザをお試しください。

この設定は表示されるアイコンにのみ影響します 公開されたドキュメント内で。GitBook アプリ内で使用されるアイコンを編集したい場合は、セクション内のコンテンツを編集しているときに行えます。

カスタムロゴ

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

アイコンとロゴのオプションの違いは何ですか?

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

テーマ

テーマでは、公開コンテンツの配色をライトモードとダークモードの両方でカスタマイズできます。選べるテーマは4種類あります。サイトの色は、 プライマリカラー と ティント で選んだものに直接影響されます。この2つの選択はインターフェースのさまざまな部分に影響し、サイトの見た目と使い心地を完全に変えることができます。

クリーン

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

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

ミュート

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

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

ボールド

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

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

グラデーション

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

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

色

プライマリカラー

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

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

ティントカラー

サイトのティントカラーは、ヘッダーリンク、アイコンの色、以下のような UI 要素を含め、サイト全体のすべてのテキストとアイコンの色をわずかに変更します: 質問または検索 バー。

ティントカラーは 影響しません リンクやボタンのようなナビゲーション要素には、常にプライマリカラーが使われるため、影響しません。

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

ティントを使って背景色を設定する

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

覚えておくべき点がいくつかあります:

• ティントはニュートラルに近い必要があります（ごくわずかに色味がある程度）。強い色のティントでは GitBook の標準背景が維持され、アクセント部分にだけ色が付きます。
• 明るいか暗いかがはっきりしている必要があります。中間的なグレーでは背景は変わりません。
• ～では ボールド テーマでは、ティントはページ背景ではなくヘッダーに適用されるため、背景はそのままです。

セマンティックカラー

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

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

注: GitBook エディタ内のヒントブロックは常に標準の色のままで、サイトのセマンティックカラーとは一致しません。

コードテーマ

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

テーマ一覧には次が含まれます:

• アダプティブテーマ — これらの標準的なライトモードおよびダークモードのテーマは、サイトのカラーパレットを使ってブランドに合わせます。
• Shiki テーマ — ライトモードとダークモードの両方で、60以上のテーマプリセットから選べます。

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

既定では、選択したテーマはコードブロックと OpenAPI ブロックの両方に適用されます。OpenAPI ブロックに別のテーマを設定したい場合は、次の ブロックタイプごとにカスタマイズ ボタンをクリックしてください。

モード

モード切替を表示

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

既定モード

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

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

サイトスタイル

フォントファミリー

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

メインフォント

これは、サイト全体で既定で使用されるフォントです。サイト内の本文と UI テキストには常にこのフォントが使われます。

見出し

見出しフォントは任意で、サイトの Page、H1、H2、H3 の見出しにのみ適用されます。既定では、見出しフォントはサイトのメインフォントに一致するよう設定されています。

等幅

等幅フォントは、ドキュメントサイトのコードブロックと OpenAPI ブロックで使用されます。

カスタムフォント

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

GitBook は現在サポートしています .woff と .woff2。その他の形式については、次までお問い合わせください [e-mail].

アイコン

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

この設定は公開サイト上のページアイコンの太さとスタイルを制御します。ページグループのアイコンやインラインアイコンは定義しません。ページグループのアイコンはセクションの目次で設定してください。インラインアイコンは インラインコンテンツ.

角のスタイル

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

奥行きスタイル

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

• 控えめ: 多少の影と浮き上がり。
• フラット: 影や浮き上がりはありません。

リンクスタイル

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

• 標準: リンク全体をプライマリカラーまたはティントカラーで強調表示します。
• アクセント: リンクに色付きの下線を追加し、テキストの色は変更しません。

サイドバースタイル

このメニューでは、さまざまなスタイルによってサイドバーの見た目がどう変わるかを視覚的に確認できます。

背景スタイル

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

オプションは2つあります — 既定 と 塗りつぶし — それぞれ、目次がどう変わるかを視覚的に示しています。

リストスタイル

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