高度な検索バナー

[Discourse]

このテーマコンポーネントは非推奨となり、使用することは推奨されません。その機能は現在 Discourse Core に組み込まれています。ウェルカムバナーの設定方法については、以下のドキュメントをご覧ください:

→ Creating a banner to display at the top of your site

	概要	Advanced Search Banner は、メインのトピックリストナビゲーションの上に、検索バーと任意の見出し・サブヘッドテキストを組み合わせたバナーを表示します。
	プレビュー	Discourse Theme Creator でのプレビュー
	リポジトリリンク	https://github.com/discourse/discourse-search-banner
	Discourse テーマについて初めての方へ	Discourse テーマの使用に関する初心者向けガイド

このテーマコンポーネントをインストール

これは Discourse チームによってメンテナンスされている #公式テーマコンポーネント です。#サポート、#バグ報告、#UX、#機能リクエストは、Meta 内の各カテゴリで行うことができ、適切なテーマコンポーネントタグを付けてください。以下のリンクをクリックして、リクエストを開始してください。

サポート バグ UX 機能

機能

デフォルトでは、このバナーはすべてのトップレベルのトピックページ（最新/新規/未読/トップ/カテゴリ… top menu サイト設定のいずれか）に表示されますが、コミュニティのホームページのみに表示するように設定することもできます。

設定

名前	説明
show on	バナーが表示されるページを決定します
plugin outlet	バナーがページ上のどこに表示されるか
background image light	ライトカラースキームでのバナーの背景画像
background image dark	ダークカラースキームでのバナーの背景画像
tile background image	背景画像をタイル状に繰り返す
show for	Search Banner を誰に表示するか（ログイン済み、ログアウト済み、または両方）
special style	検索バナーの外観を変更する任意のバリエーション

翻訳キー	デフォルト値
search_banner.headline	コミュニティへようこそ
search_banner.subhead	ここにご参加いただきありがとうございます。お手伝いが必要な場合は、投稿する前に検索してください。
search_banner.search_button_text

表示したくない場合は、フィールドを空白のままにしてください。

カスタムスタイル

このバナーが表示される箇所には HTML 要素に .display-search-banner というクラス名が付けられ、バナー自体は .custom-search-banner クラスで囲まれています。したがって、CSS を少し追加するだけで、お好みに合わせてバナーの外観をカスタマイズできるはずです。

今後の機能強化

• 特定のカテゴリでのバナー有効化オプションの追加

クレジット

このコンポーネントは、@angus による Pavilion Header Search Theme Component を大幅に参考にしています。

ホスティングサービスをご利用中ですか？ テーマコンポーネントは、当社の Standard、Business、Enterprise プランでご利用いただけます。

[awesomerobot (Kris)]

テーマコンポーネントを更新し、新しい設定を追加しました:

show on — バナーが表示される場所を決定します。以下のオプションがあります:

• top_menu（最新/カテゴリ/トップ/新規/未読）
• homepage
• all（デフォルトの検索ページと管理ページを除くすべてのページ）

show for — バナーを表示する対象を決定します:

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

コンポーネントにオプションのスタイルを追加するマイナーアップデートを行いました。これにより、タイトルテキストなしの大きな検索バーが表示されます。

これは新しい「スペシャルスタイル」設定で有効にできます。これを行うのは、少し追加のCSSを有効にするだけです。

将来的には、さらにオプションを追加する可能性があります！

[AndyBr (Andy)]

このアドオンの「ようこそ」テキストの色を変更するにはどうすればよいですか？

[Arkshine]

それに対する設定はありません。ただし、CSSで追加できます。

以下をテーマまたは新しいテーマコンポーネントに追加し、必要に応じて変更してください。

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

どうもありがとうございます！

[RBoy]

検索アイコンを非表示にする方法はありますか（CSSまたはその他の方法を使用）？ このコンポーネントと組み合わせて使用すると、検索アイコンが重複するという問題が発生しています: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

検索アイコンは1つだけ表示されるはずです。ただし、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響があることは申し添えておきます。

どちらか一方のみを使用することをお勧めします。

[RBoy]

ありがとうございます！大変参考になりました。

@isaac

ただ、検索バナーとヘッダー検索を同時に使用すると、UXに悪影響が出ると言わざるを得ません。

具体的にどのようなUXの悪影響があるのか、詳しく教えていただけますか？

[isaac (Isaac Janzen)]

上記の動画で、いくつかの問題点を示しています

• 重複する検索ドロップダウン
• 検索ドロップダウンの奇妙な開閉状態
• 検索アイコンが、一方の検索入力では高度な検索へのリンクになっているが、もう一方ではそうではない
• など

[RBoy]

承知しました。同じページにない限り、問題ないということですね。

[مباركمبارك (مبارك)]

誰か手伝ってくれませんか？ Discourseにこのテーマをインストールしましたが、画像が右側の一部で切り取られています。画像が完全に収まるようにするには、サイトのフォントを「より小さい」に設定する必要があります。Discourseのインストールは2つありますが、そのうちの1つでは画像は正常に機能しましたが、もう1つでは画像が切り取られているのはなぜですか？

[awesomerobot (Kris)]

スクリーンショットを含めることはできますか？これにより、問題を理解するのがはるかに簡単になります。

[ecki (Bernd)]

同じ問題が発生しており、異なるブラウザ/モードで画像の異なる部分が表示されます。画像を非常に幅広くすることで解決しましたが、これにより右側が一部の条件でしか表示されなくなります。しかし、対称的な画像ではそれほど簡単ではありません。おそらく、さらにCSS（thome-component-overwrite を検索せずに）を追加すると役立つでしょう。

[مباركمبارك (مبارك)]

一部解決できました。他のテーマのテーマコンポーネントを無効にし、1つだけ残しました。信じられないかもしれませんが、画像はフォントサイズが「normal」で「normal」だったのは、携帯電話のせいで画像の片側しか表示されなかったからです。携帯電話でも完全に表示できるように何かできることはありますか？

[Surbhi_Pal1 (Surbhi)]

こんにちは。

検索バナーとヘッダーの間のスペースを削除する方法はありますか？

[Arkshine]

こんにちは、新しいテーマコンポーネントでこのCSSを使用できます。

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

完璧に機能しました、ありがとう！

[PT_LB (Paul)]

Discourse にも私のコミュニティと同じ問題があるようです。検索アンダーレイ (Discover) を覆うオーバーレイが表示されるまでに時間がかかります。

私のコミュニティでは、さらに顕著です。

この問題に対する修正策をご存知の方はいらっしゃいますか？オーバーレイの表示を遅延させることで解決できるかもしれません。ユーザーエクスペリエンスが悪化する可能性があります。