現在Refreshのテーマでカスタマイズを進めています。
テストページを作ってみたのでが、タイトルの位置をセンターにしたいのですが、カスタマイズ画面では選択肢がなく、テキストのサイズもこれ以下のサイズに変更が出来ません。
どのようにすれば、タイトルのサイズ変更や位置を変更する事が出来るのでしょうか？
よろしくお願いいたします。
カスタマイズのページで作成しようとしています。
@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で指定することも可能です。
ご参考まで。
(キュー小坂)
1 Like
有難うございました。
教えて頂いた通りにやってみましたら、理想通りの形に出来ました。
感謝しております。