このガイドでは、簡単な非表示バナーからより高度なオプションまで、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テーマの使用に関する初心者ガイドを参照してください。