Shopifyの文字を調整するときは、まずテーマのフォントや文字サイズの設定を確認します。CSSが必要な場合も、全ページの本文を一度に変えるのではなく、商品説明などの範囲を決めて試しましょう。読みやすさは数値だけで決まらず、フォントや文章量、画面幅によって変わります。
太さ・行間・文字間隔を分ける
font-weightは文字の太さ、line-heightは行の高さ、letter-spacingは文字の間隔に関わります。太さの数値を変えても、利用するフォントがその太さを持たない場合は期待どおりの見た目にならないことがあります。文字間隔を広げれば必ず高級に見える、行間を増やせば購入率が上がる、といった説明を判断基準にしないでください。
変更する文章の範囲を確認する
ブラウザの検証機能で、対象の文章を囲む要素とクラス、現在効いている指定を確認します。全h2やbodyへの指定は、商品以外の案内やボタンまで影響する場合があります。自店の対象を限定できるクラスを使い、他の箇所へ影響が広がらないかを確認してください。例示するクラス名を、全テーマ共通のものとして使わないことが重要です。
商品説明を想定したCSS例を読む
次のao-product-copyは例示クラスです。自店で確認した対象クラスへ置き換えて使います。.ao-product-copy { line-height: 1.7; letter-spacing: 0.02em; }
.ao-product-copy h2 { font-weight: 600; } 単位なしのline-heightは要素の文字サイズを基準にした値で、自動的に最適な行間を選ぶ仕組みではありません。例の1.7や文字間隔は試すための値です。文字の大きさやフォントに合わせて見直してください。
テーマ設定かセクション単位で追加する
テーマを複製したうえで、変更する範囲に合うカスタムCSS欄へ追加します。セクション単位で済む場合は、必要以上にテーマ全体へ広げないようにします。カスタムCSSの文字数や使えない指定を確認し、元の設定も記録してください。新しいフォントを追加する場合は、利用権と読み込みの負担も別途確認が必要です。
日本語・数字・長文で表示を比べる
短い見出しだけでなく、長い商品名、説明文、数字、英字が混じる文章で確認します。スマートフォンの狭い幅やブラウザの拡大表示で、文字の重なり、切れ、横へのはみ出しがないかを見てください。余白を増やした結果、重要な条件が探しにくくなっていないかも確認します。太さ、行間、文字間隔は一度に変えず、差を見ながら調整しましょう。
上書きの原因と戻し方を残す
反映しない場合は、クラスの一致、入力範囲、既存CSSの優先順位を調べます。!importantの追加を繰り返して原因を隠さないようにしてください。CSS例は構文を検証していますが、特定テーマでの実表示を保証するものではありません。変更箇所を記録し、テーマ更新やフォント変更の後に再確認できる状態で運用します。
導入前の確認事項
- 対象範囲と現在の指定を確認した
- フォントが対応する太さを調べた
- 長文・狭い幅・拡大表示を試した
- 追加箇所と戻し方を記録した
公式資料・関連記事
関連記事：ShopifyボタンのCSS変更｜色・余白と適用範囲の確認、Shopifyコードエディタの開き方とファイルの探し方、Shopifyテーマの構造｜Liquid・HTML・CSS・JS。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント