サイトの上部に表示するバナーの作成

Discourse · 2020 年 8 月 17 日午後 9:16

このガイドでは、Discourse サイトでバナーを作成・カスタマイズするさまざまな方法について説明します。シンプルなクローズ可能なバナーから、より高度なオプションまで対応しています。

必要なユーザー権限：モデレーター（クローズ可能なバナーの場合）、管理者

バナーは、サイトの訪問者に対して重要な情報を伝える効果的な手段です。このガイドでは、Discourse サイトでバナーを作成・カスタマイズするさまざまな方法を順を追って解説します。

ウェルカムバナー

ウェルカムバナーは、新規および既存のメンバーにフレンドリーなメッセージと目立つ検索バーを表示し、訪問者が探しているコンテンツを素早く見つけられるようにします。

ウェルカムバナーを有効化してカスタマイズするには、管理エリアに移動し、サイドバーの Appearance > Welcome banner リンクを選択してください。

このエリアでは、以下の設定を見つけることができます：

Enabled on themes…: ウェルカムバナーを表示する有効なテーマを指定できます。
Background image: ウェルカムバナーの背景として使用する画像をアップロードします。
Text color: カラーパレットによって制御されるデフォルトのテキストカラーが背景画像と競合する場合、ここで新しい色を選択できます。この設定は、背景画像をアップロードした場合にのみ適用されます。
Page visibility: ウェルカムバナーを表示するページを決定します。デフォルトでは Top menu pages（Top menu サイト設定で選択されたページ）に表示されますが、以下に変更できます：
- Homepage only: ウェルカムバナーはサイトのホームページ（Top menu サイト設定でリストされている最初のページ）のみに表示されます。
- Discovery pages: ウェルカムバナーはすべての Top menu ページに表示されます（サイトの実トップメニューに表示されていない場合、つまり設定で選択されていない場合でも）。
- All pages: ウェルカムバナーはサイトのすべてのページに表示されます。これは、トピックページで視覚的な混乱を引き起こし、メンバーの読み物や参加を妨げる可能性があるため、通常は推奨されません。
Location: ウェルカムバナーがページ上のどこに表示されるかを決定します。デフォルトでは Above topic content（トピックコンテンツの上）に表示されますが、Below site header（サイトヘッダーの下）も選択できます。違いはわずかなものですが、以下のスクリーンショットに示されています：

ウェルカムバナーのテキストをカスタマイズして、挨拶を変更したり、ウェルカムバナーに説明テキストを追加したりすることもできます。

Header for new members: 新規メンバーがサイトに初めてログインした際に表示されるメインの挨拶。
Header for logged-in members: 既存のメンバーに表示されるメインの挨拶。
Header for anonymous visitors: 匿名（つまりログインしていない）ユーザーに表示されるメインの挨拶。
Subheader for logged-in members: 既存のメンバーに表示される、ヘッダーの下にある任意の2行目のテキスト。
Subheader for anonymous visitors: 匿名（つまりログインしていない）ユーザーに表示される、ヘッダーの下にある任意の2行目のテキスト。
Search placeholder: ウェルカムバナーの検索フィールドに表示されるプレースホルダーテキスト。

クローズ可能なバナー

クローズ可能なバナーは、ユーザーが閉じることのできる一時的な通知です。作成方法は以下の通りです：

いずれかの公開カテゴリでトピックを作成するか、移動します。トピックの上部にある元の投稿（OP）がバナーのソースになります。
トピックの右側または下部にあるレンチアイコンをクリックして、管理オプションを開きます。
「Pin Topic…」を選択します。
新しいウィンドウで、 Make Banner Topic を選択します。

これにより、バナーがサイトの上部に表示されます。ユーザーはクローズ可能なバナーを見ることができます。スタッフもソースとなるトピックを編集するためのリンクを見ることができます。

効果的なクローズ可能なバナーのコツ：

テキストは明確かつ簡潔に保つ
最大の高さは 20vh です（CSS で編集可能）
長いテキストの場合、ユーザーはバナー内でスクロールできます
詳細な情報については、関連する公開トピックへのリンクを追加することを検討する
バナーとして使用しているトピックを非表示にしたい場合は、トピックの管理メニューを使用してリストから外すことができます

恒久的なバナー

常に表示され、ユーザーによってクローズできないバナーを作成するには：

サイト設定で global_notice を検索します。
このフィールドにバナーのテキストまたは HTML を入力します。

恒久的なバナーのコツ：

このタイプのバナーは、緊急のサイト連絡に通常使用されますが、恒久的なメッセージとして何でも使用できます
このバナーは、login_required サイトの匿名用户を含むすべての人に表示されます
バナーは、global notice サイト設定をリセットすることによって削除できます

高度なバナー

テーマコンポーネントを使用して、より高度なバナーを構築できます。これらのテーマコンポーネントは、コアのウェルカムバナー機能と競合する可能性があることに注意してください。

Welcome Link Banner

このコンポーネントを使用すると、バナーにカスタムテキストと 1〜4 個のリンクを追加できます。以下を含むさまざまなカスタマイズオプションを提供します：

バナーを表示する場所の選択（ホームページ、トピックリスト、またはすべてのページ）
Font Awesome アイコン付きのリンクの追加
ユーザーの信頼レベルに基づいた表示制限
背景画像や色のカスタマイズ
テキストとアイコンの色調整

