多目的バナー

Discourse · 2019 年 2 月 14 日午前 10:05


	概要	Versatile Banner は、サイトのカスタマイズ可能なバナーを追加します。
	プレビュー	Discourse Theme Creator でのプレビュー
	リポジトリリンク	https://github.com/discourse/discourse-versatile-banner
	Discourse テーマが初めてですか？	Discourse テーマの使用に関する初心者ガイド

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

機能

このテーマコンポーネントは、以前のバナー機能の進化版です。テーマ設定の使用により、より容易で柔軟な提供を目指しています。

以下は機能のハイライトです：

ログインユーザーまたは匿名ユーザーへの表示を制限
モバイルまたはデスクトップのみに表示を制限
特定のページへの表示を制限
閉じる、展開、常に表示のオプション
ブラウザの全幅表示オプション
色の管理
HTML を使用した見出しと列のカスタマイズ（以下参照）
永続的な状態のオプション（以下参照）

バナーコンテンツのカスタマイズ

バナーコンテンツは、メインの見出しと列に分かれています。バナーには最大 5 列まで設定できますが、幅の制限のため、推奨される列数は 3 列以下です。HTML テンプレートが提供されており、個々のニーズに合わせてカスタマイズできます。各列の幅を制御し、各列の上部に任意の画像や Font Awesome アイコンを追加することもできます。

永続的な状態オプションの使用

永続的な状態オプションは、最大 2 つの Cookie に依存します。これらの Cookie には、バナーの名前と、バナーの状態に関連する true/false の値が含まれます。サイトで Cookie を使用することに懸念がある場合は、この設定の使用を避けるのが最も安全です。cookie_lifespan 設定に対して相対的な時間のオプションを選択すると、ユーザーが適切なボタンを押した後に、その期間中バナーが閉じられたまま/展開されたまま/折りたたまれたままになるようにします。この設定がない場合、バナーは完全なページ読み込みのたびにリセットされます。バナーに変更を加え、以前にバナーを閉じていたユーザーを含むすべてのユーザーに変更を確認させたい場合は、「cookie name」を変更してください。これにより、永続的な状態がリセットされ、ユーザーが再度バナーを閉じることができます。

設定

名前	説明
メンバーに表示	フォーラムにログインしているユーザーにバナーを表示
匿名ユーザーに表示	匿名ユーザーにバナーを表示
モバイルに表示	モバイルデバイスにバナーを表示
デスクトップに表示	デスクトップコンピュータにバナーを表示
ホームページに表示	ホームページにバナーを表示
URL に次の文字列が含まれる必要がある	バナーを表示するパスを入力します。パスの末尾に `*` を追加してワイルドカードとして使用
閉じ可能	ユーザーがバナーを閉じられるようにする
折りたたみ可能	ユーザーがバナーを展開および折りたたみできるようにする
デフォルトの折りたたみ状態	折りたたみ可能設定が有効な場合のデフォルトの折りたたみ状態
Cookie の存続期間	バナーが閉じられたか、展開されたか、折りたたまれたかを記憶するために使用される Cookie の存続期間。「none」に設定すると、このコンポーネントでは Cookie が一切使用されず、バナーに関連する以前に作成されたすべての Cookie は、ユーザーが次の完全なページ読み込みを実行したときに削除されます。値は単一の単位として測定されるため、「year」を設定すると 1 年、「week」を設定すると 1 週間などとなります。
Cookie 名	バナーに重要な変更が加えられた場合、すべてのユーザーに変更を確認させるために Cookie 名を変更する必要があります。
全幅バナー	バナーをブラウザの全幅で表示
デフォルトの配置を切り替え	他のバナー関連コンポーネントがアクティブな場合、これを使用して Versatile Banner との位置を切り替えます
プラグインアウトレット	below-site-header はサイドバーの上に配置し、above-main-container はサイドバーの横のコンテンツの上に配置します
バナーの背景画像	背景画像のソース URL。ヒント：メインテーマに画像をアップロードし、その URL を使用できますが、このコンポーネントの「Uploads」セクションは使用しないでください。このコンポーネントに追加されたアップロードは、コンポーネントが更新されるたびに削除されます。
バナーの背景画像（ダークモード）	システムのダークモードが検出されたときの背景画像のソース URL。
背景色	背景画像の代わりに使用
背景色（ダークモード）	システムのダークモードが検出されたときに、背景画像の代わりに使用
メインテキストの色	バナーのメインテキストの色
メインテキストの色（ダークモード）	システムのダークモードが検出されたときのバナーのメインテキストの色
サブテキストの色	アイコンとテキストの見出し、およびボタンの背景色のテキストの色。
サブテキストの色（ダークモード）	システムのダークモードが検出されたときの、アイコンとテキストの見出し、およびボタンの背景色のテキストの色。
リンクテキストの色	バナー内のリンクのテキストの色
リンクテキストの色（ダークモード）	システムのダークモードが検出されたときの、バナー内のリンクのテキストの色。

