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

Eisaku · ‎02-02-2023

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

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

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

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

Qcoltd · ‎02-02-2023

@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で指定することも可能です。

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/　テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

Qcoltd · ‎02-02-2023