--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/button-styles' title: 'アクションを促すボタンをスタイルする | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:29+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 各ボタンの目立ち具合を決めます。ソリッドボタンは最も望む1つのアクションを示し、隣のアウトラインボタンは競合せずに代替案を提供します。このページではそのペアのスタイル方法と各設定の変更内容を説明します。ボタンの追加とリンク設定はボタンの追加をご覧ください。 動画では下記の手順に従います。Apply nowをメインボタンにし、アウトラインの2つ目のボタンを追加しています。 tags: - 'Design guides' 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つのアクションを示し、隣のアウトラインボタンは競合せずに代替案を提供します。このページではそのペアのスタイル方法と各設定の変更内容を説明します。ボタンの追加とリンク設定はボタンの追加をご覧ください。 動画では下記の手順に従います。Apply nowをメインボタンにし、アウトラインの2つ目のボタンを追加しています。 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:29+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/design/button-styles' articleSection: デザインガイド - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/button-styles' description: |- 各ボタンの目立ち具合を決めます。ソリッドボタンは最も望む1つのアクションを示し、隣のアウトラインボタンは競合せずに代替案を提供します。このページではそのペアのスタイル方法と各設定の変更内容を説明します。ボタンの追加とリンク設定はボタンの追加をご覧ください。 動画では下記の手順に従います。Apply nowをメインボタンにし、アウトラインの2つ目のボタンを追加しています。 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) /[デザインガイド](/ja/hc/documentation/learn-dxpr-builder/design/overview) # アクションを促すボタンをスタイルする. DXPR Builderを学ぶページを作るエレメントのスタイルデザインガイド ## このガイドの内容 関連ガイド - [Buttonエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/button) - [ホバーでエレメントを反応させる](/ja/hc/documentation/learn-dxpr-builder/design/hover-effects) - [ブランドカラーを使う](/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding) 各ボタンの目立ち具合を決めます。ソリッドボタンは最も望む1つのアクションを示し、隣のアウトラインボタンは競合せずに代替案を提供します。このページではそのペアのスタイル方法と各設定の変更内容を説明します。ボタンの追加とリンク設定は[ボタンの追加](/ja/hc/documentation/learn-dxpr-builder/elements/button)をご覧ください。 動画では下記の手順に従います。Apply nowをメインボタンにし、アウトラインの2つ目のボタンを追加しています。 ## メインと2つ目のボタンをスタイルする ページ上のボタン(例: **Apply now**)から始めます。 1. ボタンにホバーして**More > Settings**を開きます。 2. 設定するのは**Type**で、**Primary**にします。 3. 設定するのは**Size**で、**Large**にして**Save**をクリックします。 4. ボタンに再度ホバーして**More > Clone**を開きます。コピーは元のすぐ下に表示されます。 5. コピーの**More > Settings**を開きます。**Title**を変更します(例: `Download brochure`)。あわせて**Link**も変更します。 6. オンにするのは**Outline style**で、**Save**をクリックします。 7. ツールバーの**Save**をクリックします。 ## アクションごとにスタイルを選ぶ | アクション | スタイル | 例 | |---|---|---| | 最も望む1つのアクション | ソリッドの**Primary** | Apply now | | 代替案 | **Outline style**、同じ**Type** | Download brochure | | 軽微なアクション | **Link**。テキストリンクのような見た目 | Read the terms | | 警告または最終手順 | **Danger**または**Warning** | Cancel my booking | 1セクションにソリッドボタンは1つにし、訪問者がクリック場所を一目でわかるようにします。ラベルは結果を表す文言にします。"Get started"のように。"Click here"は避けます。"Send message"のように。"Submit"は避けます。 ## 表示内容 カラムには2つの大きなボタンが積み重なります。テーマのプライマリー色のソリッドボタンと、同色の枠線・テキストのアウトライン付きです。ソリッドボタンが先に目を引きます。編集中はリンクが開きません。テストするにはページを保存し、ビューメニュー(目のアイコン)を開いて**Preview**を選びます。 ## 設定 | 設定 | 動作 | デフォルト | |---|---|---| | **Type** | 色のスタイル。**Primary**、**Secondary**、**Success**、**Info**、**Warning**、**Danger**、**Link**、**Light**、**Dark**。色はテーマから取得します | **Primary** | | **Outline style** | 色付きの枠線とテキスト(塗りなし) | オフ | | **Size** | **Normal**、**Large**、**Small** | **Normal** | | **Block button** | カラムの全幅にボタンを広げます | オフ | | **Link target** | **Same window**または**New window**。**Link**に値がある場合にのみ表示されます | **Same window** | テーマ作成者向け：各**Type**はBootstrapクラス`btn-`(例: `btn-primary`)を追加します。**Outline style**オン時は`btn-outline-`になります。ただし**Link**は常に`btn-link`のままです。**Large**は`btn-lg`、**Small**は`btn-sm`、**Block button**は`btn-block`を追加します。 ## スタイルが表示されない場合 - **アウトライン付きボタンに枠線がありません。** **Type**が**Link**で、常にテキストリンクのように見えるため、**Outline style**は効果がありません。アウトライン付きボタンには別の**Type**を選びます。 - **ボタンがほとんど消えています。** **Light**は白に近いため、白いセクションに溶け込みます。より濃い**Type**を選ぶか、セクションに背景色を付けます。 - **リンクが同じタブで開きます。** **Link target**が**Same window**で、**Link**に値がある場合にのみ表示されます。先に**Link**を入力し、次に**New window**を選びます。 ## 次のステップ - [ボタンの追加](/ja/hc/documentation/learn-dxpr-builder/elements/button)：すべてのボタン設定を動画付きで説明。 - [ホバーエフェクト](/ja/hc/documentation/learn-dxpr-builder/design/hover-effects)：ポインターが届いたらボタンを濃くしたり影を付けたりする。 - [色とブランディング](/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding)：ボタンの色をブランドに合わせる。