翻訳	デフォルト
close.title	バナーを閉じる
close.label	閉じる
toggle.title	バナーを展開/折りたたむ
toggle.collapse_label	折りたたむ
toggle.expand_label	展開

当社でホストしていますか？テーマコンポーネントは、Pro、Business、Enterprise プランでご利用いただけます。

Dhruvi_Butti · 2021 年 1 月 19 日午前 7:09

こんにちは！すべてのテキストを左揃えにしたいのですが、CSS テーマがうまく機能しません。具体的にどのようにすればよいのか、教えていただけますか？

tshenry · 2021 年 1 月 19 日午後 7:04

ご希望の方向性と合っていますでしょうか？

もしそうであれば、まずはこれを試せるよう、簡易的な CSS をいくつか用意しました：

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

「Versatile Banner Customizations」という新しいコンポーネントを作成し、上記の CSS を「Common」セクションに追加してください。また、Versatile Banner を使用しているアクティブなテーマには、この新しいコンポーネントを追加してカスタマイズを反映させることを忘れないでください。

Dhruvi_Butti · 2021 年 1 月 20 日午後 12:57

これでうまくいきました。本当にありがとうございます。

charlie788 · 2021 年 2 月 11 日午後 8:33

こんにちは、

背景画像をクリッ可画像に変換することは可能でしょうか？

ご回答よろしくお願いいたします。

SidV · 2021 年 2 月 16 日午前 2:36

具体例を教えていただけますか？
なぜそうしたいのでしょうか？
つまり、すべての背景画像がリンクになるということですか？
ユーザーがバナーのどこをクリックしても、そのリンクにリダイレクトされるのですよね。
どのような用途があるのか想像がつかないのですが。

Astra · 2021 年 2 月 16 日午後 3:38

バナーの高さを調整するにはどうすればよいですか？

LeCoyote · 2021 年 2 月 16 日午後 10:34

@tshenry さん、こんにちは。Versatile Banner コンポーネントを使用しているのですが、「デスクトップに表示」のチェックを外すと、バナーがすべて消えてしまいます。

本来はモバイル端末でのみバナーを表示させたいと考えています。

しかし、「デスクトップに表示」のチェックを外すと、デスクトップとモバイル両方の Versatile Banner が消えてしまいます。確認用サイトはこちらです：https://hec.fm

何か見落としているのでしょうか？

Astra · 2021 年 2 月 17 日午前 9:56

モバイルでもリンクを横並びに表示することは可能でしょうか？縦に並んで表示されることに少し驚きました。

tshenry · 2021 年 2 月 23 日午前 2:37

ご報告ありがとうございます！返信が遅くなり申し訳ありません。おっしゃる現象を再現できました。何が起きているかはおそらくわかります。今週後半に確認して、改めてご連絡いたします。

バナーの高さは主にそのコンテンツに依存しますが、必要に応じてご自身のCSSで任意の調整が可能です。モバイル画面で3列を横並びに収められるかどうかは確実ではありませんが、カスタムCSSで試してみることはもちろん可能です！いくつかのヒントについては、Making custom CSS changes on your site をご覧ください。

MrDavis97 · 2021 年 2 月 24 日午前 2:33

サイト内でクッキーの寿命に関連し、バナーの展開/折りたたみ状態を維持する際にバグが発生しているようです。ユーザーがバナーを折りたたんだり展開したりした状態を記憶し、その設定を常に維持したいと考えています。ホームページに留まっている場合やトピックをクリックする場合は、期待通りに動作します。しかし、管理パネル、ユーザー設定、FAQ、About、利用規約、プライバシーポリシー、ドキュメントなどのページに移動してからホームページに戻ると、挙動がおかしくなり、バナーの状態が設定と逆になったり、展開/折りたたみを示すチェバロンアイコンの向きが正しくない場合さえあります。

ここでは、チェバロンアイコンが上を向いています：

しかし、ドキュメントをクリックしてホームページに戻ると、チェバロンアイコンの向きが逆になっています。

