---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
title: 'Styleパネルでのエレメントの見た目の変更 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:19:30+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  1ページ内の1つのエレメントに独自の見た目が必要なときにStyleパネルを使います。色付きのカード、薄くしたロゴ、キャンペーンカラーのボタンなどです。変更はその場でページに反映されます。全ページ共通の見た目（すべてのボタンの色など）には、代わりにテーマを変えます。そこの1度の編集でサイト全体が更新されます。
  動画では最初の手順どおりに、パートナーロゴをポインターが届くまで薄くしています。
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-24T14:19:30+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: Styleパネルでのエレメントの見た目の変更
      description: |-
        1ページ内の1つのエレメントに独自の見た目が必要なときにStyleパネルを使います。色付きのカード、薄くしたロゴ、キャンペーンカラーのボタンなどです。変更はその場でページに反映されます。全ページ共通の見た目（すべてのボタンの色など）には、代わりにテーマを変えます。そこの1度の編集でサイト全体が更新されます。
        動画では最初の手順どおりに、パートナーロゴをポインターが届くまで薄くしています。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:19:30+0000'
      dateModified: '2026-10-24T14:19:30+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/style-tab'
      articleSection: エレメントのスタイル
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab'
      description: |-
        1ページ内の1つのエレメントに独自の見た目が必要なときにStyleパネルを使います。色付きのカード、薄くしたロゴ、キャンペーンカラーのボタンなどです。変更はその場でページに反映されます。全ページ共通の見た目（すべてのボタンの色など）には、代わりにテーマを変えます。そこの1度の編集でサイト全体が更新されます。
        動画では最初の手順どおりに、パートナーロゴをポインターが届くまで薄くしています。
      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) # Styleパネルでのエレメントの見た目の変更.

 DXPR Builderを学ぶページを作るエレメントのスタイル

   ## このガイドの内容

 関連ガイド

- [コンテンツの背後に色や写真を置く](/ja/hc/documentation/learn-dxpr-builder/element-settings/background)

1ページ内の1つのエレメントに独自の見た目が必要なときに**Style**パネルを使います。色付きのカード、薄くしたロゴ、キャンペーンカラーのボタンなどです。変更はその場でページに反映されます。全ページ共通の見た目（すべてのボタンの色など）には、代わりにテーマを変えます。そこの1度の編集でサイト全体が更新されます。

動画では最初の手順どおりに、パートナーロゴをポインターが届くまで薄くしています。

  ## 始める前に

