ハウス広告テンプレート

[Discourse]

House Ad Templates

This guide provides templates for creating house ads using the Official Discourse Ad Plugin.

Important: Disable ad blockers (including those built in to browsers, e.g. Brave) before working with these ad customizations.

Before You Start

1. Create a “House Ads” theme component to store:
   • CSS for your house ads
   • Uploaded images used in ads
2. Add the component to all active themes where ads will appear
3. Optimize images using TinyPNG to reduce file size while maintaining quality

Template Options

1. Simple Logo and Text Ad

A clean design featuring a square logo with accompanying text. The colors automatically adjust to match your site’s color scheme.

Specifications:

• Image Type: PNG or JPEG
• Image Size:
  • Desktop & Mobile: 500x500px (1:1 aspect ratio)
  • Retina: 1000x1000px recommended
• Additional Notes:
  • Square aspect ratio must be maintained
  • Colors automatically adapt to site theme
  • Image appears left-aligned with text on right

HTML

<a href="DESTINATION_URL" class="h-creative" target="_blank">
    <div class="container">
        <div class="product-image">
            <img src="IMAGE_URL">
        </div>
        <div>
            <p class="big">LARGER_TEXT</p>
            <p>SMALLER_TEXT</p>
        </div>
    </div>
</a>

CSS

.h-creative {
  display: block;
  clear: both;
  max-width: 500px;
  color: var(--primary) !important;
  background-color: var(--secondary);
  
  .container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 0;
  }
  
  p {
    margin: 0 20px;
  }
  
  .product-image {
    width: 150px;
    height: 150px;
  }
  
  img {
    max-width: 150px;
    max-height: 150px;
  }
  
  .big {
    font-size: 24px;
    line-height: normal;
    padding-bottom: 10px;
  }
}

.mobile-device .house-creative {
  .product-image {
    width: 120px;
    height: 120px;
  }
  
  img {
    max-width: 120px;
    max-height: 120px;
  }
}

2. Responsive Banner Ad - Style 1

A full-width banner that adapts between desktop and mobile views.

Specifications:

• Image Type: PNG or JPEG
• Image Size:
  • Desktop: 690x90px (7.67:1 aspect ratio)
  • Mobile: 320x90px (3.56:1 aspect ratio)
  • Retina: 1380x180px (desktop) and 640x180px (mobile) recommended
• Additional Notes:
  • Requires two separate images for desktop/mobile
  • Banner adjusts width to container
  • Text remains readable at all sizes
  • CTA button maintains consistent size across devices

Desktop:

Mobile:

HTML

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
    <div class="container">
        <div>
            <p class="big">A responsive banner ad</p>
            <p class="small">Customize to your liking.</p>
        </div>
        <button class="btn btn-default cta">
            <span class="d-button-label">Click Here!</span>
        </button>
    </div>
</a>

CSS

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
  display: flex;
  clear: both;
  max-width: calc(var(--topic-body-width) + var(--topic-avatar-width) + (var(--topic-body-width-padding) * 2));
  background-color: #FEF25E;
  border: 1px solid var(--primary);
  box-sizing: border-box;

  img {
    height: 90px;
    &.desktop {
      display: block;
    }
    &.mobile {
      display: none;
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    p {
      margin: 0;
      &.small {
        font-weight: bold;
        text-align: right;
        padding: 1px 5px;
        background-color: #000000;
        color: #FFFFFF;
      }
      &.big {
        font-size: 24px;
        line-height: normal;
        padding-bottom: 5px;
        color: #434343;
        font-weight: lighter;
      }
    }

    .cta {
      color: $cta-text-color;
      background-color: $cta-background-color;
      &:hover {
        background-color: darken($cta-background-color, 20%);
      }
    }
  }
}

@media only screen and (max-width: 672px) {
  .banner-ad {
    img.desktop, p {
      display: none;
    }
    img.mobile {
      display: block;
    }
    .container {
      justify-content: center;
      .cta {
        margin: 0 5px;
        font-size: 12px;
      }
    }
  }
}

3. Responsive Banner Ad - Style 2

Specifications:

• Image Type: SVG preferred, PNG/JPEG supported
• Image Size:
  • SVG: 75x75px viewBox
  • Raster Alternative: 150x150px (2x for retina)
  • Container height: 90px on desktop
• Additional Notes:
  • Background uses CSS gradient (no image required)
  • Banner width automatically adjusts to container
  • SVG logo maintains crisp display at all sizes
  • Round CTA button maintains proportions

Desktop:

Mobile:

HTML

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 103 104" data-ember-extension="1">
            <g fill="none" fill-rule="nonzero">
                <path fill="#000" d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87C102.86 23.73 80 0 51.87 0z" />
                <path fill="#FFF9AE" d="M52.37 19.74c-11.1380058.0065739-21.451097 5.8725864-27.1495582 15.4424743C19.5219805 44.7523623 19.2787009 56.6145192 24.58 66.41l-5.72 18.4 20.54-4.64c11.7619991 5.29926 25.5640682 2.9191757 34.8718647-6.0134445 9.3077965-8.9326201 12.2534008-22.6251484 7.4422692-34.5951021C76.9030023 27.5914997 65.3006488 19.7462906 52.4 19.74h-.03z" />
                <path fill="#00AEEF" d="M77.45 32.12c8.765 11.492 8.616 27.467-.363 38.794C68.11 82.24 52.59 86.03 39.4 80.12l-20.54 4.7 20.91-2.47c13.862 8.12 31.61 4.547 41.25-8.304 9.64-12.851 8.105-30.89-3.57-41.926z" />
                <path fill="#00A94F" d="M75.32 64.909C67.571 77.11 52.533 82.5 38.8 78l-19.94 6.82 20.54-4.65c14.629 6.608 31.887 1.199 40.127-12.576 8.24-13.776 4.844-31.54-7.897-41.304 9.917 10.514 11.436 26.417 3.69 38.619z" />
                <path fill="#F15D22" d="M26.47 67.11c-5.725-13.8-1.007-29.722 11.31-38.176 12.319-8.453 28.873-7.128 39.69 3.176-10.018-13.147-28.474-16.356-42.342-7.363C21.26 33.741 16.662 51.901 24.58 66.41l-5.72 18.4 7.61-17.7z" />
                <path fill="#D0232B" d="M24.58 66.41c-7.103-13.12-4.065-29.421 7.288-39.102 11.353-9.68 27.929-10.105 39.762-1.018-11.351-11.952-29.982-13.176-42.798-2.81-12.817 10.366-15.517 28.84-6.202 42.44l-3.76 18.9 5.71-18.41z" />
            </g>
        </svg>
        <div>
            <p class="big">A responsive banner ad</p>
            <p>Customize to your liking.</p>
        </div>
        <button class="btn btn-default">
            <span class="d-button-label">Click Here</span>
        </button>
    </div>
</a>

CSS

$cta-background-color: #D70751;
$cta-text-color: #FFFFFF;

.banner-ad {
  display: block;
  clear: both;
  max-width: calc(var(--topic-body-width) + var(--topic-avatar-width) + (var(--topic-body-width-padding) * 2)) !important;
  background: linear-gradient(#d7d9e2 0%, #ffffff 75%);
  border: 1px solid #808080;
  box-sizing: border-box;

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
  }

  svg, img {
    margin-left: 5px;
    height: 75px;
  }

  p {
    color: #222;
    margin: 0 20px;
    font-family: Verdana, Geneva, sans-serif;
    &.big {
      font-size: 20px;
      line-height: normal;
      padding-bottom: 5px;
    }
  }

  .btn {
    width: 20%;
    height: 45px;
    margin-right: 5px;
    background-color: $cta-background-color;
    color: $cta-text-color;
    font-weight: lighter;
    white-space: nowrap;
    border-radius: 50px;
    &:hover {
      background-color: darken($cta-background-color, 5%);
    }
  }
}

@media only screen and (max-width: 575px) {
  .banner-ad {
    p {
      font-size: 10px;
      &.big {
        font-size: 12px;
        font-weight: bold;
      }
    }
    .btn {
      width: 120px;
      height: unset;
      font-size: 12px;
    }
  }
}

4. Between Posts Text Ad

Specifications:

• Image Type: No images required (text-only design)
• Image Size: N/A
• Additional Notes:
  • Container automatically sizes to content
  • Consistent padding (10px 5px)
  • “Ad” label always visible
  • Adapts to mobile view through fluid width
  • Background color adjusts to theme

Desktop:

Mobile:

HTML

<a class="between-posts-ad" target="_blank" rel="noopener" href="https://discourse.org">
    <div class="ad-container">
        <span class="ad-label">Ad</span>
        <strong>Discourse</strong> - A community platform for civilized discussion on the web
    </div>
</a>

CSS

.house-creative {
  margin-left: 0 !important;
  
  a.between-posts-ad {
    color: var(--primary-med-or-secondary-med);
    
    strong {
      color: var(--primary);
    }
    
    .ad-container {
      max-width: calc(var(--topic-avatar-width) + var(--topic-body-width) + (var(--topic-body-width-padding) * 2));
      padding: 10px 5px;
      text-align: center;
      background-color: var(--primary-very-low);
      border: 1px solid var(--primary-low);
      box-sizing: border-box;
      
      .ad-label {
        margin-right: 2px;
        padding: 2px 5px;
        color: var(--primary-very-low);
        font-weight: bold;
        background-color: #EAC34E;  // Sets color of "Ad" label
        border-radius: 5px;
      }
    }
  }
}