これは非常に奇妙な挙動のように思えます。

augustinecicc · 2021 年 3 月 28 日午後 10:54

ログインページに以前表示されていた「Versatile Banner」が、当フォーラム（非公開フォーラム）で表示されなくなったことに気づきました。

コンポーネント設定で「匿名ユーザーにバナーを表示する」にチェックが入っています。

HTMLを確認すると、クラス名が「emberX」の div の入れ子の中に、クラス名が「banner-box」の div がありますが、ログイン済みのユーザーの HTML とは異なり、その「banner-box」の div の中身が空です。

何が原因でこのような事態になっているか、心当たりはありますか？

tshenry · 2021 年 3 月 30 日午前 2:06

コンポーネントに小さなアップデートをプッシュしました。

上記のアップデートでこの問題は修正されるはずです。修正までにとてもお待たせしてしまい、本当に申し訳ありません。ご報告いただきありがとうございます！

テーマ設定の「URL に含まれる必要がある」に /login を追加する必要があります。詳細はこちらの投稿をご覧ください。

これは過去に何度か報告されていますが、残念ながら私はまだ再現できていません。機会を見て、あなたの手順をそのまま試して、何か手がかりが見つかるか確認してみます。

Dimitri_Nightmare · 2021 年 4 月 2 日午前 7:36

多目的バナーを使用しており、バナーを別のウェブサイトへリダイレクトする巨大なリンクに変えたいと考えています。
どうすればよいでしょうか？

以下のスクリプトで変更を試みました：api.changeWidgetSetting('banner-content-widget', 'href', '<site_adresse>')
しかし、これを行うと多目的バナーが機能しなくなりました。

augustinecicc · 2021 年 4 月 2 日午後 8:42

ありがとうございます、素晴らしいです。今では完璧に動作しています！

tshenry · 2021 年 4 月 2 日午後 9:49

以下のような方法が考えられます：

<script type="text/discourse-plugin" version="0.10.0">
  // ヘッダーにリンクを追加
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // コンテンツの残りの部分にもリンクを追加
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

さらに、リンクの色を調整する CSS ルールを追加します：

.banner-box a {
    color: var(--primary);
}

Versatile Banner が提供する特定の機能が必要でないのであれば、新しいコンポーネントでシンプルな HTML バナーを作成する方がよいかもしれません。簡単な例を以下に示します：

Common の「After Header」セクションに以下を追加：

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>これはカスタムバナーです！</h2>
  </div>
</a>

Common の「CSS」セクションに以下を追加：

.custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

これにより、完全にクリック可能なシンプルなバナーが作成されます：

mercury233 · 2021 年 5 月 11 日午前 12:41

このコンポーネントを git からインストールしていますが、最新のコードが取得できていないようです。FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub が、私のサイト https://ygobbs.com/ で更新されていないようです。

tshenry · 2021 年 5 月 11 日午前 2:36

これは、Discourse のバージョン 2.6.0.beta2 を実行しているためです。リンクされたコミットには 2.6.0.beta3 以降が必要です。リンクされたコミットには、古い Discourse インストールと互換性のないコミットへの更新を防ぐために discourse-compatibility ファイルが追加されていることに気づくはずです。

mercury233 · 2021 年 5 月 11 日午前 2:45

わあ、Discourse がコンポーネントのインストールを阻止する代わりに、古いバージョンを自動的に見つけてくれるなんて素晴らしいですね！ありがとうございます！

gassim · 2021 年 6 月 29 日午前 9:53

@tshenry さん、こんにちは。
コンポーネントを複数回インストールして、それぞれのカテゴリに異なるバナーを表示させたいと考えています。そのため、「ホームページに表示」を無効にし、「URL に含む」条件を設定しましたが、これによりホームページ専用に表示しているメインのコンポーネントも表示されなくなってしまいました。別の解決策をご教示いただくか、あるいはこれはバグでしょうか？よろしくお願いいたします！(:

トピック		返信	表示
Welcome Link Banner Theme component official , welcome-link-banner	39	15931	2025 年 7 月 9 日
Category Banners Theme component official , category-banners	85	49860	2025 年 11 月 11 日
Notification Banners Theme component	50	2526	2025 年 11 月 19 日
An update changed our versatile banner - I don't know where we can add CSS Support	30	796	2023 年 8 月 22 日
Discourse Persistent banner Theme component	9	548	2024 年 10 月 20 日

多目的バナー

機能

バナーコンテンツのカスタマイズ

永続的な状態オプションの使用

設定

関連トピック