Shopifyのテーマ設定だけでは、文字の「読みやすさ」や「ブランドイメージ」を完璧に表現できないと感じていませんか？「見出しをもう少しだけ太くしたい」「商品説明の行間を広げて、ゆったり見せたい」といった細かな調整は、ストアの印象を大きく左右します。この記事では、CSSを使ってフォントの太さや行間などを微調整する、コピペで使える具体的なコード例を紹介します。
CSSで調整できるフォントスタイル
CSSを使えば、テーマ設定よりも細かくフォントの見た目をコントロールできます。ここでは、特に印象を変えやすい3つの代表的なスタイルを紹介します。
文字の太さ (font-weight)
文字の太さを調整します。normal（標準）やbold（太字）の他に、100～900までの数値でより細かく指定できます。400が標準、700が太字に相当します。テーマによっては中間（500や600）の太さも使え、柔らかな印象を与えられます。
行の高さ・行間 (line-height)
文章の行と行の間の高さを調整します。行間が詰まっていると読みにくく、適度に空いていると洗練された印象になります。1.6のように単位をつけない数値で指定すると、文字サイズに合わせて自動で最適な行間が保たれるためおすすめです。
文字の間隔 (letter-spacing)
文字と文字の間のスペースを調整します。少しだけ間隔を広げると、高級感や抜け感を演出できます。1pxや0.1emのように、小さな単位で微調整するのが一般的です。
フォント調整CSSの基本コード
ここでは、テーマカスタマイザーの「カスタムCSS」欄にコピー＆ペーストして使える、基本的なコードを紹介します。
見出しの太さを変えるコード
サイト内の全ての大見出し（h2タグ）の太さを、標準より少しだけ太い600に設定する例です。
CSS
/* 全ての大見出し(h2)の太さを少し太くする */
h2 {
font-weight: 600;
}
商品説明の行間を広げるコード
商品説明文は、読みやすさが購入率に直結します。行間を少し広げて、読みやすくしてみましょう。
CSS
/* 商品説明の行間を広げる */
.product__description {
line-height: 1.7; /* 標準より少し広め */
}
サイト全体の文字間隔を調整
サイト全体の基本となるテキストの文字間隔を、ほんの少しだけ広げて、洗練された印象にするコードです。
CSS
/* サイト全体の文字間隔を少し広げる */
body {
letter-spacing: 0.5px;
}
CSSコードを追加する手順と注意点
コードを安全に追加し、正しく反映させるための手順とヒントです。
変更したい要素の調べ方
「商品説明」が.product__descriptionではない場合など、変更したい場所のクラス名が分からない時は、ブラウザの「検証」機能を使います。変更したい文字の上で右クリックし「検証」を選択すると、HTMLとCSSが表示され、クラス名などを確認できます。
カスタムCSSの追加場所
コードの追加は、テーマカスタマイザーから行うのが最も安全です。管理画面から「テーマ」＞「カスタマイズ」と進み、左下の歯車アイコン「テーマ設定」の中にある「カスタムCSS」の入力欄にコードを貼り付けます。
変更が反映されない時のヒント
他のCSS設定が優先されていて、コードが効かない場合があります。その際は、セレクタをより詳しく指定するか、最終手段としてプロパティの最後に!importantを追記する（例：font-weight: 600 !important;）と、強制的にスタイルを適用できます。
まとめ
Shopifyのフォントスタイルは、カスタムCSSを使えば、テーマ設定の範囲を超えて細かく調整できます。文字の太さ、行間、文字間隔を少し変えるだけで、ストアの「読みやすさ」と「ブランドイメージ」は格段に向上します。今回紹介したコピペコードを参考に、まずは商品ページの行間調整から試してみてはいかがでしょうか。訪問者が心地よく読めるサイトは、信頼と売上に繋がります。
コメント