Common Issues and Solutions

1. Mobile Display Issues: Ensure both desktop and mobile images are properly defined in HTML and CSS is correctly handling the responsive breakpoints
2. Color Scheme Problems: Use CSS custom properties (var(--primary), var(--secondary)) instead of hard-coded colors
3. Image Loading: Verify images are correctly uploaded and URLs are properly referenced

Each template can be customized to match your site’s branding and specific needs. Remember to test thoroughly on both desktop and mobile devices before deployment.

Last edited by @tobiaseigen 2025-03-11T00:31:17Z

Check document

Perform check on document:

[Johnny_McIvor]

どうすればいいのでしょうか？該当する記事を見つけましたが、意味がわかりませんでした。

コードのどの部分を変更すればよいですか？

[osioke (Osioke Itseuwa)]

ここでは質問の意図があまりよくわかりません。具体的にどのようなサポートが必要でしょうか？広告のコードをどこに追加すればよいかお考えであれば、上記のヒントセクションをご覧ください。

@tshenry

ハウス広告に関連する CSS を格納するための「House Ads」テーマコンポーネントを作成してください。また、広告に使用する画像をアップロードすることもできます。該当するアクティブなテーマにコンポーネントを追加することを忘れないでください！

[tshenry (Taylor)]

@Johnny_McIvor 持ち上げていただきありがとうございます！すべてのテンプレートの CSS 部分を CSS カスタムプロパティを使用するように更新しました。

スクリーンショットの 5 行目では $primary が使用されています。これを var(--primary) に変更してください。

同様に、6 行目では $secondary が表示されています。これを var(--secondary) に変更してください。

引き続き問題が発生する場合はお知らせください。

[Dawn (Dawn Albrecht)]

デスクトップ用とモバイル用のハウス広告に異なるサイズのグラフィックをアップロードしたい場合、レスポンシブバナー広告 1 の CSS コンポーネントを使用する必要がありますか？

技術リソースが非常に限られているため、コミュニティの ROI を向上させ、専任の技術リソースを増やすためにこの問題を解決しようとしています（現時点ではまさに「悪循環」の状態です）。

HTML を使用すればデスクトップでは広告が動作しますが、モバイルでは動作しません。当社のユーザーの大部分はモバイル利用者です。

ご支援いただければ幸いです。よろしくお願いいたします！

[cocococosti (Constanza Abarca)]

こんにちは @Dawn

Responsive Banner Ad 1 に含まれていたコードを確認しましたが、いくつか不足しています。広告の HTML には、デスクトップ用とモバイル用（より小さいサイズ）の 2 つの画像を含める必要があります。

私のサイトからの例をご覧ください：

以下のコードで試してみてください：

<a href="DESTINATION_URL" class="banner-ad" target="_blank">
    <img class="desktop" src="DESKTOP_IMAGE_URL">
    <img class="mobile" src="MOBILE_IMAGE_URL">
</a>

DESTINATION_URL 変数を置き換えることを忘れないでください。DESKTOP_IMAGE_URL と MOBILE_IMAGE_URL については、画像を非公開のトピックにアップロードし、そこから URL を取得することをお勧めします。

その後、テーマコンポーネントを作成し、CSS スタイルを追加してください。これで動作するはずです：

    .banner-ad {
        display: flex;
        clear: both;
        max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
        box-sizing: border-box;
        img {
            height: 100%;
            &.desktop {
                display: block;
            }
            &.mobile {
                display: none;
            }
        }
    }

    @media only screen and (max-width: 672px) {
        .banner-ad {
            img.desktop, p {
                display: none;
            }
            img.mobile {
                display: block;
            }
        }
    }

これらすべてを私のサイトでテストし、期待通りに動作することを確認しました

[clayg (Clay)]

カテゴリごとに異なるハウス広告を表示することは可能でしょうか？当社の Discourse カテゴリはメンバーの職種に対応しており、職種に合った教育イベントの広告を表示したいと考えています。

[Dawn (Dawn Albrecht)]

@clayg 方法があります。CSS に関連していると思いますが、私もまだ研究中です。参考情報はこちらです：

House Ads in the official Ad Plugin

Can you explain your solution with an example? What html/css code did you use?

[Mr.X_Mr.X]

@tshenry

投稿間の「Codefund」風広告

