多用途バナー

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_lifespan 設定に相対時間を指定すると、ユーザーが適切なボタンを押した後に、その期間中バナーが閉じた状態、展開された状態、または折りたたまれた状態を維持します。この設定がない場合、バナーは完全なページ読み込みごとにリセットされます。バナーに変更を加え、以前にバナーを閉じたユーザーも含め、すべてのユーザーに変更を反映させたい場合は、「クッキー名」を変更してください。これにより、永続的な状態がリセットされ、ユーザーが再度バナーを閉じることが可能になります。

設定

名前	説明
show for members	フォーラムにログインしているユーザーにバナーを表示
show for anon	匿名ユーザーにバナーを表示
display on mobile	モバイル端末でバナーを表示
display on desktop	デスクトップコンピューターでバナーを表示
display on homepage	ホームページでバナーを表示
url must contain	バナーを表示するパスを入力。パスの末尾に `*` を追加してワイルドカードとして使用
dismissible	ユーザーがバナーを閉じられるようにする
collapsible	ユーザーがバナーを展開・折りたたみできるようにする
default collapsed state	折りたたみ設定が有効な場合のデフォルトの折りたたみ状態
cookie lifespan	バナーが閉じられたか、展開または折りたたまれたかを記憶するために使用されるクッキーの有効期間。「none」に設定すると、このコンポーネントでクッキーは使用されず、バナーに関連して以前に作成されたクッキーは、ユーザーが完全なページ読み込みを行う際に削除されます。値は単一の単位で測定されるため、「year」は 1 年、「week」は 1 週間などを意味します。
cookie name	バナーに重要な変更を加えた場合は、すべてのユーザーに変更を反映させるためにクッキー名を変更する必要があります。
full width banner	バナーをブラウザ幅全体に表示
swap default positioning	他のバナー関連コンポーネントがアクティブな場合、Versatile Banner とその位置を交換するために使用
plugin outlet	below-site-header はサイドバーの上、above-main-container はサイドバー横のコンテンツの上に配置
banner background image	背景画像のソース URL。ヒント: メインテーマに画像をアップロードし、その URL を使用できますが、このコンポーネントの「Uploads」セクションを使用しないようにしてください。このコンポーネントに追加されたアップロードは、更新時に削除されます。
banner background image dark	システムのダークモードが検出された場合の背景画像のソース URL。
background color	背景画像の代わりに使用される色
background color dark	システムのダークモードが検出された場合、背景画像の代わりに使用される色
primary text color	バナーの主なテキストの色
primary text color dark	システムのダークモードが検出された場合のバナーの主なテキストの色
secondary text color	アイコンとテキストの見出しの色、およびボタンの背景色
secondary text color dark	システムのダークモードが検出された場合のアイコンとテキストの見出しの色、およびボタンの背景色
link text color	バナー内のリンクのテキストの色
link text color dark	システムのダークモードが検出された場合のバナー内のリンクのテキストの色

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

私 hosts によるホスティングの場合: テーマコンポーネントは、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	42	15741	2025 年 7 月 9 日
Category Banners Theme component official , category-banners	87	49398	2025 年 11 月 11 日
Notification Banners Theme component	50	2313	2025 年 11 月 19 日
An update changed our versatile banner - I don't know where we can add CSS Support	30	748	2023 年 8 月 22 日
Discourse Persistent banner Theme component	9	527	2024 年 10 月 20 日

多用途バナー

機能

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

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

設定

関連トピック