# ブログ記事の本文横幅を広くしたい。

**URL:** <https://community.shopify.com/t/topic/408893>\
**Category:** Shopify テーマ\
**Created:** [April 16, 2025, 8:55am UTC](https://community.shopify.com/t/topic/408893 "2025-04-16T08:55:56Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマでブログ記事の本文横幅をPC表示時に広げる方法についての質問と解決。

**問題:**
- ブログ記事本文の横幅がPCで見たときに狭く、広げたい

**解決方法:**
管理画面からカスタムCSSを追加する手順が提示されました:
1. オンラインストア > テーマ > カスタマイズ
2. ブログ記事 > デフォルトのブログ記事を選択
3. カスタムCSSに以下を追加:
   - `header`、`header + div`、`header + div + div`に対して`max-width`(例:1300px)を設定
   - `margin-right: auto`と`margin-left: auto`で中央配置

**結果:**
質問者は提案された方法でイメージ通りに修正できたと報告し、解決済み。

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [April 16, 2025, 8:55am UTC](https://community.shopify.com/t/topic/408893/1 "2025-04-16T08:55:56Z")

</div>

現在、Dawnにてサイト作成をしております。

ブログ記事の本文の横幅が、PCで見たときに狭い為、広くしたいと思っているのですが、どこで修正するかご教授頂けますと幸いです。

下記、やりたい事イメージとなります。

 ![maxwidth.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/2X/0/0b5ff72df2261e4f7e2f69968d9a9169409ce50d.jpeg)

何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [April 16, 2025, 9:43am UTC](https://community.shopify.com/t/topic/408893/2 "2025-04-16T09:43:46Z")

</div>

@toot-pm 様

ブログの本文の横幅を広げたい件ですが、下記の手順調整が可能かと思われます。

１．管理画面 \> オンラインストア \> テーマ \> カスタマイズボタンをクリック

２．ページ上部のホームページ \> ブログ記事 \> デフォルトのブログ記事を選択

３．左メニューのブログ記事をクリック

４．カスタムCSSに下記CSSを追加し保存ボタンをクリック

1300px部分は任意のサイズに変更してください。

```markup
header {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}
header + div {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}
header + div + div {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}

```

 ![Qcoltd_0-1744796390555.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/4/4846e2ab40388d865a3e4de55706f8d9fe239ae1.png)

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![toot-pm](https://avatars.discourse-cdn.com/v4/letter/t/b19c9b/32.png) [@toot-pm](https://community.shopify.com/u/toot-pm)\
**Post date:** [April 16, 2025, 10:22am UTC](https://community.shopify.com/t/topic/408893/3 "2025-04-16T10:22:12Z")

</div>

早急に回答頂き、ありがとうございました！

イメージ通りに修正できました。