ドキュメントの外観をカスタマイズする方法（テーマ、カラー、フォント）

公開するドキュメントの外観をブランドイメージに合わせてカスタマイズできます。これらの設定は、プロジェクト設定内の公開 > テーマとカラータブから行えます。これにより、訪問者に表示されるテーマ、カラー、フォント、その他のスタイル要素を自由に制御できます。

テーマモードの選択

デフォルトのテーマモード設定では、訪問者に表示されるドキュメントの初期外観を決定します。特定のテーマを指定するか、ユーザーのシステム設定に合わせるかを選択できます。

自動（システム設定に従う）: デフォルトのオプションです。訪問者のOS設定に基づき、ライトモードとダークモードが自動的に切り替わります。
ライト: ユーザーのシステム設定に関係なく、常にライトテーマで表示されます。
ダーク: 常にダークテーマで表示されます。

ロゴの設定

ライトテーマとダークテーマそれぞれに個別のロゴをアップロードし、ブランドイメージを維持しながら常にロゴが表示されるように設定できます。ロゴをアップロードしない場合は、代わりに指定したテキストが表示されます。

ライトテーマ用ロゴ: 明るい背景で見やすいロゴをアップロードしてください。
ダークテーマ用ロゴ: 暗い背景用にデザインされたロゴをアップロードしてください。
ライト/ダークテーマ用ロゴテキスト: ロゴを使用しない場合に表示されるブランド名などのテキストを入力します。

カラーのカスタマイズ

ライトテーマとダークテーマの両方でプライマリカラーとセカンダリカラーを設定し、ブランドのカラーパレットを定義します。これにより、どの表示モードでも一貫したブランド体験を提供できます。

プライマリカラー: ボタン、リンク、ハイライトなどのインタラクティブな要素に使用されるメインのアクセントカラーです。
セカンダリカラー: サポート要素に使用される色で、控えめなコントラストを生み出します。

フォントとスタイルの設定

フォントを選択したり、UI要素の角のスタイルを調整したりして、ドキュメントの外観をさらに洗練させることができます。

プライマリフォント: 見出し、本文、一般的なUI要素に使用するメインフォントをリストから選択します。
等幅フォント: コードブロックやインラインコードスニペット専用のフォントを選択します。
角のスタイル: UI要素の角の丸み（ボーダー半径）を調整します。シャープ（0px）、丸み（4px）、大きく丸み（8px）から選択可能です。

カスタマイズのヒント

変更を保存した後、公開設定の上部にある変更を公開ボタンをクリックして、更新内容を反映させるのを忘れないでください。テキストやインタラクティブ要素の読みやすさを高めるため、常にコントラストの高い色の組み合わせを使用することをお勧めします。

まとめ

この記事では、Hintoで公開するドキュメントサイトの視覚的な外観をカスタマイズする方法について解説しました。デフォルトのテーマモードの選択、ライト/ダーク背景用のカスタムロゴのアップロード、ブランドカラーの設定、そしてフォントの選択を通じて、ブランドに沿った洗練されたプロフェッショナルな外観を作成できます。