アイコン、色、テーマ

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

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

A GitBook screenshot showing title, icon and logo customization

タイトル

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

アイコン

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

circle-info

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

カスタムロゴ (Premium と Ultimate)

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

circle-info

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

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

テーマ

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

A GitBook screenshot showing theme options

クリーン

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

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

ミュート

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

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

太字 (Premium と Ultimate)

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

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

グラデーション (Premium と Ultimate)

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

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

A GitBook screenshot showing color customization

メインカラー

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

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

ティントカラー

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

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

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

セマンティックカラー (Premium と Ultimate)

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

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

circle-info

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

コードテーマ (Premium と Ultimate)

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

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

  • アダプティブテーマ — これらの標準的なライトモードとダークモードのテーマは、サイトのカラーパレットを使ってブランドに合わせます。

  • Shikiarrow-up-right テーマ — ライトモードとダークモードの両方で、60種類以上のテーマプリセットから選べます。

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

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

モード

モード切り替えを表示

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

デフォルトのモード

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

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

サイトのスタイル

A GitBook screenshot showing site style settings

フォントファミリー (Premium と Ultimate)

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

circle-info

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

カスタムフォント (Ultimate のみ)

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

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

アイコン (Premium と Ultimate)

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

角のスタイル

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

奥行きのスタイル

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

  • 控えめ: 少しの影と立体感があります。

  • フラット: 影や立体感はありません。

リンクのスタイル

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

  • デフォルト: リンク全体をメインカラーまたはティントカラーで強調表示します。

  • アクセント: リンクに色付きの下線を追加し、テキストの色は変更しません。

サイドバーのスタイル

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

背景スタイル

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

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

リストスタイル

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

最終更新

役に立ちましたか?