# フッターセクションのカスタマイズについて

**URL:** <https://community.shopify.com/t/topic/198877>\
**Category:** 技術的なQ＆A\
**Created:** [March 12, 2023, 5:10am UTC](https://community.shopify.com/t/topic/198877 "2023-03-12T05:10:03Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

フッターセクションのカスタマイズに関する技術的な質問と回答です。

**質問内容:**
- ①フッターのテーマブロック「メニュー」の見出しサイズを大きくしたい
- ②③スマホ表示時のフッターメニューの配置を左端ではなく中央に変更したい

**提供された解決策:**
Dawnテーマを基準に、base.css等に以下のCSSコードを追加することで対応可能:

```css
.footer-block--menu {
  text-align: center;
}
.footer-block--menu .footer-block__heading {
  font-size: 24px;
}
.footer-block__details-content .list-menu__item--link {
  display: block;
}
```

**コードの説明:**
- `text-align: center` でスマホ表示時のテキストを中央配置
- `font-size: 24px` でスマホ表示時のフォントサイズを調整
- PC表示時は `@media screen and (min-width: 990px)` で別途設定可能
- 数値は希望に応じて変更可能

※質問者が使用しているテーマが不明なため、Dawnテーマでの例として提供されています。

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [March 12, 2023, 5:10am UTC](https://community.shopify.com/t/topic/198877/1 "2023-03-12T05:10:03Z")

</div>

フッターについて以下のようなカスタマイズをしたいです。

ご協力頂ける方がいましたら、ご回答をお願いします。

どれか一つの回答でも大歓迎です。

①フッターのテーマブロック「メニュー」の見出しサイズを大きくしたい

②スマホからサイトを見た時、フッターのテーマブロック「メニュー」の見出しを、左端ではなく中央に配置したい

③スマホからサイトを見た時、フッターのテーマブロック「メニュー」の内容（呼び出しているフッターメニュー）を、左端ではなく中央に配置したい

---

<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:** [March 20, 2023, 10:29am UTC](https://community.shopify.com/t/topic/198877/2 "2023-03-20T10:29:16Z")

</div>

ご質問いただいている、フッターのカスタマイズの件ですが、ご使用のテーマが不明なため「Dawn」を元にご説明させていただきます。

①②③ともbase.css等に、下記cssを追加いただけましたら、

フォントサイズおよびテキストの位置が調整されます。

```markup
.footer-block--menu {
  text-align: center;
}
.footer-block--menu .footer-block__heading {
  font-size: 24px;
}
.footer-block __details-content .list-menu__ item--link {
  display: block;
}
@media screen and (min-width: 990px) {
  .footer-block--menu {
    text-align: left;
  }
  .footer-block--menu .footer-block__heading {
    font-size: 32px;
  }
}

```

CSSについて

・上部の『text-align: center;』はスマートフォンでのテキスト位置を中央へ配置するため設定となります。

・上部の『font-size: 24px;』はスマートフォンサイズでのフォントサイズとなります。

・下部の『text-align: left;』はPCサイズでのテキスト位置を左端へ配置するため設定となります。

・下部の『font-size: 32px;』はPCサイズでのフォントサイズとなります。

各数値をご希望のサイズに変更いただければと思います。

ご参考まで。

(キュー小坂)