Versatile Banner

最も人気があり、よくメンテナンスされているコンポーネントの一つである Versatile Banner は、インターフェースを通じて広範なカスタマイズオプションを提供します。例えば：

バナー表示の制限
- ログイン済みまたは匿名用户
- モバイルまたはデスクトップデバイス
- ホームページ、トピックリスト、またはすべてのページ
クローズ可能、展開可能、または永続オプション
ブラウザ全幅設定
カラー管理
HTML を使用した見出しとカラムのカスタマイズ

CSS を用いたバナーのカスタマイズ

CSS を使用して、すべてのバナータイプをカスタマイズできます。CSS を使用して Discourse サイトをカスタマイズする方法については、Discourse Themes の使い方の初心者ガイドを参照してください。

leopedrini · 2025 年 8 月 22 日午前 11:11

このオプションが見つかりませんでした…ベータ版の新機能ですか？

leopedrini · 2025 年 8 月 22 日午後 12:57

更新：3.4.6から3.5.0に更新した後、表示されました：

RBoy · 2025 年 8 月 24 日午後 10:28

ビルド 3.6.0.beta1-dev (e44347414a) にバグがあります。

このサイトテキストを変更しても、検索バーのテキストには影響せず、常に「検索」と表示されます。Windows 10 x64 Chrome でテストしました。

awesomerobot · 2025 年 8 月 25 日午後 4:26

こちらで修正作業を行っています: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

RBoy · 2025 年 8 月 26 日午前 4:12

素晴らしい、ありがとうございます。これで解決しました！

tknospdr · 2025 年 10 月 3 日午後 2:42

ウェルカムバナーの背景画像に問題があります。
質問のサイトでは、オブジェクトストレージにCloudflare R2 S3バケットを使用しています。
管理セクションで背景画像をアップロードすると正しく表示され、フルサイズで表示しようとすると機能します。右クリックして新しいタブで画像を表示しても機能し、パブリックバケットURLを使用しています。
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

しかし、CSSに注入されるURLは次のとおりです。

https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

別のサイトではローカルストレージを使用しており、バナーの背景画像は正しく機能しています。

これはコードのバグですか、それとも私が何か間違っていますか？

さらに調べてみると、このCSSが背景画像を制御しているようです。

インスペクターでURLを手動で置き換えると機能します。
これをオーバーライドしようとしました。

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

しかし、これは機能していません。それでもバグのように感じます。

yuriy · 2025 年 10 月 30 日午後 2:43

@tknospdr様、どのような問題が発生しているのか、よく理解できませんでした。

お客様のサイト https://eu.technospider.com を確認しましたが、背景画像は期待通りに表示されているようです。

tknospdr · 2025 年 10 月 30 日午後 2:49

CSSの上書きがようやく機能したと思います。問題は、上書きが必要ないはずだということです。

Cloudflare S3でホストしている場合、バナーコードが間違ったアセットを使用しているようです。

yuriy · 2025 年 10 月 30 日午後 3:17

あなたのオーバーライドは具体的に何ですか？

こちら側では、CSSでURLパス名 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg のみを適用するようにできます。

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

これにより、オーバーライドを必要とせずに、このルールが機能するはずだと考えています。

tknospdr · 2025 年 10 月 30 日午後 3:26

私のオーバーライド全体は次のとおりです。

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

こちら側で、CSSにURLのパス名 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg のみを適用するようにできます。
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
これにより、オーバーライドを必要とせずに、このルールが機能するはずだと信じていますか？

UIでは、画像をアップロードすることしかできないため、CSSのオーバーライドステートメントを削除するにはコードの変更が必要だと考えています。
実装していただける修正があれば、喜んで試させていただきます。

Frenky · 2026 年 1 月 7 日午後 1:50

皆さん、こんにちは。

最新のDiscourseアップデートにより、テーマコンポーネントのAdvanced Search Bannerはサポートされなくなり、おそらくメンテナンスもされなくなりました。その代わりに、公式のWelcome Banner拡張機能が登場しました。

問題は、新しいコンポーネントでは現在、単一の背景画像しか選択できないことです。古いAdvanced Search Bannerコンポーネントでは、ライトモードとダークモードで異なる背景画像を定義することが可能であり、これは異なるレイアウトやテーマにとって理想的でした。

コミュニティへの質問です。

Welcome Bannerでこの機能を再現する方法はありますか？
誰か、ライトモードとダークモードで異なる背景画像を使用するための拡張機能や回避策をすでに実装していますか？
開発者が将来的にこれを実装する予定はありますか？

ヒント、コツ、アイデアなどがあれば教えていただけると幸いです！

よろしくお願いします！

トピック		返信	表示
What Theme Component is Discourse using for this? Support	1	190	2024 年 10 月 5 日
Where do l create the banner topic? Support	5	230	2026 年 8 月 12 日
Custom banner or Some component (Help Needed) Support	2	186	2024 年 10 月 25 日
How to disable the text and search bar overlay on the welcome banner? Support	5	101	2026 年 10 月 8 日
Setup custom Welcome banner on the homepage Support	1	1070	2023 年 8 月 31 日