バッジのサイズを変更する
デスクトップ、モバイル、商品ページ、一覧ページ向けに、テキストバッジと画像バッジのサイズを変更します。
バッジエディタのSizeセクションを使用して、バッジのサイズをすべての場所で変更したり、デバイスとページの種類ごとに異なるサイズを設定したりします。
Sizeセクションを開く
Section titled “Sizeセクションを開く”-
Badges & Labelsを開く
Section titled “Badges & Labelsを開く”Shopify管理画面で、Sami Product Labels > Badges & Labelsを開きます。
-
バッジを選択する
Section titled “バッジを選択する”サイズを変更したいバッジを見つけて、その行のEdit badge/labelをクリックします。
新しいバッジのサイズを変更する場合は、Create badgeをクリックして、Text badgeまたはImage badgeを選択します。
-
Sizeを展開する
Section titled “Sizeを展開する”バッジエディタでDesignタブのまま、Sizeまでスクロールして、セクションを展開します。
バッジを開き、Designタブのまま、Sizeを展開します。
デスクトップとモバイルで同じサイズを使用する
Section titled “デスクトップとモバイルで同じサイズを使用する”Responsive sizeで、すべてのデバイスと対応するページのプレビューで同じサイズを使用したい場合は、Use same size on desktop and mobileを選択したままにします。
- テキストバッジの場合は、WidthとHeightを別々に設定します。
- Lock aspect ratioが有効な画像バッジの場合は、SizeスライダーまたはWidthフィールドを使用します。画像の比率を保つため、高さは自動的に変わります。
デスクトップとモバイルで同じサイズを使用します。
デバイスとページの種類ごとにカスタマイズする
Section titled “デバイスとページの種類ごとにカスタマイズする”状況に応じてバッジのサイズを変えたい場合は、Customize desktop and mobile separatelyを選択します。
- DesktopまたはMobileを選択します。
- Product page sizeまたはListing pages sizeを選択します。
- その組み合わせのサイズを設定します。
- 必要に応じて、他のデバイスとページの組み合わせでも繰り返します。
| 選択 | サイズが適用される場所 |
|---|---|
| Desktop > Product page size | デスクトップの商品ページ |
| Desktop > Listing pages size | デスクトップの一覧ページ（コレクションページを含む） |
| Mobile > Product page size | モバイルの商品ページ |
| Mobile > Listing pages size | モバイルの一覧ページ（コレクションページを含む） |
デバイスとページの種類を選択し、その組み合わせのサイズを設定します。
サイズの単位を選択する
Section titled “サイズの単位を選択する”各寸法には、次のいずれかの単位を使用できます。
| 単位 | 使用する場合 |
|---|---|
| px | ピクセル単位で正確な寸法が必要な場合。 |
| % | 商品画像の利用可能な領域に対して、バッジを相対的に拡大縮小したい場合。ページの種類とデバイスごとに結果をプレビューしてください。 |
テキストバッジでは、WidthとHeightにそれぞれ単位のセレクターがあります。同じ単位にする必要はありません。
テキストバッジのサイズを調整する
Section titled “テキストバッジのサイズを調整する”テキストバッジでは、WidthとHeightの下に追加のコントロールがあります。
- Auto-fit text to badgeがオフ — Text sizeを、ピクセル単位の固定のフォントサイズとして設定します。
- Auto-fit text to badgeがオン — アプリがバッジの背景に収まるようにテキストのサイズを自動で調整し、Text sizeはパーセンテージのコントロールになります。
- Letter spacing — 文字の間隔を、ピクセル単位で広げたり狭めたりします。
Auto-fit text to badgeを有効にすると、変化するテキストがバッジの背景内に収まります。
画像バッジの縦横比を維持する、または変更する
Section titled “画像バッジの縦横比を維持する、または変更する”画像バッジでは、Lock aspect ratioがデフォルトで有効です。
- 有効のままにすると、元の縦横比を維持したまま、1つのSizeまたはWidthのコントロールで画像のサイズを変更できます。
- WidthとHeightを個別に設定する必要がある場合のみ、オフにしてください。異なる比率に変更すると、画像が引き伸ばされたり、つぶれたりすることがあります。
Lock aspect ratioを有効のままにすると、画像バッジを歪めずにサイズ変更できます。
プレビューして保存する
Section titled “プレビューして保存する”プレビューのツールバーでProduct pageとCollection pageを切り替え、Desktop viewとMobile viewの両方を確認します。必要なすべてのプレビューでバッジが問題なく表示されたら、Saveをクリックします。
次のステップ
Section titled “次のステップ”- バッジの位置を変更する — 商品画像やページの要素上の適切な場所にバッジを配置します。
- バッジのスタイルを変更する — フォント、色、枠線、視覚効果をカスタマイズします。