--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/backgrounds' title: 'セクションに色・写真・グラデーションを敷く | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:21+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- すべてのセクションは色、写真、グラデーションで埋められます。色と写真はStyleパネルから設定します。セクション、ロー、カラム、エレメントのすべてにあります。セクションにはグラデーション、固定・パララックス写真、YouTube動画用のBackground effectsパネルが追加されます。例ではネイビーのセクションに都市の写真、白テキスト、上からのグラデーションを付けます。 動画ではセクションの背後に写真を追加し、グラデーションで覆っています。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:27:21+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: セクションに色・写真・グラデーションを敷く description: |- すべてのセクションは色、写真、グラデーションで埋められます。色と写真はStyleパネルから設定します。セクション、ロー、カラム、エレメントのすべてにあります。セクションにはグラデーション、固定・パララックス写真、YouTube動画用のBackground effectsパネルが追加されます。例ではネイビーのセクションに都市の写真、白テキスト、上からのグラデーションを付けます。 動画ではセクションの背後に写真を追加し、グラデーションで覆っています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:27:21+0000' dateModified: '2026-10-24T11:27:21+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/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- すべてのセクションは色、写真、グラデーションで埋められます。色と写真はStyleパネルから設定します。セクション、ロー、カラム、エレメントのすべてにあります。セクションにはグラデーション、固定・パララックス写真、YouTube動画用のBackground effectsパネルが追加されます。例ではネイビーのセクションに都市の写真、白テキスト、上からのグラデーションを付けます。 動画ではセクションの背後に写真を追加し、グラデーションで覆っています。 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 --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # セクションに色・写真・グラデーションを敷く. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [セクションを端から端まで広げる](/ja/hc/documentation/learn-dxpr-builder/design/full-width-layouts) - [スクロール・ホバー・クリックでエレメントに動きを付ける](/ja/hc/documentation/learn-dxpr-builder/design/animation-tab) - [ヒーローセクションをデザインする](/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section) すべてのセクションは色、写真、グラデーションで埋められます。色と写真は**Style**パネルから設定します。セクション、ロー、カラム、エレメントのすべてにあります。セクションにはグラデーション、固定・パララックス写真、YouTube動画用の**Background effects**パネルが追加されます。例ではネイビーのセクションに都市の写真、白テキスト、上からのグラデーションを付けます。 動画ではセクションの背後に写真を追加し、グラデーションで覆っています。 ## 色と写真を追加する 1. 空のコンテンツエリアで**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションにホバーして**More > Settings**を開きます。 3. 開くのは**Style**パネルです。 4. 選ぶのは**Background**用の濃いネイビーのスウォッチです。 5. 選ぶのは**Font color**用の白です。 6. 対象は**Background image**配下で、**Select Image**をクリックします。メディアライブラリーを検索し、写真にチェックして**Insert selected**をクリックします。 7. 設定するのは**Background style**で、**Cover**にします。 8. 設定するのは**Background position**で、**Center center**にして**Save**をクリックします。 9. セクションの**+**をクリックし、**Content**タブから**Text**を選びます。 10. 見出し(例: `Evening lectures`)とその下に1行を入力します。見出しは**Heading 2**に設定し、エディターツールバーで両行を中央揃えにします。 11. 開くのは**Style**パネルで、**Font color**を白に設定して**Save**をクリックします。 ## グラデーションを追加する 1. セクションにホバーして**More > Settings**を再度開きます。 2. 開くのは**Background effects**パネルで、**Background effect**を**Gradient**に設定します。 3. 選ぶのは**Start color**と**End color**で、**Save**をクリックします。 4. ツールバーの**Save**をクリックし、ビューメニュー(目のアイコン)を開いて**Preview**を選びます。 ## 表示内容 最初の手順の後、写真は白見出しの背後でセクション全体を埋めます。**Cover**は収まらない部分を切り取り、**Center center**は写真の中央を表示し続けます。ネイビーの色は写真の読み込み中か、写真が届かない箇所にのみ表示されます。 グラデーションは上部の開始色から下部の終了色へブレンドします。写真の上に重なります。不透明な色は写真を完全に覆い、透明度のある色は写真を透けさせます。 ## 設定 ### Styleパネル(セクション・ロー・カラム・エレメント共通) | 設定 | 動作 | デフォルト | |---|---|---| | **Background** | カラーピッカーまたはテーマスウォッチからの塗り色 | なし | | **Background image** | メディアライブラリーからの画像。選択は**Select Image** | なし | | **Background style** | **Cover**はエレメントを埋めて切り取ります。**Contain**は全体を表示し、隙間が残る場合があります。**No repeat**は等倍で1回表示します。**Repeat**はタイル状に敷き詰めます | **Theme defaults** | | **Background position** | 切り取り時に表示され続ける部分です。例は**Center center**や**Left top** | **Theme defaults** | AI画像生成を設定している場合、**Background image**はプロンプトも受け付けます。詳しくは[AI画像生成](/hc/documentation/learn-dxpr-builder/ai/image-generation)をご覧ください。 ### Background effectsパネル(セクションのみ) | 背景エフェクト | 動作 | 追加設定 | |---|---|---| | **Simple image**(デフォルト) | 写真はページと一緒にスクロールします | なし | | **Fixed image** | 写真は固定され、ページがその上をスクロールします | なし | | **Parallax image** | 写真はページよりゆっくり動きます。例は[ヒーローセクション](/hc/documentation/learn-dxpr-builder/tutorials/hero-section)をご覧ください | **Parallax speed**、**Parallax mode**(**Fixed**または**Local**)、**Disable on mobile** | | **Gradient** | 2色がセクション全体にブレンドされます。写真があればその上に重なります | **Start color**、**End color**、**Gradient direction**(180度は上から下へ)、**Start position**、**End position** | | **YouTube video** | ミュートされたYouTube動画がセクションを埋めます。繰り返すには**Loop**にチェックします | **YouTube video URL**、**Video options**、**Start time in seconds**、**Stop time in seconds** | 固定・パララックスエフェクトは**Style**パネルで設定した写真を動かします。YouTube動画に写真は不要です。 ## 背景が表示されない場合 - **Background effectsパネルがありません。**セクションにのみあります。セクション(ロー、カラム、エレメントではなく)にホバーして**More > Settings**を開きます。 - **写真が切れています。** **Cover**はセクションに収まらない部分を切り取ります。主題を表示し続けるには**Background position**を変更するか、**Contain**を選びます。 - **グラデーションが写真を隠しています。**グラデーションは上に重なり、不透明な色は写真を覆います。カラーピッカーで**Start color**と**End color**の不透明度を下げます。 - **セクションにグラデーションが表示されません。**グラデーションには両方の色が必要です。**Start color**と**End color**を選びます。 - **YouTube動画が再生されません。** **YouTube video URL**が空か、1つの動画へのリンクではありません。動画の完全なアドレス(例: `https://www.youtube.com/watch?v=`の後にID)を貼り付けます。 ## 次のステップ - [全幅レイアウト](/hc/documentation/learn-dxpr-builder/design/full-width-layouts)：背景とコンテンツを端から端まで広げる。 - [アニメーションタブ](/hc/documentation/learn-dxpr-builder/design/animation-tab)：セクションのスクロール表示に合わせてテキストをフェードインする。 - [ヒーローセクション](/hc/documentation/learn-dxpr-builder/tutorials/hero-section)：パララックス写真のフルページヘッダーを作る。