このガイドでは、シンプルな「閉じる」ボタン付きバナーから高度なオプションまで、Discourseサイトでバナーを作成およびカスタマイズするさまざまな方法について説明します。
必要なユーザーレベル：モデレーター（閉じるボタン付きバナー）、管理者
バナーは、サイト訪問者に重要な情報を伝える効果的な方法です。このガイドでは、Discourseサイトでバナーを作成およびカスタマイズするためのさまざまな方法を説明します。
ウェルカムバナー
ウェルカムバナーは、新規およびリピートメンバーをフレンドリーなメッセージと目立つ検索バーで迎え、訪問者が探しているコンテンツをすばやく簡単に見つけられるようにします。
ウェルカムバナーを有効にするには：
- 管理エリアで、サイドバーの [外観] > [テーマとコンポーネント] リンクをクリックします。
- アクティブなテーマを見つけて、 [編集] をクリックします。
ウェルカムバナーを有効にする設定を見つけて、チェックが入っていることを確認します。
これにより、このテーマのウェルカムバナーが有効になります。ユーザーが選択できる複数のテーマを提供している場合は、テーマごとにこの手順を繰り返す必要があります。
ウェルカムバナーのカスタマイズ
ウェルカムバナーをカスタマイズして、コミュニティでの表示を変更できます。管理エリアで [すべてのサイト設定] に移動し、「welcome banner」を検索すると、次のカスタマイズオプションが見つかります。
ウェルカムバナーの場所：ウェルカムバナーがページ上のどこに表示されるかを決定します。「トピックコンテンツの上」がデフォルトですが、「サイトヘッダーの下」を選択することもできます。違いはわずかで、下のスクリーンショットに示されています。
ウェルカムバナーのページ表示：ウェルカムバナーが表示されるページを決定します。デフォルトでは「トップメニューページ」（トップメニュー設定で選択されたページを意味します）に表示されますが、次のように変更できます。- 「ホームページ」：ウェルカムバナーはサイトのホームページ（つまり、
トップメニュー設定で最初にリストされたページ）にのみ表示されます。 - 「ディスカバリー」：ウェルカムバナーは、サイトの実際のトップメニューに表示されていない場合でも、すべての
トップメニューページに表示されます（設定で選択されていない場合）。 - 「すべてのページ」：ウェルカムバナーはサイトの すべての ページに表示されます。これは、トピックページでの視覚的な乱雑さを引き起こし、メンバーの読書や参加を妨げる可能性があるため、一般的には推奨されません。
- 「ホームページ」：ウェルカムバナーはサイトのホームページ（つまり、
ウェルカムバナー画像：ウェルカムバナーの背景として使用する画像をアップロードします。
ウェルカムバナーのテキストをカスタマイズして、挨拶を変更し、ウェルカムバナーに追加の説明テキストを追加することもできます。バナーテキストをカスタマイズするには：
- 管理エリアで、サイドバーの [外観] > [サイトテキスト] リンクをクリックします。
- 調整したいテキスト文字列を検索します。
js.welcome_banner.header.logged_in_members— ウェルカムバナーでログイン済みメンバーに表示される主な挨拶。js.welcome_banner.header.anonymous_members— ウェルカムバナーで匿名（つまりログインしていない）メンバーに表示される主な挨拶。js.welcome_banner.subheader.logged_in_members— ウェルカムバナーでログイン済みメンバーに表示される、ヘッダーの下のオプションの2行目のテキスト。js.welcome_banner.subheader.anonymous_members— ウェルカムバナーで匿名（つまりログインしていない）メンバーに表示される、ヘッダーの下のオプションの2行目のテキスト。js.welcome_banner.search_placeholder— ウェルカムバナーの検索フィールドに表示されるプレースホルダーテキスト。
- [編集] ボタンをクリックします。
- 必要に応じてテキストを更新します。
- [変更を保存] をクリックします。
閉じるボタン付きバナー
閉じるボタン付きバナーは、ユーザーが閉じることができる一時的な通知です。作成方法は次のとおりです。
- いずれかのカテゴリ（公開またはプライベート）でトピックを作成または移動します。トピックの上部にある元の投稿（OP）がバナーのソースになります。
- 右側またはトピックの下部にあるレンチアイコンをクリックして、管理オプションを開きます。
- 「トピックをピン留め…」を選択します。
- 新しいウィンドウで、
バナートピックにする を選択します。
これで、バナーがサイトの上部に表示されます。ユーザーには閉じるボタン付きバナーが表示されます。スタッフには、ソーストピックを編集するためのリンクも表示されます。
効果的な閉じるボタン付きバナーのヒント：
- テキストは明確かつ簡潔に保ちます。
- 最大高さは250pxです（CSSで編集可能）。
- 長いテキストの場合、ユーザーはバナー内でスクロールできます。
- 詳細については、関連する公開トピックへのリンクを検討してください。
永続バナー
ユーザーが閉じることができない、常に表示されるバナーを作成するには：
- サイト設定で
global_noticeを検索します。 - このフィールドにバナーテキストまたはHTMLを入力します。
永続バナーのヒント：
- このタイプのバナーは、通常、緊急のサイト通信に使用されますが、永続的なメッセージにも使用できます。
- このバナーは、
login_requiredサイトの匿名ユーザーを含む、すべての人に表示されます。 global noticeサイト設定をリセットすることで、バナーを削除できます。
高度なバナー
テーマコンポーネントを使用して、より高度なバナーを構築できます。これらのテーマコンポーネントは、コアのウェルカムバナー機能と競合する可能性があることに注意してください。
ウェルカムリンクバナー
このコンポーネントを使用すると、バナーにカスタムテキストと1〜4個のリンクを追加できます。次のようなさまざまなカスタマイズオプションが提供されます。
- バナーの表示場所を選択する（ホームページ、トピックリスト、またはすべてのページ）
- Font Awesomeアイコンを使用してリンクを追加する
- ユーザーの信頼レベルに基づいて表示を制限する
- 背景画像または色をカスタマイズする
- テキストとアイコンの色を調整する
Versatile Banner
最も人気があり、よくメンテナンスされているコンポーネントの1つであるVersatile Bannerは、インターフェイスを通じて広範なカスタマイズオプションを提供します。これには以下が含まれます。
- バナー表示の制限
- ログイン済みまたは匿名ユーザー
- モバイルまたはデスクトップデバイス
- ホームページ、トピックリスト、またはすべてのページ
- 閉じる、展開可能、または永続的なオプション
- ブラウザ全体の幅設定
- 色管理
- HTMLを使用した見出しと列のカスタマイズ
CSSを使用したバナーのカスタマイズ
CSSを使用して、すべてのバナータイプをカスタマイズできます。DiscourseサイトのカスタマイズにCSSを使用する方法の詳細については、Discourseテーマの使用に関する初心者ガイドを参照してください。