---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
title: 'ナレッジベースを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:53:14+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここではヘルプセンターのトップページを作ります。紺色ヘッダー、アイコン付き3つの
  カテゴリーカード、人気記事2一覧、サポート行動喚起です。ヘルプが多くの記事に分散する
  場合に使います。短い一問一答一覧には代わりにFAQページを作るを
  ご覧ください。
  動画ではソフトウェア製品のヘルプセンターを作ります。
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つの
        カテゴリーカード、人気記事2一覧、サポート行動喚起です。ヘルプが多くの記事に分散する
        場合に使います。短い一問一答一覧には代わりにFAQページを作るを
        ご覧ください。
        動画ではソフトウェア製品のヘルプセンターを作ります。
      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:14+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/knowledge-base'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/knowledge-base'
      description: |-
        ここではヘルプセンターのトップページを作ります。紺色ヘッダー、アイコン付き3つの
        カテゴリーカード、人気記事2一覧、サポート行動喚起です。ヘルプが多くの記事に分散する
        場合に使います。短い一問一答一覧には代わりにFAQページを作るを
        ご覧ください。
        動画ではソフトウェア製品のヘルプセンターを作ります。
      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 Blocks](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)
- [FAQページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page)
- [Link](/hc/documentation/learn-dxpr-builder/elements/link)

ここではヘルプセンターのトップページを作ります。紺色ヘッダー、アイコン付き3つの カテゴリーカード、人気記事2一覧、サポート行動喚起です。ヘルプが多くの記事に分散する 場合に使います。短い一問一答一覧には代わりに[FAQページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-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**を選びます。**Style**パネルで紺色**Background**と白**Font color**を選び、**Save**をクリックします。
3. セクションの**+**をクリックして**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**をクリックします。新セクションに**Align text center**クラスを付けます。
2. セクションの**+**をクリックして**Row**を選びます。グリッドアイコン (**Column layout**) をクリックし、**1/3 + 1/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 1つ目のカラムの**+**をクリックして**Card**を選びます。**More** > **Settings**を開き、**Header**にカテゴリー名、**Title**に記事数を設定して**Save**をクリックします。
4. 同じカラムの**+**をクリックして**Icon**を選びます。カードの上に載ります。**Font Awesome Free Solid**セットを選び、`rocket`を検索してアイコンをクリックします。**Size**を**Extra Large (2x)**にして**Save**をクリックします。
5. 2つ目のカラムに`credit-card`、3つ目に`screwdriver-wrench`で繰り返します。

## 手順3: 人気記事を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで薄灰色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。
3. 各カラムの**+**をクリックして**Text**を選びます。記事タイトル3つを1行ずつ入力して**Save**をクリックします。
4. セクションの**+**をクリックして**Text**を選びます。ローの上に載ります。「人気記事」を**Heading 2**で入力して**Save**をクリックします。

## 手順4: サポート行動喚起を追加する

1. 4つ目のセクションを追加し、**More** > **Settings**を開きます。**HTML classes**下で**Align text center**を選び、**Style**パネルで紫**Background**と白**Font color**を選びます。**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「サポートに連絡する」、**Link**に`/support`、**Type**に**Light**、**Size**に**Large**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「必要な情報が見つかりませんか？」を**Heading 2**で入力し、1行加えます。**Font color**を白にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **検索ボックス**: **Extend**でコア**Search**モジュールをオンにします。ヘッダーセクションの**+**をクリックし、**Drupal Blocks**タブを開いて**Block: Forms: Search form**を選びます。訪問者は`/search/node`に着きます。
- **クリックできるカード**: カラムに先に**Link**エレメントを追加し、その**Link**をカテゴリーページにします。次に中に**Card**を追加します。
- **記事リンク**: 一覧の各タイトルを選んでツールバーのリンクボタンでリンクします。
- **カテゴリー追加**: 同じプリセットの2つ目の**Row**を追加します。よくあるものはエディターの使い方、テンプレートとデザイン、APIと開発です。

## 表示結果

紺色ヘッダーが「ヘルプセンター」で訪問者を白で迎えます。3つの中央寄せカテゴリーが続き、各カテゴリーは名と記事数のカード上にアイコンがあります。灰色帯に人気記事6件が2カラムに並び、紫帯が**サポートに連絡する**を出します。

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

- **カードを追加しても設定ダイアログが出ません。** カードは空で開き、ダイアログは出ません。カードにホバーして**More** > **Settings**を開き、**Header**と**Title**を入力します。
- **アイコンがカードの下にあります。** アイコンがカードより先に入り、新規エレメントはカラムの上に載ります。コントロールバーのドラッグハンドルでアイコンをカード上へドラッグします。
- **紺色の上で見出しが暗いままです。** Textエレメントに独自**Font color**がありません。**Style**パネルを開き、**Font color**を白にします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [Drupal Blocks連携](/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks): 挿入できる他ブロック用
- [FAQページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/faq-page): カテゴリーページ内の折りたたみ回答用
- [Linkエレメント](/hc/documentation/learn-dxpr-builder/elements/link): カード周りのクリック可能ラッパー用