サイトのブランディングをカスタマイズする

:bookmark: これは技術的でないチュートリアルです。Discourse サイトのブランディングと外観をカスタマイズする方法を案内します。

:person_raising_hand: 必要なユーザーレベル: 管理者

サイトのブランディングをカスタマイズしたいけれど、どこから始めればよいかわからないですか?詳しくは以下をご覧ください!

セットアップウィザード

Discourse は非常にカスタマイズ可能です!サイトの設定を始めるのに適した場所は、サイトの管理者アカウントにログインし、サイトのセットアップウィザードを実行することです。:mage:

セットアップウィザードでは、サイトのタイトル、デフォルトのロケール、アクセス設定(公開か非公開か、サインアップ制か招待制か、ユーザーの承認が必要かどうか)を設定できます。これらはサイトを稼働させるための基本的なステップです。

ウィザードが完了したら、管理者パネルからロゴ、色、フォントなど、サイトの外観をさらにカスタマイズできます。

利用可能なオプションは、このページで直接プレビューできます。「次へ」ボタンをクリックして、自分に合った設定を見つけてください。後で「これが理想ではない」と思ったら、いつでも設定を変更できるのでご安心ください。

サイトテーマ

基本的な設定が完了したら、さらにサイトをカスタマイズする時です!:sparkles:

テーマは、フォーラムデザインのスタイルに関する複数の要素を変更する大規模なカスタマイズであり、多くの場合、追加のフロントエンド機能も含まれています。テーマは、フォーラムの外観やレイアウトを大きく変更する能力を持っています。

Meta の #customization:theme カテゴリーには、サイトの外観をカスタマイズするために使用できる、事前に作成された多様なテーマがホストされています。これがサイトで使用するテーマを検索するのに最適な場所です。このカテゴリーから、サイトで使用したいテーマを選んでください。

サイトで使用するテーマが決まったら、管理者 -> カスタマイズ -> テーマ ページ(/admin/config/customize/themes にあります)からテーマをサイトに追加できます。このページでは、サイトのテーマに変更を加えたり、完全に新しいテーマを作成したりすることもできます。

Discourse テーマを使用するための初心者ガイド は、Discourse テーマの基本を学ぶための集中的な入門講座であり、Discourse サイトにテーマをインストールする方法の概要を提供しています。選択したテーマのインストール手順については、このガイドをお読みください。

:tipping_hand_woman: テーマの使用方法、作成方法、共有方法に関する詳細情報は、以下も見てください:

カラーパレット

管理者 -> 設定 -> カラー ページ(/admin/config/colors にあります)からサイトのカラーパレットを調整することで、サイトをさらにカスタマイズできます。:art:

ここでは、新しいカラーパレットを作成したり、既存のパレットを選択してカスタマイズしたり、テーマのデフォルトのライトモードまたはダークモードとしてパレットを割り当てたりできます。

既存のカラースキームを選択して新しいカラースキームの基盤とし、各カラーセクションの横にある色をクリックして、新しいスキームの色をカスタマイズします:

新しいカラースキームに名前を付け、完了したら変更を必ず保存してください!

:tipping_hand_woman: 色の決定にお困りの場合、Paletton - The Color Scheme Designer などのカラーピッカーツールは非常に役立ちます!

Discourse 内でカラーパレットをどのように使用できるかについての詳細情報は、以下をご覧ください:

テーマコンポーネント

テーマと同様に、Discourse にはフォーラムデザインの表面要素を変更したり、追加のフロントエンド機能を加えたりするために使用できる「テーマコンポーネント」もあります。フルテーマよりも小さく、よりターゲットを絞ったもので、一般的には(常にではありませんが)他のテーマコンポーネントと組み合わせて、コミュニティに合わせた独自のフォーラムデザインを作成することができます。:gear:

Meta の #customization:theme-component カテゴリーには、Discourse の公式および非公式のテーマコンポーネントがすべて含まれています。そこにリストされているテーマコンポーネントを確認し、サイトにインストールしたいものがある場合は、以下の手順に従ってください:Discourse テーマインターフェースとテーマコンポーネントのインストール方法

最も人気のある Discourse テーマコンポーネントの一部は以下の通りです:

:tipping_hand_woman: Discourse には、interface_color_selector サイト設定によって制御される組み込みのダーク/ライトモード切替スイッチもあります。これはサイドバーのフッターまたはヘッダーに切り替えを表示するように設定できます。

:tipping_hand_woman: Meta の #theme-guides タグにも、テーマコンポーネントを使用してサイトをさらにカスタマイズするためのアイデアが満載のハウツーガイドが多数あります。

サイトブランディング