このテンプレートは、「投稿間」のハウス広告として使用できる控えめな広告を作成します。これは、Codefund広告スタイルに強く影響を受けています。

これを上部と下部（提案の前）の位置で使用したいと考えています。現在、HTMLとCSSは投稿間のみに対応しています。他の位置でも機能するように手伝っていただけますか？

[spdegabrielle (Stephen De Gabrielle)]

ハウス広告デモビデオで、非常にシンプルな白いテキストグラデーションの背景をどのように作成しましたか？

グラデーションがあります

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

テーマコンポーネント h-creative を作成し、CSSを追加する必要がありますか？

.h-creative {

    font-variant: small-caps;
    font-weight: bold;
    .container {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 6px 0;
        background: rgb(131,58,180);
        background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    }

    .big {
        font-size: 24px;
        line-height: normal;
        padding: 10px;
        color:lightgrey;
    }
}

<a href="https://con.racket-lang.org/" class="h-creative">
    <div class="container">
        <span class="big">(twelfth  RacketCon) October 28-30, 2022</span>
    </div>
</a>

うまくいきました

修正：私のテキストはsmall-capsで青色ですが、背景が機能していません。指定された色：青も機能していません。

---

コピー元

私のCSSインサイチュ：

[hoangphuctran93 (Hoàng Phúc Trần)]

「ヘッダーの上」のような表示位置の追加について提案があります。

[thaidb]

Android デバイスで設定としてテキストが表示されません。
ラップトップでは問題ありません。
どのように修正できますか？よろしくお願いします。

[thaidb]

ここに私のビデオがあります

[tobiaseigen]

テンプレートを使って広告を設定してみたのですが、とても素晴らしいです！

@Discourse

4. 投稿間の「Codefund」風広告

ただ、この広告のCSSが表示されませんでした。指示には注意深く従ったつもりなのですが。他の3つはすべて期待どおりに動作しています。

[Arkshine]

@Discourse

.house-creative.house-post-bottom {

.house-post-bottom クラスを削除できます。
奇妙なことに、コード（CSS以外）には参照が見当たりません。

[tobiaseigen]

うまくいきました!! ありがとう。OPも更新します。

[Arkshine]

@tobiaseigen 実際には正しかった、私のミスです！
テンプレートは投稿間用です。
コードは house-<placement> クラスを追加し、この場合は house-post-bottom になります。

テンプレートでは、この設定がされている必要があります。

また、関連情報として：

[tobiaseigen]

うーん.. 投稿間とトピック間の両方でその広告を選択しました。そのコードを削除したら、機能しましたか？

以前はそれらの場所に表示されていましたが、適切なCSSがありませんでした。

house ads after nth post を 2 に設定したので、表示されています。

では、house-post-bottom は何をするのですか？

[Arkshine]

.house-post-bottom はデフォルトで以下のCSSを追加します。

assets/stylesheets/adplugin.scss

トピック間では、house-topic-list-between クラスが追加されますが、デフォルトではCSSはありません。

以下のCSSで調整できます。

.house-creative {
  &.house-topic-list-between,
  &.house-post-bottom {
    margin-left: 0 !important;

    a.between-posts-ad {
      color: var(--dynamic-color);

      strong {
        color: var(--primary);
      }

      .ad-container {
        max-width: calc(
          #{$topic-avatar-width} + #{$topic-body-width} +
            (#{$topic-body-width-padding} * 2)
        );
        padding: 10px 5px;
        text-align: center;
        background-color: var(--primary-very-low);
        border: 1px solid var(--primary-low);
        box-sizing: border-box;

        .ad-label {
          margin-right: 2px;
          padding: 2px 5px;
          color: var(--primary-very-low);
          font-weight: bold;
          background-color: #eac34e; // 「広告」ラベルの色を設定
          border-radius: 5px;
        }
      }
    }
  }
}

[kiefferr (Ryan Kieffer)]

こちらはいかがでしょうか。広告をユーザーに紐付け、カスタムユーザーグループ（ゴールド/シルバーなど）や個々のユーザーの状態（つまり、一時停止中かアクティブか）に基づいて表示を制御する方法はありますか？たとえば、会員サイトのパートナーティアごとに異なる広告特典が得られます。「ゴールド」パートナーは3つの広告を3つの表示場所に、「シルバー」は2つと2つなど。

具体的には、WordPressとDiscourseが同期されたサイトでこれを実現する可能性を調べています。DiscourseがクライアントでWordPressがプロバイダーとなります。ユーザーデータ、カスタムグループの配置、アクティブ/一時停止の状態は、カスタムSSOペイロードで既に渡されています。では、追加の広告データも渡してみてはいかがでしょうか。