アプリの使い方
デザイン
デザインページでは、ストアのすべてのサイズ表のスタイルをまとめて設定し、ブランドに合わせられます。ページ上のライブプレビューで、変更をその場で確認できます。
上部のバーにある保存をクリックすると変更が適用されます。ストアの有効なサイズ表はすべてすぐに更新されるので、1 つずつ保存し直す必要はありません。1 つのサイズ表だけ見た目を変えたい場合は、1 つのサイズ表だけデザインを変えるをご覧ください。
サイズ表ウィンドウ
| 設定 | 内容 |
|---|---|
| 幅 | 狭い（3〜4 列に最適）、標準（デフォルト）、広い（幅の広い表も横スクロールなしで表示）、特に広い（サイズ表の横に商品写真を表示する場合に最適）。 |
| 角の丸み | 0〜24 px。デフォルト 8 px。 |
| 余白 | 0〜48 px。デフォルト 24 px。チャートの端と内容の間のスペース。 |
ヘッダー
ポップアップやドロワーの上部のバーです。
| 設定 | 内容 |
|---|---|
| 商品名を表示 | ポップアップを開いた商品の名前を上部に表示します。非表示にしても、スクリーンリーダーでは読み上げられます。 |
| ヘッダーの背景 | 空欄にするとサイズ表の背景を使います。 |
| タイトルの色 | 空欄にすると文字色を使います。 |
| タイトルの配置 | 左、中央。 |
| 閉じるボタン | シンプルな ✕、または塗りつぶした円の中の ✕。 |
| アイコンの色 | ✕ 自体の色です。空欄にするとタイトルの色を使います。 |
| 円の色 | 塗りつぶした円のスタイル用です。 |
商品写真
| 設定 | 内容 |
|---|---|
| サイズ表の横に商品写真を表示 | サイズ表の横に商品の写真を表示し、矢印で切り替えられるようにします。大きな画面ではポップアップでのみ表示されます（ドロワーは幅が狭いため）。特に広いウィンドウとの組み合わせがおすすめです。 |
| スマートフォンでも表示 | スマートフォンでは、ポップアップでもドロワーでも写真がサイズ表の上に表示されます。オフにすると、スマートフォンではサイズ表のみが表示されます。 |
背景
| 設定 | 内容 |
|---|---|
| 背景色 | サイズ表の地の色です。デフォルトは白。 |
| 文字色 | 本文の色です。暗い背景にする場合は、読みやすさを保つため一緒に変更してください。 |
| 背景画像 | サイズ表全体の背後に表示する画像です。 |
| 画像のフィット | サイズ表全体を覆う、画像全体を収める、繰り返し（タイル）。 |
| 画像の位置 | 中央、上、下。 |
| オーバーレイ | 0〜90%。背景色で画像を薄くし、文字を読みやすくします。0% では画像がそのまま表示されます。 |
注意: インライン表示のサイズ表は、背景画像または白以外の背景色を設定しない限り、テーマのページ背景の上に表示されます。
表
| 設定 | 内容 |
|---|---|
| 列見出しの背景 | デフォルトは薄いグレー。 |
| 列見出しの文字 | デフォルトはほぼ黒。 |
| 罫線 | 行やセルの間の線の色です。 |
| 行を交互に色分け | 1行おきに色を付け、幅の広い表を横に読みやすくします。 |
各表は、エディターのスタイルのオプションでこれらの色を個別に上書きできます。
テキスト
| 設定 | 内容 |
|---|---|
| 見出しの色 | サイズ表の見出しに加え、単位スイッチの選択中の単位やキーボードのフォーカス枠などのアクセントに使われます。 |
| 基本サイズ | 11〜20 px。デフォルト 14 px。見出しとテキストはこの値を基準に拡大縮小されます。 |
動作
| 設定 | 内容 |
|---|---|
| 外側をクリックしたら閉じる | デフォルトでオン。オフにすると、閉じるボタンでのみサイズ表が閉じます。Esc キーは常に使えます。 |
カスタムCSS
上記のオプションで対応できないスタイルに使います。CSS はサイズ表が表示されるすべての場所に追加されます。セレクターは .plug-sc で始めると、サイズ表だけに適用され、テーマのほかの部分には影響しません。
便利なクラス名：
| 設定 | 内容 |
|---|---|
| .plug-sc__trigger | サイズ表のリンクまたはボタン。 |
| .plug-sc__dialog | ポップアップまたはドロワーのウィンドウ。 |
| .plug-sc__heading | ポップアップ上部のタイトル。 |
| .plug-sc__table | すべての寸法表。 |
| .plug-sc__units | 表の上の単位スイッチ。 |
| .plug-sc__float | フローティングボタン。 |
| .plug-sc__inline | ページ内に表示されたサイズ表。 |
/* ストアで表の文字を小さくする */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* スマートフォンでフローティングボタンを非表示にする */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}重要: カスタム CSS の誤りはチェックされません。編集後に表示がおかしくなった場合は、入力欄を空にして保存すると標準のスタイルに戻ります。
リセット
デフォルトに戻すを押すと、フォームのすべてのオプションがデフォルト値に戻ります。保存をクリックするまで、ストアには何も反映されません。