ShopifyでCSSテキストサイズを変更する方法

Shopify の CSS テキスト サイズとは何ですか?

CSSでは、テキストサイズを制御するプロパティは フォントサイズ.

応用できます サイト全体 Shopifyのテーマエディターから（すべての見出しまたは本文）に適用できます。または、 特定の要素 (製品タイトルやメニュー項目など) をカスタム CSS で表示します。

サードパーティのページビルダーを使用する場合 GemPagesを使用すると、アプリのエディターでコーディングせずにテキスト サイズを視覚的に制御できます。

Shopify ページのテキスト サイズを変更するにはどうすればよいでしょうか?

方法1：Shopifyテーマエディタを使用する（コード不要）

ストア全体のフォント サイズを調整する最も簡単な方法は、テーマ エディターを使用することです。

次の手順に従います。

• Shopify管理画面から オンラインストア > 部門.
• アクティブなテーマを見つけてクリックします カスタマイズ.

• 左側のサイドバーで、 テーマ設定 > タイポグラフィ.
• を調整する フォントサイズスケール 見出しと本文用。

この変更はサイト全体に適用され、通常はパーセンテージで表されます (100% = デフォルト)。

方法2: CSS（カスタムコード）を使用する

特定の要素をより細かく制御するには、テーマの CSS を編集します。

次の手順に従います。

• Shopify管理画面から オンラインストア > 部門.
• アクティブなテーマを見つけて、 三点 アイコンを押します。 > コードの編集.

• 資産 フォルダで、CSSファイルを見つけます（例： theme.css, base.cssまたは theme.liquid). 

• 一番下までスクロールして、カスタム CSS ルールを追加します。

例：

• 変更を保存し、キャッシュをクリアして、更新をライブで表示します。

GemPagesを使ってテキストサイズを変更する

あなたが好むなら 視覚的なコード不要のソリューションGemPages を使用すると、エディター内で直接テキスト サイズを簡単に調整できます。

ステップ1： Shopify管理画面から、 GemPages ビルダー アプリ> ページテキスト サイズを変更するページをクリックして、GemPages エディターを開きます。

ステップ2： エディターを見つけたら、テキストをクリックして設定パネルを表示します。

ステップ3： 下 設定 タブで、下にスクロールして 文字スタイル のセクションから無料でダウンロードできます。

ステップ4： 動画内で サイズ テキストのサイズを好みに合わせて調整します。また、太字、斜体、下線などのテキストに変更することもできます。 さらに カスタマイズ it.

ステップ5： 更新内容を保存し、公開する前にページをプレビューして結果を確認します。

CSS テキストサイズ設定のベストプラクティス

• 応答性の高いユニットを使用する： 好む レム or em が px デバイス間でスケーラブルなテキストを実現します。
• 階層を維持する: 見やすくするために、見出しは本文より大きくしてください。
• 読みやすさをチェックする: デスクトップとモバイルの両方で変更をテストします。

よくあるご質問

1. 使うべきか px, emまたは レム テキストサイズは?

その em の三脚と レム テキストサイズ 応答性を向上させるために推奨されます。

2. テキストサイズを変更すると SEO に影響しますか?

直接的にはそうではありません。しかし、読みやすさが向上するとユーザーエクスペリエンスが向上し、SEOにプラスの影響を与える可能性があります。

3. 公開前に変更をプレビューできますか?

はい。Shopify テーマエディターと GemPages はどちらも、ストアフロントに変更を公開する前にライブプレビューが可能です。