---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/studio-workflow'
title: 'セクションのデザイン、保存、使い回し | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:20:05+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  1つのセクションを丁寧に作り、必要な全ページで使い回します。オープンキャンパスのコールアウトに、間隔、大きめのフォント、ブランドカラー、角丸でスタイルを付けます。次にページを保存し、セクションをテンプレートとして保持して再度挿入します。各スタイル手順には、詳細用の個別ガイドがあります。
  動画ではコールアウトにスタイルを付け、テンプレートとして保存して2度目に挿入しています。
tags:
  - 'Build your first page'
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つのセクションを丁寧に作り、必要な全ページで使い回します。オープンキャンパスのコールアウトに、間隔、大きめのフォント、ブランドカラー、角丸でスタイルを付けます。次にページを保存し、セクションをテンプレートとして保持して再度挿入します。各スタイル手順には、詳細用の個別ガイドがあります。
        動画ではコールアウトにスタイルを付け、テンプレートとして保存して2度目に挿入しています。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:20:05+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/getting-started/studio-workflow'
      articleSection: 最初のページを作る
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/getting-started/studio-workflow'
      description: |-
        1つのセクションを丁寧に作り、必要な全ページで使い回します。オープンキャンパスのコールアウトに、間隔、大きめのフォント、ブランドカラー、角丸でスタイルを付けます。次にページを保存し、セクションをテンプレートとして保持して再度挿入します。各スタイル手順には、詳細用の個別ガイドがあります。
        動画ではコールアウトにスタイルを付け、テンプレートとして保存して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/start-here) /[最初のページを作る](/ja/hc/documentation/learn-dxpr-builder/start-here/first-steps) # セクションのデザイン、保存、使い回し.

 DXPR Builderを学ぶここから始める最初のページを作る

   ## このガイドの内容

 関連ガイド

- [セクションを保存して再利用する](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)

1つのセクションを丁寧に作り、必要な全ページで使い回します。オープンキャンパスのコールアウトに、間隔、大きめのフォント、ブランドカラー、角丸でスタイルを付けます。次にページを保存し、セクションをテンプレートとして保持して再度挿入します。各スタイル手順には、詳細用の個別ガイドがあります。

動画ではコールアウトにスタイルを付け、テンプレートとして保存して2度目に挿入しています。

  ## 始める前に

- DXPR Builderでページを編集でき、作業用のセクションがあります。[最初のページを作る](/ja/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。

## 設定手順

1. セクション内の**+**をクリックし、エレメントピッカーの**Content**タブを開いて**Text**を選びます。設定ダイアログが開きます。
2. 告知文を入力し、最初の行を**Heading 2**にします。
3. 同じダイアログの**Style**パネルを開き、ボックスモデルの**Padding**の上下を40ピクセルにします。
4. サイズ指定は**Font size**を20にします。
5. 白色の**Font color**と紺色の**Background**を選びます。
6. 設定は**Border radius**を12にして**Save**をクリックします。
7. DXPR Builderツールバーの**Save**をクリックします。
8. コールアウトにポイントし、セクション全体の最も外側のコントロールバーにある**More**をクリックします。次に**Save as template**を選び、**Template name**を入力して**Global template**にチェックを付け、**Save**をクリックします。
9. DXPR Builderツールバーの**+**をクリックし、**Saved templates**タブを開いて自分のテンプレートをクリックします。
10. DXPR Builderツールバーの**Save**をクリックします。

## 表示内容

コールアウトは、白色の大きめテキスト、上下の余白、角丸を持つ紺色ブロックです。手順9の後は2つ目のコピーがページにあります。コピーは独立しています。テキストを変えても最初のコールアウトはそのままです。テンプレートは全ページの**Saved templates**タブで待機します。**Global template**にチェックがあると、他の編集者にも見えます。

各スタイル手順の個別ガイド：

- [間隔](/ja/hc/documentation/learn-dxpr-builder/element-settings/spacing)：ボックスモデルのパディングとマージンを確認できます。
- [タイポグラフィ](/ja/hc/documentation/learn-dxpr-builder/element-settings/typography)：フォントサイズとフォント色を確認できます。
- [色とブランディング](/ja/hc/documentation/learn-dxpr-builder/design/colour-and-branding)：ブランドに合う色を確認できます。
- [境界線とシャドウ](/ja/hc/documentation/learn-dxpr-builder/element-settings/borders-shadows)：境界線の角丸、スタイル、ドロップシャドウを確認できます。
- [背景](/ja/hc/documentation/learn-dxpr-builder/element-settings/background)：エレメント背後の色、画像、効果を確認できます。
- [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)と[レスポンシブデザイン](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)：レイアウトと画面サイズを確認できます。
- [ユーザーテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)と[保存したテンプレートタブ](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/saved-templates-tab)：セクションの保存と使い回しを確認できます。

## テンプレートが表示されない場合

- **Saved templatesタブにテンプレートがない。** 保存が終わっていないか、別のサイトにいます。セクションの**More**メニューからもう一度保存し、**Search**でテンプレート名を確認します。
- **Moreメニューでセクションではなくページ全体を保存した。** DXPR Builderツールバーの**More**を使っています。セクション自身のコントロールバー（最も外側）の**More**を使います。
- **テキストが大きくも白くもならない。** 他のエレメントの設定を変えています。Textエレメント自体の**Settings**を開き、**Style**パネルの**Font size**と**Font color**を確認します。

## 次のステップ

- [ユーザーテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)：テンプレートの管理、共有、削除を行います。
- [デザインガイド](/hc/documentation/learn-dxpr-builder/design/overview)：色、ボタン、カード、全幅レイアウトを確認できます。