アプリの使い方
サイズ表エディター
サイズ表に入れられるものと、そのすべてのオプションです。サイズ表でサイズ表を作成するか、既存のサイズ表をクリックするとエディターが開きます。
エディターの構成
- サイズ表の名前:管理用です。お客様には表示されません。
- コンテンツ:サイズ表を構成する要素を上から順に並べたものです。ハンドルをドラッグするか上下の矢印で並べ替え、ゴミ箱アイコンで要素を削除します。
- デザイン:ストアのデザインを使用はデフォルトでオンです。1 つのサイズ表だけデザインを変えるをご覧ください。
- ステータスと適用対象:セットアップガイドで説明しています。
- ライブプレビュー:入力に合わせて更新されます。デスクトップとモバイルを切り替えたり、全幅プレビューを開いたりできます。
変更は、上部のバーにある保存をクリックするまで公開されません。未保存の変更があるままページを離れようとすると、先に保存するか破棄するかを確認されます。
要素
要素を追加をクリックすると、8 種類の要素から 1 つを追加できます。空の要素(テキストのない見出し、ファイルのない画像など)はストアでは表示されないため、作りかけの要素が空白として表示されることはありません。
表
寸法を行と列で表示します。1 行目が見出し行で、1 列目には通常サイズ名が入ります。下記の表の操作と単位の換算もご覧ください。スタイルのオプション:
| 設定 | 内容 |
|---|---|
| セルの配置 | 左、中央、右。 |
| セルの余白 | 狭め、標準、広め。 |
| 罫線 | 行の間、全罫線、なし。 |
| 色 | ヘッダーの背景、見出し行の文字、セルの文字、交互の行、罫線。空欄にするとサイズ表の色を使います。 |
| 見出し行を太字 | デフォルトでオン。オフにすると通常の太さの見出しになります。 |
| 最初の列を太字 | デフォルトでオン。オフにするとサイズ名が通常の太さになります。 |
| 最初の列を強調 | サイズ列に色を付け、ラベルとして読みやすくします。 |
| スクロール時も最初の列を表示したままにする | 幅の広い表で、お客様が横にスクロールしてもサイズ列が固定されます。スマートフォンで特に便利です。 |
| 見出し行とサイズ列を大文字にする | 大文字で表示します。 |
見出し
「測り方」のように、サイズ表をセクションに分ける短いタイトルです。
| 設定 | 内容 |
|---|---|
| 配置 | 左、中央、右。 |
| サイズ | 小、標準、大。 |
| 色 | 空欄にするとサイズ表の見出しの色を使います。 |
テキスト
フィット感、測り方、返品についてのメモです。ツールバーには太字、斜体、下線、箇条書き・番号付きリスト、リンクがあります。文字サイズは小、標準、大から選べます。
文字を選択し、文字色またはハイライトで色を付けられます。ツールバーの最後にあるHTMLを編集では、マークアップを直接編集できます。段落、h3・h4 見出し、太字、斜体、下線、リスト、リンク、色付きの文字は保持されます。それ以外のタグは保存時に削除されますが、中の文字は残ります。「画像とテキスト」の文字も同じエディタで編集します。
画像
測り方のイラストなど、1 枚の図や写真です。
| 設定 | 内容 |
|---|---|
| 画像 | 新しい画像をアップロードするか、Shopify のファイルにある画像を選ぶか、画像のリンク(https のみ)を貼り付けます。JPG、PNG、WebP、GIF、最大 20 MB。 |
| 代替テキスト | スクリーンリーダーを使うお客様に画像の内容を伝えます。必ず入力することをおすすめします。 |
| 幅 | 元のサイズ、全幅、大、標準、小。 |
| 配置 | 左、中央、右。 |
画像とテキスト
測り方の手順を添えた図など、説明文の横に画像を置きます。
| 設定 | 内容 |
|---|---|
| 画像の位置 | テキストの左、テキストの右。 |
| 画像の幅 | 要素の半分、3分の1。 |
| 縦の配置 | 中央、上。 |
スマートフォンでは、画像はテキストの上に表示されます。
画像ギャラリー
生地のアップ、着用写真、測り方の手順など、複数の画像を並べて表示します。
| 設定 | 内容 |
|---|---|
| レイアウト | グリッド、カルーセル(スワイプ可能)。 |
| 列 | グリッドのみ:自動調整、2、3、4。 |
| 画像の高さ | カルーセルのみ:低い、標準、高い。 |
動画
測り方を説明する短い動画です。
| 設定 | 内容 |
|---|---|
| ソース | 動画を Shopify のファイルにアップロードする(MP4、MOV、WebM、最大 1 GB)か、YouTube または Vimeo のリンクを貼り付けます。 |
| 再生 | アップロードした動画のみ:コントロール付きプレーヤー、または GIF のように無音で自動ループ再生。 |
| タイトル | スクリーンリーダーで読み上げられます。 |
| 幅 | 全幅、大、標準、小。 |
区切り線
セクションの間に入れる横線です。中央にラベルを付けることもできます。
| 設定 | 内容 |
|---|---|
| 線 | 実線、破線、点線。 |
| 間隔 | 線の周りの余白を小・中・大から選択。 |
| 太さ | 1、2、4 px。 |
| 色 | 空欄にするとサイズ表の罫線の色を使います。 |
| ラベル | 最大 60 文字(例:「測り方」)。線の切れ目に表示されます。空欄にすると通常の線になります。 |
| ラベルの位置 | 左、中央、右。 |
すべての要素には、スタイルのオプションに上の余白と下の余白(なし、小、デフォルト、大)もあります。
表の操作
表エディターは小さなスプレッドシートのように動作します。1 つの表は最大 200 行・30 列まで作れます。
キーボードとマウス
| 設定 | 内容 |
|---|---|
| 矢印キー | セル間を移動します。 |
| Shift + 矢印キー | セルの範囲を選択します。クリックしてドラッグすることもできます。 |
| Enter | 1 行下へ移動します(Shift + Enter で上へ)。 |
| Delete / Backspace | 選択範囲のすべてのセルを空にします。 |
| Ctrl / ⌘ + C、X、V | 範囲をコピー、切り取り、貼り付けします。 |
| Ctrl / ⌘ + Z | 直前の表の変更(貼り付け、挿入、削除)を元に戻します。 |
| 右クリック、Shift + F10、またはメニューキー | 表のアクションメニューを開きます。 |
| Esc | 選択を 1 つのセルに戻します。 |
Excel や Google スプレッドシートから貼り付ける
スプレッドシートでセルをコピーし、左上の値を入れたいセルをクリックして貼り付けます。表は必要に応じて広がります。選択範囲に 1 つの値を貼り付けると、選択したすべてのセルにその値が入ります。
表のアクションメニュー
セルを右クリックすると、次の操作ができます。
- 元に戻す
- 上 / 下に行を挿入、行を複製、行を上 / 下へ移動、行を削除
- 左 / 右に列を挿入、列を左 / 右へ移動、列を削除
- 行と列を入れ替え:上に並んだサイズを縦に並べ替えます(逆も可能)。
- CSVをインポート…:表を CSV ファイルの内容に置き換えます。1 行目が見出し行になります。
- 寸法を消去:見出し行とサイズ列を残してすべてのセルを空にし、レイアウトを再利用できるようにします。
複数の行を選択している場合、行を削除で選択したすべての行が削除されます。表の下にある行を追加と列を追加ボタンは末尾に追加します。
単位の換算
寸法を一度入力すれば、お客様が単位を切り替えられます。換算をオンにすると、表の上に小さなスイッチ(例:cm | in)が表示されます。サイズ名やメモは入力したとおりのまま変わりません。
| 設定 | 内容 |
|---|---|
| 単位の換算 | 換算しない、または入力した単位 → 表示する単位:センチ → インチ、インチ → センチ、ミリ → インチ、インチ → ミリ、キログラム → ポンド、ポンド → キログラム。 |
| 最初に表示 | サイズ表を開いたときに表示される単位です。入力した単位か、換算後の単位(例:米国のお客様向けにインチ)を選べます。 |
| 換算値の丸め | 整数、小数第 1 位(デフォルト)、小数第 2 位。 |
| スイッチの位置 | 表の上の左、中央、右。 |
| 換算する列 | 寸法が入っている列にチェックを入れます。デフォルトでは最初の列以外のすべての列が換算されます。 |
換算される値
- 単一の値(
86)と範囲(86-90、86 – 90、86/90、86 to 90)。 - 小数点のカンマ(
86,5):換算後もカンマのままです。 - 単位付きの値(
86 cm→33.9 in)。 - 見出しの括弧内の単位も切り替わります:
Chest (cm)はChest (in)になります。
数値以外(M や XLなどのサイズ名、メモ、空のセル)はそのまま残ります。
ウエスト (cm)のように各見出しに単位を括弧で入れておくと、お客様はどの単位を見ているのか常にわかります。1 つのサイズ表だけデザインを変える
デフォルトでは、すべてのサイズ表がストア全体のデザインに従います。ストリートウェアのラインだけ暗めの見た目にするなど、1 つのサイズ表だけスタイルを変えたい場合は、エディターでストアのデザインを使用をオフにします。そのサイズ表は、現在のストアの値をもとに、サイズ表ウィンドウ、ヘッダー、商品写真、背景、表、テキストの設定を独自に持つようになります。
ストアのデザインを使用を再びオンにすると、ストアのデザインに戻ります。カスタム CSS と、背景クリックで閉じる設定は、常にストア全体のデザインページの設定が使われます。