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

:bookmark: これはあなたの Discourse サイトのブランディングと外観をカスタマイズするための非技術的なチュートリアルです。

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

サイトのブランディングをカスタマイズしたいけれど、どこから手をつけていいか分からない?詳しく知りたい方は、ぜひお読みください!

セットアップウィザード

Discourse は非常にカスタマイズ性が高いです!サイトのカスタマイズを始めるには、まず管理者アカウントでサイトにログインし、サイトのセットアップウィザードを実行するのがおすすめです。:mage:

セットアップウィザードを使用すると、サイトのタイトル、デフォルトのロケール、アクセス設定(公開 vs 非公開、登録 vs 招待制、ユーザーの承認が必要かどうか)を設定できます。これらはサイトを運用するために不可欠な最初のステップです。

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

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

サイトテーマ

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

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

Meta の #theme カテゴリーには、サイトの外観をカスタマイズするために使用できる、さまざまな事前作成されたテーマが用意されています。サイトで使用したいテーマを探すには、ここが最も適しています。このカテゴリーから、あなたのサイトに使用したいテーマを選んでみてください。

使用するテーマを決めたら、Admin -> Customize -> Themes ページ(/admin/config/customize/themes に位置)からテーマをサイトに追加できます。このページから、サイトのテーマを変更したり、全く新しいテーマを作成することも可能です。

Discourse テーマの初心者ガイド は、Discourse テーマの基礎を学ぶための集中講座であり、Discourse サイトへのテーマのインストール方法の概要を提供しています。選択したテーマをインストールする方法については、このガイドをご覧ください。

tipping_hand_woman: テーマの使い方、作成方法、共有方法に関する詳細情報は、以下のページでも見つけることができます:

カラーパレット

Admin -> Config -> Colors ページ(/admin/config/colors に位置)からカラーパレットを調整することで、サイトをさらにカスタマイズできます。:art:

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

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

新しいカラースキームに名前を付け、完了したら変更を保存することを忘れないでください!

tipping_hand_woman: 色の選択に迷っている場合は、Paletton - The Color Scheme Designer のようなカラーピッカーツールが非常に役立ちます!

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

テーマコンポーネント

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

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

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

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

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

サイトブランディング

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

  • Primary logo(メインロゴ) - サイトの上部ナビゲーション、およびサイトのメール通知の上部に表示されます。推奨サイズは 600 × 80 ピクセルです。
  • Primary logo dark(ダークモード用メインロゴ) - メインロゴのダークモード用代替画像です。推奨サイズは 600 × 80 ピクセルです。
  • Square icon(正方形アイコン) - サイトの上部に表示されるロゴ画像の正方形バージョンで、モバイルアプリのロゴとしても使用されます。推奨サイズは 512 × 512 ピクセルです。
  • Favicon(ファビコン) - ブラウザのタブやブックマークに表示されるアイコンとしてロゴが表示されます。
  • Small logo(小型ロゴ) - サイトの左上に表示される小型ロゴ画像で、スクロールダウン時に表示されます。空白のままにすると、ホームのグリフが表示されます。推奨サイズは 120 × 120 ピクセルです。
  • Small logo dark(ダークモード用小型ロゴ) - 小型ロゴのダークモード用代替画像です。推奨サイズは 120 × 120 ピクセルです。

Mobile(モバイル)セクション内:

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

Email(メール)セクション内:

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

Social media(ソーシャルメディア)セクション内:

  • OpenGraph image(OpenGraph 画像) - 多くのアプリやプラットフォームが、ページに他の適切な画像がない場合にウェブリンクのプレビューとして使用するデフォルトの OpenGraph 画像です。空白のままにすると、large_icon が使用されます。
  • X summary large image(X サマリー大型画像) - X カードの「サマリー大型画像」です。空白のままにすると、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