---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
title: 'チームディレクトリーを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:54:20+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここではチームページを作ります。中央寄せヘッダー、3つ目の下にLinkedInリンク付きの
  リーダーカード3枚、チームカード4枚のグリッドです。全同僚を探しやすくする場合に
  使います。会社ページ内の短いチーム部門には代わりに会社紹介ページを作るを
  ご覧ください。
  動画では物流会社のチームページを作ります。
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: |-
        ここではチームページを作ります。中央寄せヘッダー、3つ目の下にLinkedInリンク付きの
        リーダーカード3枚、チームカード4枚のグリッドです。全同僚を探しやすくする場合に
        使います。会社ページ内の短いチーム部門には代わりに会社紹介ページを作るを
        ご覧ください。
        動画では物流会社のチームページを作ります。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:54:20+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/team-directory'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      description: |-
        ここではチームページを作ります。中央寄せヘッダー、3つ目の下にLinkedInリンク付きの
        リーダーカード3枚、チームカード4枚のグリッドです。全同僚を探しやすくする場合に
        使います。会社ページ内の短いチーム部門には代わりに会社紹介ページを作るを
        ご覧ください。
        動画では物流会社のチームページを作ります。
      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

- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Social Links](/hc/documentation/learn-dxpr-builder/elements/social-links)
- [会社紹介ページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page)

ここではチームページを作ります。中央寄せヘッダー、3つ目の下にLinkedInリンク付きの リーダーカード3枚、チームカード4枚のグリッドです。全同僚を探しやすくする場合に 使います。会社ページ内の短いチーム部門には代わりに[会社紹介ページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page)を ご覧ください。

動画では物流会社のチームページを作ります。

  ## はじめる前に

- ロールは**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**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 1つ目のカラムの**+**をクリックして**Card**を選びます。**More** > **Settings**を開き、役職を**Header**に、氏名を**Title**に設定して**Save**をクリックします。
4. 2つ目のカラムに**Card**を同じ方法で追加します。
5. 3つ目のカラムの**+**をクリックして**Social links**を選びます。2つの記入例付きで入ります。1行目の「Facebook」を`linkedin`に書き換え、横にプロフィールURLを入力します。2行目を**×**で消し、**Style**を**Circle**、**Size**を**2x**にして**Save**をクリックします。
6. 同じカラムの**+**をクリックして**Card**を選びます。リンクの上に載ります。**Header**と**Title**を同様に設定して**Save**をクリックします。
7. セクションの**+**をクリックして**Text**を選びます。ローの上に載ります。「リーダーシップ」を**Heading 2**で入力して**Save**をクリックします。

## 手順3: チームグリッドを追加する

1. 3つ目のセクションは**Add Section Below**で追加し、次に**Row**を追加します。グリッドアイコン (**Column layout**) をクリックし、**1/4 + 1/4 + 1/4 + 1/4**プリセットを選んで**Save**をクリックします。
2. 各カラムに**Card**を追加します。**More** > **Settings**を開き、役職を**Header**に、氏名を**Title**に設定して**Save**をクリックします。
3. セクションの**+**をクリックして**Text**を選びます。ローの上に載ります。「チーム」を**Heading 2**で入力して**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **写真と略歴**: カードの**+**をクリックして略歴**Text**を追加します。次にカードの**+**を再びクリックして**Image**を追加します。テキストの上に載ります。人物名で**Alt attribute**を入力します。
- **丸い写真**: 各画像の**Style**パネルで**Border radius**を設定します。値はピクセルで、最大100です。
- **ホバーの浮き上がり**: カードの**Hover style**パネルで**Drop shadow**を2にします。
- **自動更新チーム**: 「チームメンバー」コンテンツタイプと**Grid**ビューのブロックディスプレイを作ります。**Drupal Views**タブからビューを挿入すると、編集者はページに触れず人を追加します。

## 表示結果

中央寄せの「チーム紹介」見出しがページ上部に座ります。灰色帯ではリーダーカード3枚が役職をヘッダーに氏名を下に示し、3つ目の下に丸いLinkedInアイコンがあります。「チーム」が次に4カード横並びで続きます。

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

- **カードを追加しても設定ダイアログが出ません。** カードは空で開き、ダイアログは出ません。カードにホバーして**More** > **Settings**を開き、**Header**と**Title**を入力します。
- **ソーシャルリンクに「No matching brand icon found」と出ます。** ブランドが既知アイコン名ではありません。小文字で入力します (`linkedin`など)。
- **LinkedInアイコンがカードの上にあります。** カードがリンクより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでカードをリンク上へドラッグします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [Cardエレメント](/hc/documentation/learn-dxpr-builder/elements/card): カード種類と子エレメント用
- [Social linksエレメント](/hc/documentation/learn-dxpr-builder/elements/social-links): アイコンスタイルと色用
- [会社紹介ページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page): 会社ページ内の短いチーム部門配置用