Refreshのテーマでのページタイトル位置ををセンターにしたい

[Eisaku]

現在Refreshのテーマでカスタマイズを進めています。

テストページを作ってみたのでが、タイトルの位置をセンターにしたいのですが、カスタマイズ画面では選択肢がなく、テキストのサイズもこれ以下のサイズに変更が出来ません。
どのようにすれば、タイトルのサイズ変更や位置を変更する事が出来るのでしょうか？

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

カスタマイズのページで作成しようとしています。

[Qcoltd · Accepted solution]

@Eisaku  様

ご質問いただいている、ページタイトル部分のテキスト位置やサイズの変更ですが、CSSを変更することで対応が可能です。

また対象CSSの変更は、管理画面より変更が可能です。

下記更新手順となります。

• 管理画面より「オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集」からコード編集画面を開きます。
• コード編集画面の「ファイルを検索」エリアに、『section-main-page.css』と入力してください。
• section-main-page.cssを開くと下記画像の5行目から13行目までがページタイトル部分のcssとなります。上部がスマホサイズ、下部がPCやタブレットサイズとなります。

対象箇所CSSサンプルコード

.main-page-title {
  margin-bottom: 3rem;
  text-align: center;
  font-size: calc(var(--font-heading-scale) * 3.5rem);
}

@media screen and (min-width: 750px) {
  .main-page-title {
    margin-bottom: 4rem;
    font-size: calc(var(--font-heading-scale) * 4.5rem);
  }
}

テキストサイズは3.5rem、4.5rem部分の数字をちょうどいいサイズに変更いただければと思います。

下記追加cssについての説明となります。

テキストをセンターにする処理

text-align: center;

テキストサイズを変更する処理

font-size: calc(var(--font-heading-scale) * 3.5rem);
font-size: calc(var(--font-heading-scale) * 4.5rem);

※テキストサイズは『font-size: 30px;』の様にpxで指定することも可能です。

ご参考まで。

(キュー小坂)

[Eisaku]

有難うございました。
教えて頂いた通りにやってみましたら、理想通りの形に出来ました。
感謝しております。