Discourse には、管理者 -> 外観 -> ロゴ/admin/config/logo にあります)に専用のロゴ設定ページがあり、ここでサイトのすべてのロゴとアイコンを管理できます。

  • プライマリーロゴ - サイトの上部ナビゲーション、およびサイトからのメール通知の上部に表示されます。推奨サイズは 600 × 80 ピクセルです。
  • プライマリーロゴ ダーク - プライマリーロゴのダークモード用代替画像。推奨サイズは 600 × 80 ピクセルです。
  • 正方形アイコン - サイトの上部に表示されるロゴ画像の正方形バージョンであり、モバイルアプリのロゴでもあります。推奨サイズは 512 × 512 ピクセルです。
  • ファビコン - ブラウザのタブやブックマーク(お気に入り)に表示されるアイコンです。
  • 小さなロゴ - サイトの左上隅に表示される小さなロゴ画像で、スクロールダウンしたときに見えます。空白のままにすると、ホームアイコンが表示されます。推奨サイズは 120 × 120 ピクセルです。
  • 小さなロゴ ダーク - 小さなロゴのダークモード用代替画像。推奨サイズは 120 × 120 ピクセルです。

モバイルセクションの下:

  • モバイルロゴ - モバイル版サイトで使用されるロゴ。空白のままにすると、logo 設定の画像が使用されます。高さ 120、アスペクト比が 3:1 より広い横長の矩形画像を使用してください。
  • モバイルロゴ ダーク - モバイルロゴのダークモード用代替画像。高さ 120、アスペクト比が 3:1 より広い横長の矩形画像を使用してください。
  • マニフェストアイコン - Android でのロゴ/スプラッシュ画像として使用される画像。空白のままにすると、large_icon が使用されます。推奨サイズは 512 × 512 ピクセルです。
  • マニフェストスクリーンショット - インストールプロンプトページ(Android で「ホーム画面に追加」を使用するときに表示)でインスタンスの機能と動作を紹介するスクリーンショット。すべての画像はローカルアップロード済みで、寸法は同じである必要があります。
  • Apple タッチアイコン - Apple タッチデバイス用に使用されるアイコン。空白のままにすると、large_icon が使用されます。推奨サイズは 180 × 180 ピクセルです。透明な背景は推奨されません。

メールセクションの下:

  • ダイジェストロゴ - サイトのメールサマリー上部に表示される代替ロゴ画像。空白のままにすると、logo 設定の画像が使用されます。横長の矩形画像を使用してください。SVG 画像は使用しないでください。

ソーシャルメディアセクションの下:

  • OpenGraph 画像 - デフォルトの opengraph 画像。ページに他の適切な画像がない場合、多くのアプリやプラットフォームでウェブリンクのプレビューに使用されます。空白のままにすると、large_icon が使用されます。
  • X 要約大型画像 - X カードの ‘summary large image’。空白のままにすると、OpenGraph_image が .svg でない限り、通常のカードメタデータが生成されます。推奨サイズは少なくとも 280 × 150 ピクセルです。SVG 画像は使用しないでください。

:tipping_hand_woman: 最適な結果を得るために、各タイプのロゴとアイコンに対して上記のサイズガイドラインに従うことを推奨します。

その他のカスタマイズ

これで、カスタムテーマ、カラーパレット、ブランドロゴ、そしていくつかのテーマコンポーネントをサイトに追加したので、基本的なサイトのカスタマイズは完了です!:tada:

Discourse サイトをさらにカスタマイズする方法をお探しの場合、以下の関心のあるトピックをお読みいただくことをお勧めします:

「いいね!」 8

Manifest screenshots は具体的に何をするのですか? screenshots はどこで使用されますか? ブラウザからコミュニティをローカルアプリとしてインストールしたときに使用されますか? Discourse Discover でコミュニティを検出可能にした場合に表示される画像ですか?

Chrome の Android デバイスで「ホーム画面に追加」オプションを使用すると、これらのスクリーンショットが表示されます。

「いいね!」 2

面白いですね!私もそう思っていましたが、デスクトップ(Chrome、Windows)にインストールしたときには見かけませんでした。もしかしたら、読み込みや反映に十分な時間を取っていなかったのかもしれません。

しかし、それが何をするものなのか、私が正しかったと知って嬉しいです!

「いいね!」 1

このセクションは誤って省略されたようです。

「いいね!」 1

2回読んだ後、理解できたと思います。サイズガイドラインは上記に含まれています。例:

このガイドは全体的にかなり時代遅れだと思います。ウィザードでロゴを追加したり、外観を構成したりすることはもうできません。テーマ管理ページは現在まったく異なって見え、カラー スキームはカラー パレットに名前が変更されました。
ダーク/ライト モード切り替えテーマ コンポーネントはコアに移動されました。ブランディングには、/admin/config/logo に新しい設定ページがあります。
設定ページで言及されているサイズが、サイト設定で確認したときのサイズと異なるのはなぜか疑問に思います。


600×80 は、最小 360×120 とは異なります。

「いいね!」 2

このトピックは最近オーバーホールされたため、少し古くなっています。

いくつかのマイナー(しかし価値のある)改善提案に関する私の考えは次のとおりです。

「いいね!」 4