---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/event-page'
title: 'イベントページを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:45+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは1イベントのページを作ります。日付と今すぐ申込むボタン付き写真
  ヒーロー、地図横の詳細、登壇者カード、申込帯です。オープンキャンパス、講演、
  ウェビナーに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを
  ご覧ください。
  動画では大学オープンキャンパスのページを作ります。
tags:
  - 'Follow a tutorial'
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イベントのページを作ります。日付と今すぐ申込むボタン付き写真
        ヒーロー、地図横の詳細、登壇者カード、申込帯です。オープンキャンパス、講演、
        ウェビナーに使います。1スクロールページのサイト全体には代わりにシングルページサイトを作るを
        ご覧ください。
        動画では大学オープンキャンパスのページを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:52:45+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/tutorials/event-page'
      articleSection: チュートリアル
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/event-page'
      description: |-
        ここでは1イベントのページを作ります。日付と今すぐ申込むボタン付き写真
        ヒーロー、地図横の詳細、登壇者カード、申込帯です。オープンキャンパス、講演、
        ウェビナーに使います。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/tutorials/overview) # イベントページを作る.

 DXPR Builderを学ぶページを作るチュートリアル

   ## このガイドの内容

 関連ガイド

- [Mapエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/map)
- [Cardエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/card)
- [ヒーローセクションをデザインする](/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section)

ここでは1イベントのページを作ります。日付と**今すぐ申込む**ボタン付き写真 ヒーロー、地図横の詳細、登壇者カード、申込帯です。オープンキャンパス、講演、 ウェビナーに使います。1スクロールページのサイト全体には代わりに[シングルページサイトを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/one-page-website)を ご覧ください。

動画では大学オープンキャンパスのページを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーにヒーロー用の幅広写真があります。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- 新規エレメントはセクション・カラムの上に載ります。セクションのエレメントは逆順に追加するか、後からドラッグで整えます。

## 手順1: ヒーローを追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。ホバーして**More** > **Settings**を開きます。
2. 選ぶのは**HTML classes**下の**Align text center**です。
3. 開くのは**Style**パネルで、**Background image**下で**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**Background style**を**Cover**にします。
4. 暗紺色**Background**と白**Font color**を選び、**Save**をクリックします。
5. セクションの**+**をクリックして**Button**を選びます。**Title**に「今すぐ申込む」、**Link**に申込ページ、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
6. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。イベント名を**Heading 2**で入力し、日付とキャッチコピーを続けます。**Style**パネルで**Font color**を白にして**Save**をクリックします。テーマはページタイトルをページのHeading 1として出します。この見出しを代わりにHeading 1にするには[SEOに強いページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)をご覧ください。

## 手順2: 詳細と地図を追加する

1. ヒーローにホバーして**Add Section Below**をクリックします。新セクションの**+**をクリックして**Row**を選びます。2つの均等カラムが必要な分割です。
2. 左カラムの**+**をクリックして**Text**を選びます。「イベント詳細」を**Heading 2**で入力し、日付、会場、連絡先を1行ずつ加えて**Save**をクリックします。
3. 右カラムの**+**をクリックして**Map**を選びます。会場の**Address**を入力し、**Map height**を320にして**Save**をクリックします。

## 手順3: 登壇者を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 各カラムの**+**をクリックして**Card**を選びます。**More** > **Settings**を開き、**Header**にセッション名、**Title**に登壇者の氏名と役職を設定して**Save**をクリックします。

## 手順4: 申込の行動喚起を追加する

1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「申込む」、**Link**に申込ページ、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「今日申込む」を**Heading 2**で入力し、1行加えます。**Font color**を白にして**Save**をクリックします。

## 手順5: 保存してプレビューする

1. ビルダーツールバーの**Save**をクリックします。
2. ビューメニュー (**eye icon**、目のアイコン) を開き、**Preview**を選びます。

## さらに進む

動画にはありません。

- **登壇者写真**: カードの**+**をクリックして略歴**Text**を追加し、カードの**+**を再びクリックして**Image**を追加します。テキストの上に載ります
- **濃い写真**: ヒーローの**Background effects**パネルで**Background effect**を**Gradient**にします。同じ暗色を60%程度の不透明度で**Start color**と**End color**
- **予定表**: **Text**エレメントを追加し、**Table**ボタンで時刻、セッション、登壇者の表を挿入します
- **ページ内申込**: [ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## 表示結果

イベント名、日付、**今すぐ申込む**ボタンが写真上に白で中央寄せに座ります。下には左半分に詳細、右に会場地図が載ります。3つの登壇者カードが灰色帯に立ち、紫帯が**申込む**でページを締めます。

## 図通りにならない場合

- **ヒーロー写真がセクションいっぱいに広がりません。** **Background style**が**Theme defaults**のままです。セクションの**Style**パネルを開き、**Cover**にします。
- **地図が違う場所を示しています。** Google Mapは入力通り住所を検索します。郵便番号、市、国を**Address**に加えて保存し直します。
- **カードを追加しても設定ダイアログが出ません。** カードは空で開き、ダイアログは出ません。カードにホバーして**More** > **Settings**を開き、**Header**と**Title**を入力します。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [Mapエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/map): 地図設定用
- [Cardエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/card): カード種類と子エレメント用
- [ヒーローセクション](/ja/hc/documentation/learn-dxpr-builder/tutorials/hero-section): ヒーロー選択肢詳細用