# カテゴリごとのヒーローバナー（画像＋オーバーレイテキスト）のレイアウトシフトなしでの再作成について

**URL:** https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460
**Category:** Support
**Tags:** category-banners
**Created:** [2025 年 8 月 13 日午後 5:09 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460 "2025-08-13T17:09:44Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Steve\_John](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steve_john/32/435022_2.png) [@Steve\_John](https://meta.discourse.org/u/Steve_John)
#### Post date: [2025 年 8 月 13 日午後 5:09 UTC](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460/1 "2025-08-13T17:09:44Z")

</div>

皆さん、こんにちは。以下のスクリーンショットのようなカテゴリバナーを作成しようとしています。

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/c/c/9ccbd3d4db7f366afa511a11f9e119b85d9cf18c.png)

**目標**

- モックアップと同じレイアウト：カテゴリ固有の背景画像と、その上に重ねられた見出し/説明を持つ大きなバナー。
- スムーズな読み込み（ちらつき/リサイズなし）、完全なレスポンシブ対応。
- 背景は **カテゴリごとに固有の画像** であること（グローバルCSSスタイルではない）。

**試したこと**

- 画像とテキストを挿入するためのカスタムJavaScript。これは機能しますが、画像が最初に読み込まれてからリサイズされるため、ぎこちない遷移/レイアウトシフトが発生します。
- **Category Banner** コンポーネントで近いところまで行きましたが、この正確なレイアウトとカテゴリごとの画像要件を満たすことができませんでした。

**質問**

- Discourseでこれを実現するための推奨アプローチは何ですか？
- スペースを確保し（例：固定アスペクト比のラッパー/object-fit）、CLSを回避するための例やCSS/HTMLパターンはありますか？
- カテゴリごとのアップロードまたはテーマ設定を使用して、背景画像をきれいに設定するためのヒントはありますか？

よろしくお願いします！

---

_[View the full topic](https://meta.discourse.org/t/help-recreating-a-per-category-hero-banner-image-overlay-text-without-layout-shift/378460)._