- ページをDXPR Builderで開きます。エレメントにポイントすると**More**付きのコントロールバーが表示されます。ビルダーが初めての場合は[最初のページ](/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。
- **Save**（ダイアログ）では、変更はエディター内に保持されます。コンテンツ上部のビルダーツールバーにある**Save**でページを保存し、「Saved field」と表示されます。

設定は**Style**パネルで行い、1つのエレメントのものです。そのページのコンテンツに保存され、テーマには保存されません。来年にブランドカラーが変われば、手で色付けした各エレメントは編集するまで古い色のままです。

- **見た目を使い回す**には、スタイル付きのエレメントを**More** > **Save as template**でテンプレートとして保存するか、**HTML classes**で共有クラスを付けます。[ユーザーテンプレート](/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)と[HTML IDとクラス](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)をご覧ください。
- **スウォッチから色を選びます**。サイトにある場合はテーマのカラーパレット由来です。スウォッチは色をコピーするため、後のパレット変更は反映されません。

## 手順：ポインターが届くまでロゴを薄くする

パートナーロゴの列は、ロゴを薄くすると落ち着いて見えます。この手順では1つのロゴを薄くし、ホバーで戻します。

1. ロゴを表示する**Image**エレメントにカーソルを合わせ、**More**、**Settings**の順にクリックします。
2. 次に**Style**パネルを開き、**Opacity**を0.5にドラッグします。ドラッグに合わせてロゴが薄くなります。
3. 下の**Hover style**パネルを開き、**Opacity**を1にドラッグします。
4. ダイアログの**Save**、次にツールバーの**Save**をクリックします。
5. ビルダーツールバーの表示メニュー（目アイコン）を開いて**Preview**を選び、ロゴにポイントします。元の濃さに戻り、ポインターが離れると再び薄くなります。

列の各ロゴに手順を繰り返します。

## 手順：キャンペーンカラーのボタン

テーマはボタンにホバー色を持ちます。自分で設定した**Background**はそのホバー色も置き換えるため、両方設定します。

1. ページ上で**Button**エレメントにカーソルを合わせ、**More**、**Settings**の順にクリックします。
2. 次に**Style**パネルで**Background**と**Font color**を選びます。スウォッチをクリックするか、色フィールドに#e4002bのようなカラーコードを入力します。
3. ホバー時は**Hover style**パネルで濃いめの**Background**を選びます。
4. ダイアログの**Save**、次にツールバーの**Save**をクリックします。
5. 表示メニューで**Preview**を選び、ボタンにポイントします。濃い色に変わります。

## 表示内容

ダイアログを開いている間、エレメントに各変更が表示されます。**Preview**では、薄くしたロゴがポインターの下で元の濃さに戻り、キャンペーンボタンは濃い色に変わります。両方の見た目はページの再読み込み後も残ります。ツールバーの**Save**で保存したためです。

## 各コントロールの範囲

| コントロール | 範囲 | 単位 |
|---|---|---|
| **Font color**、**Border color**、**Background** | 透明度付きの任意の色 | 色 |
| **Background image** | メディアライブラリーの画像、またはURL |  |
| **Background style**、**Background position**、**Border style** | 一覧：**Theme defaults** |  |
| **Font size** | 0から100 | px |
| **Border radius** | 0から100 | px |
| **Opacity** | 0から1（0.01刻み） |  |
| **Drop shadow** | レベル0から5 |  |
| ボックスモデルの**Margin** | -200から200 | **PX**または**%** |
| ボックスモデルの**Padding** | 0から200 | **PX**または**%** |
| ボックスモデルの**Border** | 0から50 | px |
| ボックスモデルの幅×高さ | 0から2000 | **PX**または**%** |

範囲外の入力値は最も近い上限値に切り詰められます。ボックスモデルとロックの説明は[間隔](/hc/documentation/learn-dxpr-builder/element-settings/spacing)のページをご覧ください。

## 設定の振る舞い

### テーマの初期値

空の色、0のスライダー、**Theme defaults**の一覧、「-」表示のボックスモデル辺はすべて同じ意味です。DXPR Builderは何も書き込まず、テーマが決めます。そのため**Opacity**の0ではエレメントは隠れず、**Font size**の0ではテーマのサイズのままです。テーマの見た目に戻すには、カラーピッカーの**Clear**をクリックするか、スライダーを0に戻すか、もう一度**Theme defaults**を選びます。

### 設定の保存先

各**Style**設定は**Drop shadow**を除き、エレメントのインラインスタイルとして保存されます。インラインスタイルは通常のテーマCSSより優先されます。さらに勝つものが2つあります。`!important`付きのテーマルールと、**HTML classes**のBootstrapユーティリティクラス（こちらも`!important`付き）です。

一部のエレメントでは設定が内側に付きます。**Button**ではボタン自体、**Image**では画像、**Link**ではリンク、**Map**では地図枠です。

### すべての画面サイズ

スタイル設定にブレークポイントはありません。64 pxのパディングはスマートフォンでも64 pxです。パーセント値はページ幅に連動します。画面サイズ別の値には、[HTML IDとクラス](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)のページにあるレスポンシブクラスを使います。

### Opacityは中のすべてを薄くする

**Opacity**はエレメント全体に作用します。ボックス、境界線、テキスト、中のすべてのエレメントを薄くします。濃いテキストの背後にある半透明ボックスには、**Opacity**を0のままにします。代わりに透明度付きの**Background**色を選びます。カラーピッカーにはそのための不透明度スライダーがあります。

### Hover style

**Hover style**は**Style**の下にある別のパネルです。独自のボックスモデルを含め、同じコントロールを持ちます。その値はポインターがエレメント上にある間に適用されます。**Style**値とは異なり、それ自体が`!important`付きのため、自分の**Style**値、**HTML classes**のユーティリティクラス、ほとんどのテーマルールに勝ちます。

フェードインするのは**Drop shadow**のみで、0.15秒です。他のホバー変更はすぐに切り替わります。テーマがアニメーションする場合を除きます。Bootstrapボタンは0.15秒で色がフェードします。

スマートフォンとタブレットにポインターはありません。訪問者にはタップ後にのみホバー時の見た目が見えるため、必要な情報をそこに入れません。

### 独自設定を持つエレメント

同じ用途の独自設定を持つエレメントがあります。独自設定が優先され、**Style**コントロールは効きません。

| エレメント | Styleで無視される項目 | 代わりに使う項目 |
|---|---|---|
| Circle counter | **Background**、**Font size**、幅×高さ | **General**の**Background color**と**Dimension**、**Circle content**の**Font size** |
| Progress bar | **Background**、幅×高さ | **General**の**Back color**、**Front color**、**Bar height** |
| Divider | **Background**、幅 | **General**の**Color**と**Length** |
| Number counter | **Font size** | **General**の**Font size** |
| Image | 幅×高さ | **General**の**Image width**と**Image height** |
| Map | 幅×高さ | **General**の**Map width**と**Map height** |
| Marquee | 幅×高さ | **General**の**Image width**と**Height** |
| Video、Local video | 幅 | **General**の**Video width** |
| Positioned layers | 幅×高さ | **General**の**Width**と**Height** |

## 変更が表示されない場合

- **ダイアログを閉じると変更が消えた。** **Cancel**、閉じるアイコン、Escapeキーで閉じたため、古い設定に戻っています。変更をやり直し、ダイアログの**Save**をクリックします。
- **ページの再読み込み後に変更が消えた。** **Save**はダイアログではエディター内にのみ保持されます。ページを離れる前にツールバーの**Save**をクリックします。
- **テーマの見た目のままになっている。** **HTML classes**のBootstrapユーティリティクラスか、`!important`付きのテーマルールが優先されています。**General**パネルを開き、クラスチップ（例：**Primary background**）を外すか、テーマルールについてWeb担当者に確認します。
- **コントロールがまったく効かない。** 同じ用途の独自設定を持つエレメントがあります。[独自設定を持つエレメント](#elements-with-their-own-settings)をご覧ください。
- **ボタンのホバー色が変わらなくなった。** 自分の**Background**がテーマのホバー色を置き換えています。**Hover style**パネルでも**Background**を設定します。
- **ボックスと一緒にテキストが薄くなった。** **Opacity**はエレメント全体を薄くします。0に戻し、透明度付きの**Background**色を使います。
- **Opacity 0でエレメントが隠れない。** 0は**Theme defaults**の意味です。代わりに**HTML classes**で**Hide element (d-none)**クラスを追加します。

## 次のステップ

- [背景](/hc/documentation/learn-dxpr-builder/element-settings/background)：見出しの背後に写真を置き、見出しを読みやすく保ちます。