このガイドでは、簡単な非表示バナーからより高度なオプションまで、Discourseサイトでバナーを作成およびカスタマイズするためのさまざまな方法について説明します。
必要なユーザーレベル: モデレーター（非表示バナーの場合）、管理者
バナーは、サイト訪問者に重要な情報を伝達するための効果的な方法です。このガイドでは、Discourseサイトでバナーを作成およびカスタマイズするためのさまざまな方法を説明します。
ウェルカムバナー
ウェルカムバナーは、新規および再訪したメンバーを親切なメッセージと目立つ検索バーで迎え入れ、訪問者が探しているコンテンツをすばやく簡単に見つけられるようにします。
ウェルカムバナーを有効にしてカスタマイズするには、管理エリアに移動し、サイドバーの 外観 > ウェルカムバナー リンクを選択します。
このエリアでは、次の設定が見つかります。
- テーマで有効化…: アクティブなどのテーマにウェルカムバナーを表示するかを指定できます。
- 背景画像: ウェルカムバナーの背景として使用する画像をアップロードします。
- 文字色: カラーパレットによって制御されるデフォルトの文字色が背景画像と競合する場合、ここで新しい色を選択できます。この設定は、背景画像をアップロードした場合にのみ適用されることに注意してください。
- ページ表示: ウェルカムバナーを表示するページを決定します。デフォルトでは、
トップメニューのページ（トップメニューサイト設定で選択したページを意味します）に表示されますが、次のように変更できます。
ホームページのみ: ウェルカムバナーはサイトのホームページ（つまり、トップメニューサイト設定でリストされている最初のページ）にのみ表示されます。ディスカバリーページ: ウェルカムバナーは、サイトの実際のトップメニューに表示されていない場合でも、すべての トップメニュー ページに表示されます（つまり、設定で選択されていない場合でも）。すべてのページ: ウェルカムバナーはサイトのすべてのページに表示されます。これは、トピックページで視覚的な混乱を引き起こし、メンバーが読んだり参加したりするのを妨げる可能性があるため、一般的に推奨されません。
- 場所: ウェルカムバナーがページ上のどこに表示されるかを決定します。デフォルトでは
トピックコンテンツの上部 に表示されますが、サイトヘッダーの下 を選択することもできます。違いはわずかであり、以下のスクリーンショットに示されています。
ウェルカムバナーのテキストをカスタマイズして、挨拶を変更したり、ウェルカムバナーに説明テキストを追加したりすることもできます。
- 新規メンバー向けのヘッダー: サイトに初めてログインした新規メンバーに表示される主要な挨拶。
- ログイン済みメンバー向けのヘッダー: 再訪したメンバーに表示される主要な挨拶。
- 匿名訪問者向けのヘッダー: 匿名（つまり、ログインしていない）メンバーに表示される主要な挨拶。
- ログイン済みメンバー向けのサブヘッダー: 再訪したメンバーに表示される、ヘッダーの下のオプションの2行目のテキスト。
- 匿名訪問者向けのサブヘッダー: 匿名（つまり、ログインしていない）メンバーに表示される、ヘッダーの下のオプションの2行目のテキスト。
- 検索プレースホルダー: ウェルカムバナーの検索フィールドに表示されるプレースホルダーテキスト。
非表示バナー
非表示バナーは、ユーザーが閉じることができる一時的な通知です。作成方法は次のとおりです。
- 任意のカテゴリ（公開または非公開）でトピックを作成するか、移動します。トピックの先頭にある元の投稿（OP）がバナーのソースになります。
- トピックの右側または下部にあるレンチアイコンをクリックして、管理オプションを開きます。
- 「トピックをピン留め…」を選択します。
- 新しいウィンドウで、
バナーとして設定 を選択します。
これにより、バナーがサイトの最上部に表示されます。ユーザーには非表示バナーが表示されます。スタッフには、ソーストピックを編集するためのリンクも表示されます。
効果的な非表示バナーのヒント:
- テキストは明確かつ簡潔に保つ
- 最大高さは250pxです（CSSで編集可能）
- 長いテキストの場合、ユーザーはバナー内でスクロールできます
- 詳細情報については、関連する公開トピックへのリンクを追加することを検討してください
永続バナー
ユーザーが非表示にできない、常に表示されるバナーを作成するには:
- サイト設定で
global_notice を検索します。
- このフィールドにバナーテキストまたはHTMLを入力します。
永続バナーのヒント:
- このタイプのバナーは通常、緊急のサイト通信に使用されますが、任意の永続的なメッセージに使用できます
- このバナーは、
login_required サイト上の匿名ユーザーを含む すべてのユーザーに表示されます
- このバナーは、
global notice サイト設定をリセットすることで削除できます
高度なバナー
テーマコンポーネントを使用することで、より高度なバナーを構築できます。これらのテーマコンポーネントは、コアのウェルカムバナー機能と競合する可能性があることに注意してください。
このコンポーネントを使用すると、バナーにカスタムテキストと1〜4個のリンクを追加できます。次のようないくつかのカスタマイズオプションが提供されます。
- バナーを表示する場所の選択（ホームページ、トピックリスト、またはすべてのページ）
- Font Awesomeアイコン付きのリンクの追加
- ユーザーの信頼レベルに基づいた表示の制限
- 背景画像や色のカスタマイズ
- テキストとアイコンの色の調整
最も人気があり、保守されているコンポーネントの1つであるVersatile Bannerは、インターフェースを介して広範なカスタマイズオプションを提供します。これには以下が含まれます。
- バナー表示の制限
- ログイン済みユーザーまたは匿名ユーザー
- モバイルまたはデスクトップデバイス
- ホームページ、トピックリスト、またはすべてのページ
- 非表示、展開可能、または永続的なオプション
- 完全なブラウザ幅の設定
- 色の管理
- HTMLを使用したヘッダーと列のカスタマイズ
CSSによるバナーのカスタマイズ
すべてのバナータイプはCSSを使用してカスタマイズできます。DiscourseサイトのカスタマイズにCSSを使用する方法の詳細については、Discourseテーマの使用に関する初心者ガイドを参照してください。
「いいね！」 42
leopedrini
(Leonardo Zanoni Pedrini)
21
このオプションが見つかりませんでした…ベータ版の新機能ですか？
leopedrini
(Leonardo Zanoni Pedrini)
22
更新：3.4.6から3.5.0に更新した後、表示されました：
「いいね！」 2
RBoy
(RBoy)
23
ビルド 3.6.0.beta1-dev (e44347414a) にバグがあります。
このサイトテキストを変更しても、検索バーのテキストには影響せず、常に「検索」と表示されます。Windows 10 x64 Chrome でテストしました。
「いいね！」 3
RBoy
(RBoy)
25
素晴らしい、ありがとうございます。これで解決しました！
「いいね！」 2
tknospdr
(David Muszynski)
27
ウェルカムバナーの背景画像に問題があります。
質問のサイトでは、オブジェクトストレージに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";
}
しかし、これは機能していません。それでもバグのように感じます。
「いいね！」 1
yuriy
(Yuriy Kurant)
28
@tknospdr様、どのような問題が発生しているのか、よく理解できませんでした。
お客様のサイト https://eu.technospider.com を確認しましたが、背景画像は期待通りに表示されているようです。
tknospdr
(David Muszynski)
29
CSSの上書きがようやく機能したと思います。問題は、上書きが必要ないはずだということです。
Cloudflare S3でホストしている場合、バナーコードが間違ったアセットを使用しているようです。
yuriy
(Yuriy Kurant)
30
あなたのオーバーライドは具体的に何ですか？
こちら側では、CSSでURLパス名 /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg のみを適用するようにできます。
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
これにより、オーバーライドを必要とせずに、このルールが機能するはずだと考えています。
tknospdr
(David Muszynski)
31
私のオーバーライド全体は次のとおりです。
.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;
}
UIでは、画像をアップロードすることしかできないため、CSSのオーバーライドステートメントを削除するにはコードの変更が必要だと考えています。
実装していただける修正があれば、喜んで試させていただきます。
「いいね！」 1
Frenky
32
皆さん、こんにちは。
最新のDiscourseアップデートにより、テーマコンポーネントのAdvanced Search Bannerはサポートされなくなり、おそらくメンテナンスもされなくなりました。その代わりに、公式のWelcome Banner拡張機能が登場しました。
問題は、新しいコンポーネントでは現在、単一の背景画像しか選択できないことです。古いAdvanced Search Bannerコンポーネントでは、ライトモードとダークモードで異なる背景画像を定義することが可能であり、これは異なるレイアウトやテーマにとって理想的でした。
コミュニティへの質問です。
- Welcome Bannerでこの機能を再現する方法はありますか？
- 誰か、ライトモードとダークモードで異なる背景画像を使用するための拡張機能や回避策をすでに実装していますか？
- 開発者が将来的にこれを実装する予定はありますか？
ヒント、コツ、アイデアなどがあれば教えていただけると幸いです！
よろしくお願いします！
「いいね！」 1
