---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: 'ポートフォリオギャラリーを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:44+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここではポートフォリオページを作ります。中央寄せ見出し、カバー写真と1行成果付きで
  横に並ぶ3案件、行動喚起です。仕事を一目で見せて各案件を物語へリンクする場合に
  使います。1案件を深く書くには事例紹介を書くを
  ご覧ください。
  動画では「Our work」という代理店ページを作ります。
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: ポートフォリオギャラリーを作る
      description: |-
        ここではポートフォリオページを作ります。中央寄せ見出し、カバー写真と1行成果付きで
        横に並ぶ3案件、行動喚起です。仕事を一目で見せて各案件を物語へリンクする場合に
        使います。1案件を深く書くには事例紹介を書くを
        ご覧ください。
        動画では「Our work」という代理店ページを作ります。
      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:44+0000'
      dateModified: '2026-10-24T09:09:48+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/portfolio-gallery'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      description: |-
        ここではポートフォリオページを作ります。中央寄せ見出し、カバー写真と1行成果付きで
        横に並ぶ3案件、行動喚起です。仕事を一目で見せて各案件を物語へリンクする場合に
        使います。1案件を深く書くには事例紹介を書くを
        ご覧ください。
        動画では「Our work」という代理店ページを作ります。
      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
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # ポートフォリオギャラリーを作る.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [ページにDrupalビューを表示する](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [事例紹介を書く](/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [Image](/hc/documentation/learn-dxpr-builder/elements/image)

ここではポートフォリオページを作ります。中央寄せ見出し、カバー写真と1行成果付きで 横に並ぶ3案件、行動喚起です。仕事を一目で見せて各案件を物語へリンクする場合に 使います。1案件を深く書くには[事例紹介を書く](/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study)を ご覧ください。

動画では「Our work」という代理店ページを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- メディアライブラリーに各案件のカバー写真があります。同じ比率に切り抜き済みです。
- ページをビルダーで開きます。新規は**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**をクリックします。新セクションの**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 1つ目のカラムの**+**をクリックして**Text**を選びます。案件名を**Heading 3**で入力し、1行成果を加えて**Save**をクリックします。
4. 同じカラムの**+**をクリックして**Image**を選びます。テキストの上に載ります。**Select Image**をクリックし、カバー写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。
5. 2つ目と3つ目のカラムで繰り返します。

## 手順3: 行動喚起を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「お問い合わせ」、**Link**に`/contact`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「一緒に働きましょう」を**Heading 2**で入力し、1行加えます。**Style**パネルで**Font color**を白にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **各案件のリンク**: カバー写真の**Image link**を事例紹介ページにします。
- **ホバーの浮き上がり**: 各画像の**Style**パネルで**Border radius**に4、**Drop shadow**に1を設定します。**Hover style**で**Drop shadow**を3に上げます。
- **案件の追加**: 1つ目の下に同じプリセットの**Row**を追加します。

## グリッドを絞り込み可能にする

静的グリッドは少数の案件に向きます。訪問者に種類で絞らせるには、各案件をコンテンツとして格納し、公開フィルター付きビューで表示します。ViewsはDrupalコアの一部です。

### 1. Portfolioコンテンツタイプを作る

1. 開くのは**Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`) です。
2. 「Portfolio」と名付けて保存します。
3. 追加先は**Manage fields**タブで、**Image**フィールドを追加し、ラベル「Cover image」を付けます。
4. 追加するのは**List (text)**フィールドで、ラベル「Project type」を付けて値に`web|Web`、`branding|Branding`、`campaign|Campaign`などを入れます。
5. 作るのは**Content** > **Add content** > **Portfolio**でPortfolioアイテムを数件です。

### 2. ビューを作る

1. 開くのは**Structure** > **Views** > **Add view** (`/admin/structure/views/add`) です。
2. 「Portfolio grid」と名付け、**View settings**下で**Content**の**Portfolio**タイプを表示します。
3. チェックするのは**Create a block**で、表示形式を**Grid**の**fields**にして保存します。
4. ビューエディターでフィールド**Cover image**と**Title**を追加し、形式設定でグリッドを3カラムにします。
5. 対象は**Filter criteria**下で**Add**をクリックし、**Project type**を選んで**Expose this filter to visitors**にチェックします。ラベルは「Filter by type」です。
6. 対象は**Advanced**下で、**Use AJAX**をYesにします。ビルダーページ内公開フィルターはAJAX経由でしか動きません。
7. ビューを保存します。

### 3. ページにビューを挿入する

1. DXPR Builderに戻り、3つの静的カラムを空けるか新しい**Row**を追加します。
2. クリックするのは**+**で、**Drupal Views**タブを開いて**View: Portfolio grid (Block)**を選びます。
3. 設定ダイアログで**Show exposed filters**にチェックして**Save**をクリックします。グリッドは「Filter by type」ドロップダウン付きで描画し、新規Portfolioアイテムは自動で載ります。
4. ビルダーツールバーの**Save**をクリックします。

## 表示結果

中央寄せの「実績」見出しがページを開きます。下の灰色帯に3案件が横に並び、各案件は名と成果の上にカバー写真があります。紫帯が**お問い合わせ**でページを締めます。

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

- **カバー写真がテキストの下にあります。** 写真がテキストより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルで写真をテキスト上へドラッグします。
- **カバー同士で高さが違います。** 比率が違います。同じ比率に切り抜き、上げ直して新しい方を選びます。
- **Portfolio gridがDrupal Viewsタブにありません。** ビューが無効か、ビルダーユーザープロファイルが隠しています。**Structure** > **Views**で有効にするか、管理者にユーザープロファイルの**Views**下でのチェックを頼みます。
- **エディターに「Turn on Ajax on this view to use exposed filters.」と出ます。** ビューがAJAXを使いません。ビューエディターの**Advanced**下で**Use AJAX**をYesにします。[エレメントの見た目・動作がおかしい](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong)をご覧ください。
- **「Filter by type」ドロップダウンがありません。** **Show exposed filters**がオフです。ビューエレメントの設定を開き、チェックして**Save**をクリックします。

## 次はこちら

- [Drupal Views連携](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-views): ビュー表示のエレメントピッカー到達方法用
- [事例紹介](/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study): 各案件のリンク先ページ用
- [Imageエレメント](/hc/documentation/learn-dxpr-builder/elements/image): 全画像設定用