---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/blog-layout'
title: 'ブログレイアウトを作る | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:52:16+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ここではブログ記事を挙げるページを作ります。上の注目記事、Drupalビューによる
  一覧とサイドバー、ニュースレター帯です。新記事はページ編集なしで載ります。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: |-
        ここではブログ記事を挙げるページを作ります。上の注目記事、Drupalビューによる
        一覧とサイドバー、ニュースレター帯です。新記事はページ編集なしで載ります。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:16+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/blog-layout'
      articleSection: チュートリアル
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/tutorials/blog-layout'
      description: |-
        ここではブログ記事を挙げるページを作ります。上の注目記事、Drupalビューによる
        一覧とサイドバー、ニュースレター帯です。新記事はページ編集なしで載ります。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を学ぶページを作るチュートリアル

   ## このガイドの内容

 関連ガイド

- [フォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- [ページにDrupalビューを表示する](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [ページへのDrupalブロックの追加](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks)
- [会社紹介ページを作る](/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page)

ここではブログ記事を挙げるページを作ります。上の注目記事、Drupalビューによる 一覧とサイドバー、ニュースレター帯です。新記事はページ編集なしで載ります。1顧客の 物語を深く書くには代わりに[事例紹介を書く](/ja/hc/documentation/learn-dxpr-builder/tutorials/case-study)を ご覧ください。

動画では報道製品のブログを作ります。

  ## はじめる前に

- ロールが**Edit with DXPR Builder**権限を持ちます。
- サイトにブログ記事を挙げるビューがあります。DXPR CMSは**Blog**ビューを出荷します。**Blog**一覧と**Featured posts**ディスプレイ付きです。
- ページをビルダーで開きます。新規は**Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) を開き、**Save**をクリックします。
- 新規エレメントはカラムの上に載ります。カラムのエレメントは逆順に追加するか、後からドラッグで整えます。

## 手順1: 注目記事を追加する

1. 空ページの**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションの**+**をクリックして**Row**を選びます。2つの均等カラム付きで入ります。グリッドアイコン (**Column layout**) をクリックし、**2/3 + 1/3**プリセットを選んで**Save**をクリックします。
3. 広いカラムの**+**をクリックし、**Content**タブから**Image**を選びます。**Select Image**をクリックし、写真にチェックして**Insert selected**をクリックします。**SEO**パネルで**Alt attribute**を入力して**Save**をクリックします。
4. 狭いカラムの**+**をクリックして**Button**を選びます。**Title**に「続きを読む」、**Link**に記事、**Type**は**Primary**のままにして**Save**をクリックします。
5. 狭いカラムの**+**を再びクリックして**Text**を選びます。ボタンの上に載ります。記事タイトルを**Heading 2**で入力し、下に抜粋を加えて**Save**をクリックします。

## 手順2: 一覧とサイドバーを追加する

1. セクションにホバーして**Add Section Below**をクリックします。**2/3 + 1/3**プリセットの**Row**を追加します。
2. 広いカラムの**+**をクリックし、**Drupal Views**タブを開きます。**View: Blog (Blog)**を選んで**Save**をクリックします。記事を描画します。
3. 狭いカラムの**+**をクリックし、**Drupal Views**タブを開きます。**View: Blog (Featured posts)**を選んで**Save**をクリックします。
4. 狭いカラムの**+**を再びクリックし、**Drupal Blocks**タブを開きます。**Block: Forms: Search form**を選んで**Save**をクリックします。注目記事の上に載ります。

## 手順3: ニュースレター帯を追加する

1. 追加するのは**Add Section Below**で3つ目のセクションで、**More** > **Settings**を開き、**Style**パネルで紺色**Background**を選んで**Save**をクリックします。
2. セクションの**+**をクリックして**Button**を選びます。**Title**に「ニュースレターを購読する」、**Link**に`/newsletter`、**Type**に**Light**を設定して**Save**をクリックします。
3. クリックするのは**+**を再びで、**Text**を選びます。ボタンの上に載ります。「最新情報をお届け」を**Heading 2**で入力し、下にニュースレターの1行を続けます。**Style**パネルで**Font color**を白にして**Save**をクリックします。

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

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

## さらに進む

動画にはありません。

- **申込フォーム**: ボタンの代わりに**Drupal Blocks**タブからニュースレターフォームブロックを追加します。[ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **カテゴリー**: ブログカテゴリーのビューをサイドバーに追加します
- **サイドバーの色**: 狭いカラムの設定を開き、薄灰色**Background**と**Style**パネルのパディングを付けます

## 表示結果

注目記事がページを開きます。左に幅広の写真、右にタイトル、抜粋、**続きを読む**ボタンです。下には広いカラムに記事が並び、サイドバーに検索フォームと注目記事が載ります。紺色帯が**最新情報をお届け**見出しと**ニュースレターを購読する**ボタンでページを締めます。

## 記事が表示されない場合

- **BlogビューがDrupal Viewsタブにありません。** ビューが無効か、ビルダーユーザープロファイルが隠しています。**Structure** > **Views** (`/admin/structure/views`) で有効にするか、管理者にユーザープロファイルの**Views**下でのチェックを頼みます。
- **一覧カラムが空のままです。** ビューに表示する公開記事がありません。**Content** > **Add content** > **Blog post**で記事を公開し、ページを再読み込みします。
- **検索フォームがDrupal Blocksタブにありません。** そのブロックはコア**Search**モジュール提供です。**Extend** (`/admin/modules`) でオンにします。
- **再読み込み後に変更が消えています。** ビルダーツールバーの**Save**をクリックする前にページを離れました。Saveがエラーを出す場合、[変更が保存されない](/ja/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)をご覧ください。

## 次はこちら

- [ページにフォームを追加する](/ja/hc/documentation/learn-dxpr-builder/tutorials/add-forms): 申込フォーム用
- [Drupal Views連携](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-views): ビュー設定用
- [Drupal Blocks連携](/ja/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks): サイドバーブロック用
- [会社紹介ページ](/ja/hc/documentation/learn-dxpr-builder/tutorials/about-page): 次のチュートリアル用