サイトのトップに表示するバナーを作成する

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): ウェルカムバナーの検索フィールドに表示されるプレースホルダーテキスト。

通知バナー (Dismissible banner)

通知バナーは、ユーザーが閉じることができる一時的な通知です。作成方法は次のとおりです。

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

これでバナーがサイトの上部に表示されます。ユーザーには通知バナーが表示されます。スタッフにも、ソースとなったトピックを編集するためのリンクが表示されます。

効果的な通知バナーのためのヒント：

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

永久バナー (Permanent banner)

ユーザーが閉じることができず、常に表示されるバナーを作成するには：

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

永久バナーのヒント：

このタイプのバナーは通常、緊急のサイト通知に使用されますが、任意の永久メッセージに使用できます
このバナーは、login_required サイト上の匿名ユーザーを含め、すべての人に見えます
バナーは、global notice サイト設定をリセットすることで削除できます

高度なバナー

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

ウェルカムリンクバナー (Welcome Link Banner)

このコンポーネントを使用すると、バナーにカスタムテキストと 1～4 個のリンクを追加できます。次のようないくつかのカスタマイズオプションがあります。

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

多用途バナー (Versatile Banner)

最も人気があり、保守されているコンポーネントの 1 つである Versatile Banner は、インターフェースを介した広範なカスタマイズオプションを提供します。これには以下が含まれます。

次の条件でバナー表示を制限
- ログイン済みユーザーまたは匿名ユーザー
- モバイルまたはデスクトップデバイス
- ホームページ、トピックリスト、またはすべてのページ
通知可能、展開可能、または永続的なオプション
ブラウザ幅いっぱいの設定
色の管理
HTMLを使用したヘッダーと列のカスタマイズ

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

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

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	2	94	2024 年 10 月 5 日
Custom banner or Some component (Help Needed) Support	2	90	2024 年 10 月 25 日
Setup custom Welcome banner on the homepage Support	2	913	2023 年 8 月 31 日
Name of component discourse top forum General	1	81	2025 年 2 月 11 日
I want add photo for download my app Support	2	66	2024 年 9 月 18 日