# Horizonテーマ

**URL:** <https://meta.discourse.org/t/horizon-theme/360486>\
**Category:** Theme\
**Tags:** official, horizon-theme\
**Created:** [2025 年 4 月 7 日午後 5:53 UTC](https://meta.discourse.org/t/horizon-theme/360486 "2025-04-07T17:53:06Z")\
**Posts on this page:** 1\
**Showing post:** 55

<div class="post-metadata">

**Author:** ![serkhelesheyi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/serkhelesheyi/32/497726_2.png) [@serkhelesheyi](https://meta.discourse.org/u/serkhelesheyi)\
**Post date:** [2026 年 1 月 30 日午後 12:30 UTC](https://meta.discourse.org/t/horizon-theme/360486/55 "2026-01-30T12:30:52Z")

</div>

**モバイル広告コンテナがオーバーフローする問題（ハウス広告 – RTL/LTR レイアウトの不一致）**

こんにちは

**Horizon テーマ** と公式の **ハウス広告プラグイン** を使用しており、Discourse のデザインシステムと互換性のある CSS 変数とレイアウトルールを使用して広告をスタイリングするためのカスタムコンポーネントを作成しました。

### 📱 問題: モバイルでビューポートからはみ出す広告コンテナ（LTR および RTL の両方）

- **テーマ** : Horizon（デフォルトや Material などの他のテーマでは再現されません）
- **プラグイン** : House Ads + カスタムコンポーネント
- **デバイス** : モバイル
- **動作** :
  - **サイト言語 = 英語 (LTR)** の場合 → `.ad-container` の左端が切り取られる（左にはみ出す）。
  - **サイト言語 = ペルシア語/アラビア語 (RTL)** の場合 → 右端が切り取られる（右にはみ出す）。

- **期待される動作** : 広告カードはビューポート内に完全に収まり、投稿コンテンツの幅に対して中央揃えまたは揃えられていること。

### 私の CSS コード:

> **Summary**
>
> ```plaintext
> :root {
> /* Core colors */
> --ad-bg: var(--secondary);
> --ad-border: var(--highlight);
> --ad-text: var(--primary);
> 
> /* Label */
> --ad-label-bg: var(--highlight);
> --ad-label-text: var(--danger);
> }
> 
> .house-creative {
> margin-left: 0 !important;
> }
> 
> .house-creative a.between-posts-ad {
> display: block;
> text-decoration: none;
> color: inherit;
> background-color: transparent;
> font-family: inherit;
> }
> 
> /* ===============================
> Card Container
> =============================== */
> 
> .house-creative .ad-container {
> direction: rtl !important;
> text-align: center !important;
> margin-bottom: 20px;
> padding: 10px 5px;
> max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
> border: 2px solid var(--ad-border);
> border-radius: 10px;
> 
> box-sizing: border-box;
> line-height: 1.7;
> 
> color: var(--ad-text);
> 
> transition:
> background-color 0.3s ease,
> border-color 0.3s ease,
> box-shadow 0.3s ease,
> transform 0.2s ease;
> }
> 
> .house-creative a.between-posts-ad:hover .ad-container {
> transform: translateY(-1px);
> box-shadow: 0 4px 12px rgba(0,0,0,0.1);
> }
> 
> .house-creative .ad-label {
> display: inline-block;       
> text-align: center;   
> margin-bottom: 6px;
> padding: 4px 12px;
> 
> font-size: 0.85em;
> font-weight: 700;
> text-transform: uppercase;
> 
> background-color: var(--ad-label-bg);
> color: var(--ad-label-text);
> 
> border-radius: 999px;
> }
> 
> .house-creative .ad-container .ad-text {
> margin: 0;
> 
> font-size: 1rem;
> line-height: 1.9;
> color: var(--ad-text);
> 
> direction: rtl ;
> text-align: center !important ;
> unicode-bidi: isolate;
> }
> 
> @media (max-width: 480px) {
> .house-creative .ad-container {
> direction: rtl !important;
> text-align: center !important; 
> padding: 16px 12px; 
> width: 100%;
> max-width: 100%;
> 
> }
> }
> 
> ```

 ![00004](https://global.discourse-cdn.com/meta/original/4X/6/f/e/6fedb55c974a4b49947480136f8f52f480b10174.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/horizon-theme/360486)._