このチュートリアルは、Discourse サイトのブランディングと外観のカスタマイズ方法を、技術的な知識なしで説明します。
必要なユーザーレベル: 管理者
サイトのブランディングをカスタマイズしたいけれど、どこから始めればよいかわかりませんか？続きを読むとわかります！
セットアップウィザード
Discourse は非常にカスタマイズ性が高いです！サイトのカスタマイズを開始するのに適した場所は、サイトで管理者アカウントにログインし、サイトのセットアップウィザードを実行することです。 
セットアップウィザードの「さらに設定する」オプションを使用すると、サイトのサイトロゴ、配色、フォント、ホームページのスタイルを選択できます。
利用可能なオプションは、このページで直接プレビューできます。希望の設定が見つかったら、「次へ」ボタンをクリックします。後で設定が気に入らなくても、いつでも変更できるので心配しないでください。
サイトテーマ
基本的な設定が完了したら、さらにサイトをカスタマイズしましょう！ 
テーマは、フォーラムデザインの複数の要素のスタイルを変更する包括的なカスタマイズであり、多くの場合、追加のフロントエンド機能も含まれます。テーマは、フォーラムの外観とレイアウトを大幅に変更する可能性があります。
Meta の Theme カテゴリには、サイトで使用できるさまざまな事前作成済みテーマがあり、サイトの表示をカスタマイズできます。これは、サイトで使用するテーマを検索するのに最適な場所です。このカテゴリから、サイトで使用したいテーマを選んでください。
サイトで使用するテーマが決まったら、管理者 -> カスタマイズ -> テーマ ページ（/admin/customize/themes にあります）からサイトにテーマを追加できます。このページから、サイトのテーマを変更したり、まったく新しいテーマを作成したりすることもできます。
Discourse テーマの使用方法入門ガイドは、Discourse テーマの基本を短時間で学習できるガイドであり、Discourse サイトにテーマをインストールする方法の概要を示しています。このガイドを読んで、選択したテーマをインストールする方法を確認してください。
独自のテーマの使用方法、作成方法、共有方法に関する詳細情報は、以下でも見つけることができます。
配色
「管理者 → カスタマイズ → 色」（/admin/customize/colors にあります）ページで配色を調整することで、サイトをさらにカスタマイズできます。 
このページで「+新規」ボタンをクリックして、サイトで使用する新しい配色を作成しましょう。
既存の配色を選択して新しい配色をベースにし、各カラーセクションの横にある色をクリックして新しい配色の色をカスタマイズします。
新しい配色の名前を付けて、完了したら変更を保存することを忘れないでください！
色の決定に役立つ情報が必要ですか？ http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF のようなカラーピッカーツールが役立ちます！
配色に満足したら、現在のテーマに割り当ててプレビューし、サイトへの変更がライブで反映されるのを確認できます。
ページを更新すると、変更はサイトに自動的に適用されます。
Discourse で配色を使用する方法の詳細については、以下を参照してください。
テーマコンポーネント
テーマと同様に、Discourse にはフォーラムデザインの表面的な要素を変更したり、追加のフロントエンド機能を追加したりするために使用できる「テーマコンポーネント」もあります。完全なテーマよりも小さく、よりターゲットが絞られているため、一般的に（常にそうとは限りませんが）他のテーマコンポーネントと組み合わせて、コミュニティに合わせて調整されたカスタムフォーラムデザインを作成できます。 
Meta の Theme component カテゴリには、Discourse の公式および非公式のすべてのテーマコンポーネントが含まれています。そこにあるテーマコンポーネントを確認し、サイトにインストールしたいものがあれば、次の手順に従ってください。Discourse テーマインターフェイスとテーマコンポーネントのインストール方法
人気のある Discourse テーマコンポーネントには、次のようなものがあります。
- Dark/Light Mode Toggle
- Brand Header
- DiscoTOC - automatic table of contents
- Custom Header Links
- Versatile Banner
Meta の theme-guides タグには、テーマコンポーネントを使用してサイトをさらにカスタマイズするためのアイデアが記載された多くのハウツーガイドもあります。
サイトブランディング
サイトセットアップウィザードで選択したロゴに加えて、Discourse には「管理者 → 設定 → ブランディング」（/admin/site_settings/category/branding にあります）ページに、カスタム画像やロゴをサイトに追加するために使用できる他のサイトブランディング関連の設定がいくつかあります。
このページから、次の種類のロゴをサイトに追加できます。
logo- サイトの左上にあるロゴ画像。高さ 120 ピクセル、アスペクト比 3:1 より大きい、幅広の長方形画像を使用してください。空白のままにすると、サイトのタイトルテキストが表示されます。logo small- スクロールダウンすると表示される、サイトの左上にある小さなロゴ画像。120 x 120 ピクセルの正方形画像を使用してください。空白のままにすると、ホームグリフが表示されます。digest logo- サイトのメールサマリーの上部で使用される代替ロゴ画像。幅広の長方形画像を使用してください。SVG 画像は使用しないでください。空白のままにすると、logo設定の画像が使用されます。mobile logo- サイトのモバイルバージョンで使用されるロゴ。高さ 120 ピクセル、アスペクト比 3:1 より大きい、幅広の長方形画像を使用してください。空白のままにすると、logo設定の画像が使用されます。logo dark- ‘logo’ サイト設定のダークモード用の代替設定。logo small dark- ‘logo small’ サイト設定のダークモード用の代替設定。large icon- 他のメタデータアイコンのベースとして使用される画像。理想的には 512 x 512 ピクセルより大きい必要があります。空白のままにすると、logo_small が使用されます。manifest icon- Android のロゴ/スプラッシュ画像として使用される画像。自動的に 512 x 512 ピクセルにリサイズされます。空白のままにすると、large_icon が使用されます。manifest screenshots- インストールプロンプトページでインスタンスの機能と機能を紹介するスクリーンショット。すべての画像はローカルアップロードであり、同じ寸法である必要があります。favicon- サイトのファビコン。Favicon - Wikipedia を参照してください。CDN で正しく機能するには PNG である必要があります。32x32 ピクセルにリサイズされます。空白のままにすると、large_icon が使用されます。apple touch icon- Apple タッチデバイスで使用されるアイコン。自動的に 180x180 ピクセルにリサイズされます。空白のままにすると、large_icon が使用されます。opengraph image- ページに他の適切な画像がない場合に、多くのアプリやプラットフォームでウェブリンクのプレビューに使用されるデフォルトの opengraph 画像。理想的には正方形である必要があります。空白のままにすると、large_icon が使用されます。twitter summary large image- Twitter カードの「summary large image」（幅 280 ピクセル以上、高さ 150 ピクセル以上。SVG は不可）。空白のままにすると、opengraph_image が SVG でない限り、通常のカードメタデータが生成されます。
ここで最良の結果を得るために、各ロゴタイプのサイズガイドラインに従うことをお勧めします。
追加のカスタマイズ
カスタムテーマ、配色、いくつかのブランドロゴ、そしておそらくいくつかのテーマコンポーネントをサイトに追加したので、基本的なサイトカスタマイズは完了です！ 
それでも Discourse サイトをさらにカスタマイズする方法を探している場合は、興味のあるトピックをいくつか読むことをお勧めします。
