--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/background' title: 'コンテンツの背後に色や写真を置く | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:21:09+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ページの帯にブランドカラーや写真を敷き、見出しを目立たせて帯を1つのブロックとして見せます。色と写真は、任意のエレメントのStyleパネルで設定します。SectionにはBackground effectsパネルが付き、固定写真、パララックス、グラデーション、YouTube動画を設定できます。 動画では以下の手順どおりに、見出しの背後に写真を置き、その上に濃いグラデーションを重ねて、白い見出しを読みやすくしています。 tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: コンテンツの背後に色や写真を置く description: |- ページの帯にブランドカラーや写真を敷き、見出しを目立たせて帯を1つのブロックとして見せます。色と写真は、任意のエレメントのStyleパネルで設定します。SectionにはBackground effectsパネルが付き、固定写真、パララックス、グラデーション、YouTube動画を設定できます。 動画では以下の手順どおりに、見出しの背後に写真を置き、その上に濃いグラデーションを重ねて、白い見出しを読みやすくしています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:21:09+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/background' articleSection: エレメントのスタイル - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/background' description: |- ページの帯にブランドカラーや写真を敷き、見出しを目立たせて帯を1つのブロックとして見せます。色と写真は、任意のエレメントのStyleパネルで設定します。SectionにはBackground effectsパネルが付き、固定写真、パララックス、グラデーション、YouTube動画を設定できます。 動画では以下の手順どおりに、見出しの背後に写真を置き、その上に濃いグラデーションを重ねて、白い見出しを読みやすくしています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[エレメントのスタイル](/ja/hc/documentation/learn-dxpr-builder/element-settings) # コンテンツの背後に色や写真を置く. DXPR Builderを学ぶページを作るエレメントのスタイル ## このガイドの内容 関連ガイド - [文字サイズと色の変更](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography) ページの帯にブランドカラーや写真を敷き、見出しを目立たせて帯を1つのブロックとして見せます。色と写真は、任意のエレメントの**Style**パネルで設定します。Sectionには**Background effects**パネルが付き、固定写真、パララックス、グラデーション、YouTube動画を設定できます。 動画では以下の手順どおりに、見出しの背後に写真を置き、その上に濃いグラデーションを重ねて、白い見出しを読みやすくしています。 ## 始める前に - ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。 - **Save**（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにある**Save**でページを保存し、「Saved field」と表示されます。 - **Section**をページの帯全体に使います。**Background effects**があるのはSectionのみです。 - **TextやCardエレメント**をカラム内の数行の背後にある色付きボックスに使います。 - **テーマ**をページ本文やフッターなど全ページ共通の背景に使います。 - **写真の中に文字を入れません。** 背景画像にaltテキストはなく、スクリーンリーダーが飛ばします。メッセージは上の見出しに入れます。 ## 手順：写真の上の読みやすい見出し ごちゃごちゃした写真の上の白いテキストは読みにくくなります。写真の上に濃いグラデーションを重ねれば解決し、写真を差し替えても有効です。Textエレメントの見出しを持つSectionが必要です。 1. ページ上で**Section**にカーソルを合わせ、**More**、**Settings**の順にクリックします。 2. 次に**Style**パネルを開き、**Background image**にある**Select Image**をクリックします。写真を選びます。サムネイルと画像サイズ一覧が表示されます。 3. 画像サイズ一覧で、デザイン対象の最も広い画面以上の幅を選びます。または**Original image (No resizing)**を選びます。帯全体には**Optimize for fast loading**を避けます。 4. 設定は**Background style**を**Cover**に、**Background position**を**Center center**にします。 5. 次に**Background effects**パネルを開き、**Background effect**を**Gradient**にします。写真はそのままで、グラデーションが上に重なります。 6. 色フィールドは**Start color**に`rgba(0, 0, 0, 0.6)`（60%の黒）と入力します。`rgba(0, 0, 0, 0.3)`を**End color**に入力します。**Gradient direction**は180のままにし、ベールが上から下に掛かるようにします。 7. ダイアログの**Save**をクリックします。セクションに濃いベール下の写真が表示されます。 8. ページ上で**Text**エレメントにカーソルを合わせ、**More**、**Settings**の順にクリックします。**Style**パネルで**Font color**を白色にして**Save**をクリックします。 9. ツールバーの**Save**をクリックします。 写真の最も明るい部分と見出しを突き合わせます。コントラストは4.5対1以上、大きな見出しは3対1以上を目安にします。目標値の説明は[タイポグラフィ](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography)のページをご覧ください。まだ読みにくい場合は、両方の値を上げます（例：0.8と0.5）。 ## 表示内容 セクションには濃いベール下の写真が表示され、上部が最も濃く、白い見出しが上に載ります。**Cover**ではセクション全体が埋まるため、狭い画面では写真の左右がより多く切り取られます。 ## 設定の仕組み | コントロール | 内容 | |---|---| | **Background** | コンテンツの背後の色。ピッカーの不透明度スライダーで半透明にできます。 | | **Background image** | コンテンツの背後の画像。**Select Image**、URL、**AI Image Generation**から指定します（サイトで無効化されている場合を除く）。 | | **Background style** | 画像のエレメントへの収め方。次の表をご覧ください。 | | **Background position** | 画像を固定する基準点。**Cover**では、写真のどの部分が見えるままになるかが決まります。 | | **Background style** | 結果 | |---|---| | **Theme defaults** | テーマに指定がない限り、画像は左上隅から元のサイズで繰り返します。 | | **Cover** | 画像がエレメントを埋め、はみ出す端は切り取られます。写真に最適です。 | | **Contain** | 画像全体が1回表示されます。両側に空きが生じる場合があります。ロゴに最適です。 | | **No repeat** | 元のサイズで1枚だけ表示します。 | | **Repeat** | 画像がエレメント全体にタイル状に並びます。パターンに適しています。 | 色は画像の下にあります。画像の透明部分、**Contain**画像まわりの帯、写真読み込み中に見えます。写真の主な色調に近い色を選びます。 サイズ**Optimize for fast loading**では、画像が最大幅1024 pxに縮小されWebPで保存されます。ボックスには適しますが、大画面の帯全体ではぼやけて見えます。 同じ画像はスマートフォンを含むすべての画面サイズで読み込まれます。**Hover style**パネルには独自の**Background**と**Background image**があるため、ホバーでボックスの色を変えたり画像を差し替えたりできます。 ## セクションの背景効果 これらの効果にはSectionが必要です。**Fixed image**と**Parallax image**は**Background image**の写真を動かすため、先に写真を設定します。 | **Background effect** | 訪問者の見た目 | 設定 | |---|---|---| | **Simple image** | 写真がページと一緒にスクロールします。初期値です。 | なし | | **Fixed image** | コンテンツがスクロールしても写真は静止します。 | なし | | **Parallax image** | 写真がコンテンツよりゆっくりスクロールします。 | **Parallax speed**（0から100。**Parallax image**選択時に0なら20になります）、**Parallax mode**（**Fixed**または**Local**）、**Disable on mobile**（幅481 px未満の画面） | | **Gradient** | 2色のブレンド。単独または写真の上に重ねます。 | **Start color**、**End color**、**Gradient direction**（1から360度。180は上から下）、**Start position**、**End position** | | **YouTube video** | セクションが画面内にある間、無音動画が再生されます。スクロールで外れると一時停止します。 | **YouTube video URL**、**Start time in seconds**、**Stop time in seconds**、**Video options** | 写真の上では、グラデーションは常に端から端まで掛かります。**Start position**と**End position**は、写真なしのグラデーションにのみ適用されます。 ## 背景が表示されない場合 - **写真が細い帯で表示される。** 背景は高さを足しません。セクションの高さはコンテンツとパディング分です。コンテンツを追加するか、**General**パネルで**100% height**をオンにします。パディングの追加は[背の高いセクションの作り方](/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing#recipe-a-taller-section)をご覧ください。 - **写真が繰り返すか隅だけ表示される。** **Background style**が**Theme defaults**です。**Cover**を選びます。 - **広い画面で写真がぼやける。** **Optimize for fast loading**では最大幅1024 pxになります。画像サイズ一覧でより広いサイズを選びます。 - **写真が真っ黒の背後に隠れる。** グラデーション色に透明度がありません。各値の末尾に1未満の数値を付けます（例：`rgba(0, 0, 0, 0.6)`）。 - **見出しが濃いままになっている。** Textエレメントの**HTML classes**にある色クラスか、`!important`付きのテーマルールが優先されています。チップを外すか、[タイポグラフィ](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography)をご覧ください。 - **ページの再読み込み後に背景が消える。** **Save**はダイアログではエディター内にのみ保持されます。ツールバーの**Save**をクリックします。 - **色が出ない。** 写真が覆っています。写真の上に色味を重ねるには、**Background effects**の**Gradient**を使います。 - **Start positionとEnd positionを変えても変わらない。** セクションに**Background image**があるため、グラデーションは端から端まで掛かります。代わりに**Gradient direction**と透明色を使います。 - **クラスの色が優先される。** **HTML classes**にある**Primary background**のようなクラスが**Background**に勝ちます。そのチップを外します。 - **Circle counter、Progress bar、DividerではBackgroundが効かない。** これらのエレメントは独自の色を使います。**General**パネルの**Background color**、**Back color**、**Color**を設定します。 ## 次のステップ - [タイポグラフィ](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography)：写真上の見出し色を設定し、コントラストを確認します。