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

日本語 ディスカッション 技術的なQ＆A

Topic summary

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

質問内容:

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

提供された解決策:
Dawnテーマを基準に、base.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テーマでの例として提供されています。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

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

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

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

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

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

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

2

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

①②③ともbase.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;
}
@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サイズでのフォントサイズとなります。

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

ご参考まで。

(キュー小坂)