---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
title: '画像ギャラリーを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:07+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここでは写真ギャラリーを作ります。中央寄せ見出し、代替テキスト付き3枚の並び写真、
  灰色帯のスライドショーです。場所やイベントを写真で見せる場合に使います。各案件に
  説明を付けるには代わりにポートフォリオギャラリーを作るを
  ご覧ください。
  動画では大学向け学生絵画ギャラリーを作ります。
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: |-
        ここでは写真ギャラリーを作ります。中央寄せ見出し、代替テキスト付き3枚の並び写真、
        灰色帯のスライドショーです。場所やイベントを写真で見せる場合に使います。各案件に
        説明を付けるには代わりにポートフォリオギャラリーを作るを
        ご覧ください。
        動画では大学向け学生絵画ギャラリーを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:53:07+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/image-gallery'
      articleSection: チュートリアル
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
      description: |-
        ここでは写真ギャラリーを作ります。中央寄せ見出し、代替テキスト付き3枚の並び写真、
        灰色帯のスライドショーです。場所やイベントを写真で見せる場合に使います。各案件に
        説明を付けるには代わりにポートフォリオギャラリーを作るを
        ご覧ください。
        動画では大学向け学生絵画ギャラリーを作ります。
      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を学ぶページを作るチュートリアル

   ## このガイドの内容

 関連ガイド

- [Imageエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/image)
- [Image carouselエレメントの追加](/ja/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [ポートフォリオギャラリーを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

ここでは写真ギャラリーを作ります。中央寄せ見出し、代替テキスト付き3枚の並び写真、 灰色帯のスライドショーです。場所やイベントを写真で見せる場合に使います。各案件に 説明を付けるには代わりに[ポートフォリオギャラリーを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)を ご覧ください。

動画では大学向け学生絵画ギャラリーを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーに6枚以上の写真があります。同じ比率に切り抜き済みです。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。

## 手順1: ヘッダーを追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションにホバーして**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Save**をクリックします。
3. セクションの**+**をクリックし、**Content**タブから**Text**を選びます。
4. 「学生作品ギャラリー」を**Heading 2**で入力し、紹介1行を加えて**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. ローのグリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 1つ目のカラムの**+**をクリックして**Image**を選びます。
4. クリックするのは**Select Image**で、**Apply filters**でメディアライブラリーを検索して、写真をクリックして**Insert selected**をクリックします。
5. 開くのは**SEO**パネルで、**Alt attribute**を入力します。写真の見えない人に伝える内容です。**Save**をクリックします。
6. 2つ目と3つ目のカラムで繰り返します。

同じ比率に切り抜いた写真はローを均等に保ちます。

## 手順3: スライドショーを追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで薄灰色**Background**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Image carousel**を選びます。
3. クリックするのは**Select Image**で、ライブラリーを検索し、3枚の写真をクリックして**Insert selected**をクリックし、**Save**をクリックします。
4. セクションの**+**を再びクリックして**Text**を選びます。カルーセルの上に載ります。「スライドショー」を**Heading 2**で入力して**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **キャプション**: カラムに**Card**を置き、中にキャプションの**Text**エレメントを追加します。次にカード内に**Image**を追加します。キャプションの上に載ります。
- **原寸写真**: **Image link**に原寸ファイル、**Image link target**に**New window**を設定します。
- **スタイル**: 各画像に**Style**パネルで**Border radius**に4、**Drop shadow**に1を設定して柔らかく浮かせます。
- **スライドショー間隔**: カルーセルの**Interval**をミリ秒で設定します。**Hide**下で**Hide pagination control**や**Hide prev/next buttons**にチェックするとその操作を消します。
- **自動補充ギャラリー**: **Structure** > **Views** > **Add view**で画像メディアのビューを**Grid**形式のブロックディスプレイで作ります。**Drupal Views**タブから挿入すると、新規アップロードが自動で載ります。

## 表示結果

中央寄せ見出しがページを開き、3枚の写真が横に並びます。下の灰色帯ではスライドショーが1枚ずつ5秒ごとに進みます。

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

- **Insert selectedしても写真が入りません。** **Apply filters**後のライブラリー再読み込み中で、クリックが写真にチェックしませんでした。グリッドが落ち着くまで待ち、写真にチェックがあることを確認して**Insert selected**を再クリックします。
- **メディアライブラリーが空です。** 画像が未上げか、メディアブラウザー未設定です。[画像が上げられない・消える](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/images-and-media)をご覧ください。
- **3枚の写真で高さが違います。** 比率が違います。同じ比率に切り抜き、上げ直して新しい方を選びます。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [Imageエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/image): 全画像設定用
- [Image carouselエレメント](/ja/hc/documentation/learn-dxpr-builder/elements/image-carousel): スライドショー選択肢用
- [ポートフォリオ](/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery): フィルター付き案件グリッド用