テーマ設定
テーマ設定はグローバルな設定で、ストアのすべてのページに適用されます。このページでは、テーマ設定の各グループを、テーマエディターに表示される順に説明します。
テーマ設定を開くには：
- オンラインストア → テーマに移動します。
- Tenoraのテーマカードでカスタマイズを選択します。
- テーマエディターでテーマ設定（歯車アイコン）を選択します。
以下の推奨値は、特に記載がない限り、Tenoraプリセットのデフォルト値です。
ロゴとファビコン
| 設定 | 内容 | 推奨値 |
|---|---|---|
| ロゴ | ヘッダーとパスワードページに表示されるロゴ画像です。ロゴがない場合、ヘッダーにはストア名がテキストで表示されます。 | 背景が透明な.pngまたは.svg |
| ロゴの幅 | ロゴの幅です（40〜300px）。 | 120px |
| ファビコン画像 | ブラウザのタブに表示される小さなアイコンです。 | 32 x 32pxの.png |
ヒント
- ヘッダーのロゴの高さは最大56pxです。縦長のロゴは小さく表示されるため、通常は横長のロゴが最もきれいに見えます。
- ロゴには画像の代替テキストが使われます。画像に代替テキストがない場合は、ストア名が使われます。ロゴの代替テキストはコンテンツ → ファイルで追加できます。
- ロゴがなく、ストア名が18文字を超える場合は、ストア名が小さめの文字サイズで表示されます。ストア名が長い場合は、ロゴのアップロードをおすすめします。
- 画像バナーの上に明るい色のロゴを表示するには、ヘッダーセクションの透明ヘッダーのロゴ設定を使います。
色
配色
配色は、セクションに適用する色の組み合わせです。Tenoraには5つの配色があります。ほとんどのセクションに配色設定があるため、セクションごとに異なる配色を選べます。
各配色には次の色があります。
| 色 | 使われる場所 |
|---|---|
| 背景 | セクションの背景 |
| テキスト | 見出し、本文、アイコン |
| アクセント | リンク、アクティブ状態、寸法線の細部 |
| ボタンの背景 | 塗りつぶしボタンの背景 |
| ボタンのラベル | 塗りつぶしボタンの文字 |
| アウトラインボタンのラベル | アウトラインボタンの文字と枠線 |
配色を編集するには：
- テーマ設定 → 色に移動します。
- 変更したい配色を選択します。
- 色を変更します。プレビューはすぐに更新されます。
- 保存を選択します。
おすすめ
- テキストと背景、ボタンのラベルとボタンの背景のコントラスト比は、4.5:1以上に保ってください。3つのプリセットのすべての色の組み合わせがこの基準（WCAG AA）を満たしています。
- プリセットと同様に、ほとんどのページには明るい配色を1つ、フッターには暗い配色を1つ使うことをおすすめします。
- エラーメッセージと成功メッセージは、配色のテキストの色と色付きのアイコンで表示されるため、どの配色でも読みやすさが保たれます。
サーフェス
| 設定 | 内容 | 推奨値 |
|---|---|---|
| 粒子テクスチャを表示 | 背景に紙のような控えめな質感を加えます。 | 明るくナチュラルなスタイル（Tenora、Terrace）ではオン。暗いスタイル（Lantern）ではオフ。 |
タイポグラフィー
見出し
| 設定 | 内容 | 推奨値 |
|---|---|---|
| フォント | 見出しのフォントです。Shopifyのフォントライブラリから選びます。 | Cormorant（Tenora）、Fraunces（Terrace）、Bodoni Moda（Lantern） |
| 見出しサイズのスケール | 各レベルの見出しを本文よりどれだけ大きくするかを決めます。オプション：コンパクト、バランス、表情豊か。 | バランス |
| 大文字表記 | デフォルトでは、入力したとおりにテキストが表示されます。大文字では、見出しがすべて大文字で表示されます。 | デフォルト |
本文
| 設定 | 内容 | 推奨値 |
|---|---|---|
| フォント | 本文、ボタン、ラベルのフォントです。 | Instrument Sans（Tenora）、Work Sans（Terrace）、Manrope（Lantern） |
| フォントサイズ | 基本の文字サイズです（14〜20px）。 | 16px |
ヒント： ストアで使うすべての言語の文字を含むフォントを選んでください。すべての文字体系に対応していないフォントもあります。文字がフォントにない場合、ブラウザはその文字を代替フォントで表示します。
レイアウト
| 設定 | 内容 | 推奨値 |
|---|---|---|
| ページの幅 | コンテンツの最大幅です。オプション：狭い（1200px）、標準（1440px）、広い（1680px）。 | 標準 |
| ページの余白 | ページの左右の余白です（16〜80px）。小さな画面では自動的に小さくなります。 | 48px |
| セクションの間隔 | すべてのセクションの上下のパディングを調整します。オプション：コンパクト、標準、ゆったり。 | 標準 |
| グリッドの間隔 | 商品カードなど、グリッド内のアイテムの間隔です（8〜48px）。 | 24px |
ボタン
| 設定 | 内容 | 推奨値 |
|---|---|---|
| 角の丸み | ボタンの角を丸めます（0〜40px）。0にすると角が直角になります。 | 0px（Tenora、Lantern）、24px（Terrace） |
| 枠線の太さ | アウトラインボタンの枠線の太さです（1〜3px）。 | 1px |
| 大文字表記 | ボタンのラベルをデフォルトまたは大文字で表示します。 | 大文字（Tenora、Lantern）、デフォルト（Terrace） |
Shop Payなどのブランド決済ボタンは、独自の色とスタイルを保ちます。テーマによって変更されることはありません。
入力欄
これらの設定は、数量セレクター、メール登録欄、「サイズは合いますか？」の入力欄、お問い合わせフォームの入力欄などのフォーム項目に適用されます。
| 設定 | 内容 | 推奨値 |
|---|---|---|
| 角の丸み | 入力欄の角を丸めます（0〜24px）。 | ボタンのスタイルに合わせます。角が直角のボタンなら0px、丸いボタンなら8px程度 |
| 枠線の太さ | 入力欄の枠線の太さです（1〜3px）。 | 1px |
商品カードとコレクションカード
| 設定 | 内容 | 推奨値 |
|---|---|---|
| スタイル | 商品カードの見た目です。標準は画像とテキストのみを表示します。フレームは、余白付きの明るい背景の上にカードを配置します。スウォッチは、カード画像に素材サンプル風のタブを追加します。 | スウォッチ（Tenora）、標準（Terrace）、フレーム（Lantern） |
| 画像の比率 | カード画像の形です。オプション：画像に合わせる、縦長、正方形、横長。 | 家具の写真には縦長、照明や小物には正方形 |
| 角の丸み | カードの角を丸めます（0〜24px）。 | 0px。丸いボタンを使う場合は8px |
ヒント： 画像に合わせるを選ぶと、各カードがそれぞれの商品画像の形で表示されます。すべての商品画像が同じ形の場合にのみ使ってください。そうでない場合、グリッドが不揃いに見えます。
通貨形式
| 設定 | 内容 | 推奨値 |
|---|---|---|
| 通貨コードを表示 | 商品ページ、商品カード、カート、カートドロワーで、価格を通貨コード付きで表示します。例：「$12.00」ではなく「$12.00 USD」。 | USD、CAD、AUDなど、同じ記号を使う複数の通貨で販売している場合はオン。それ以外はオフ。 |
カートの合計金額（見積もり）には、常に通貨コードが表示されます。詳しくは、海外への販売をご覧ください。
カート
| 設定 | 内容 | 推奨値 |
|---|---|---|
| カートの種類 | ドロワーでは、お客様が商品を追加したときやカートアイコンを選択したときに、カートがサイドパネルとして開きます。ページでは、お客様をカートページに移動させます。 | ドロワー |
| 注文メモを表示 | カートドロワーとカートページに「注文メモを追加」欄を表示します。お客様は配送に関する指示などに使えます。 | オン |
カートドロワーには独自の設定があります。編集するには、テーマエディターを開いてカートドロワーセクションを選択し、配色または動的チェックアウトボタンを表示を変更します。
検索
| 設定 | 内容 | 推奨値 |
|---|---|---|
| 予測検索を有効にする | お客様が検索パネルに入力している間に、商品、検索候補、コレクション、ページ、記事を表示します。オフにしても検索パネルは使え、検索結果ページが開きます。 | オン |
| 商品価格を表示 | 予測検索で商品の横に価格を表示します。この設定は、予測検索がオンの場合にのみ表示されます。 | オン |
ソーシャルメディア
各ソーシャルメディアアカウントの完全なアドレスを入力します。例：https://www.instagram.com/yourstore。アイコンを非表示にするには、その欄を空欄のままにします。
利用できるアカウントは、Facebook、Instagram、Pinterest、TikTok、X（Twitter）、YouTube、Vimeo、Tumblr、Snapchatです。
アイコンは次の場所に表示されます。
- フッターセクションのソーシャルメディアアイコンブロック
- スマートフォンとタブレットのメニュードロワー
アカウントが1つも入力されていない場合、アイコンは表示されません。