成功
画像設定
画像のスタイル、サイズ、トリミング、モバイルレイアウト、リンクを1か所で管理します。
これらの設定を使って、この画像グループが利用できる場所で画像の見た目、収まり方、動作を調整します。画像の選択、形状と幅の調整、デスクトップとモバイルでのクロップ設定、さらに必要に応じてクリック可能にできます。テーマ設定の編集方法の概要については、テーマエディターに関するShopifyドキュメントをご覧ください。
これらのコントロールの視覚的な概要については、画像設定リファレンスをご覧ください。
まず、配置されるスペースにすでに合う画像を選びます。横長のファイルはバナーや横方向のレイアウトに最適で、正方形や縦長の画像は、より狭いコンテンツ領域で自然に見えることがよくあります。
画像にテキスト、ロゴ、または被写体がきっちり収まった構図が含まれる場合は、アスペクト比の設定を変更したあとにもう一度確認してください。クロップによって、端に近い重要な要素が切れることがあります。
画像スタイルは、画像全体の見た目を変更します。ニュートラルな見た目にするにはデフォルトのスタイル、より柔らかい印象にするには角丸、画像が中央揃えで円形フレーム内に収まるほどシンプルな場合は円を使用します。
最大画像幅は、利用可能なスペース内で画像をどれだけ大きく表示できるかを制御します。これを 0 にすると、画像は利用可能な幅いっぱいまで広がります。これは大きなビジュアル領域で便利です。値を下げると、テキストや他のコンテンツの横でも画像をよりコンパクトでバランスよく保てます。
アスペクト比
Section titled “アスペクト比”アスペクト比は、画像フレームの形状を制御します。 Default のままにすると画像本来の比率が保持され、固定比率にすると異なる画像間でもより一貫したレイアウトになります。
複数の画像をきれいに揃えたい場合や、より意図的な視覚リズムを作りたい場合は、固定比率を使用します。横長やワイドスクリーンの比率は幅のある画像に適しており、正方形や縦長の比率は小さなコンテンツ領域により構造的な印象を与えます。
固定アスペクト比では、画像の任意の側がクロップされることがあります。重要な位置が端に近い場合は、公開前に結果をプレビューしてください。
モバイル比率
Section titled “モバイル比率”モバイルのアスペクト比を使うと、デスクトップ表示を変えずに小さな画面向けに画像の形状を調整できます。横長のデスクトップクロップが浅すぎたり、スマートフォンでは不自然に見えたりする場合に便利です。
モバイルオプションを Default のままにすると、メインのアスペクト比が使用されます。小さな画面でより縦方向の余白が必要な場合や、よりシンプルなクロップにしたい場合は、別のモバイル比率を選択してください。
画像をクリック可能にするためのリンクを追加できます。これは、プロモーション用のグラフィック、特集コンテンツ、または特定の場所につなげたいブランドビジュアルに便利です。リンク付き画像は、周囲のコンテンツから遷移先が明確に伝わる場合に最適です。
新しいタブで開くオプションは、外部先など、閲覧体験を向上させる場合にのみ使用してください。ほとんどの内部ナビゲーションでは、同じタブで開くほうが自然です。
使用上の注意
Section titled “使用上の注意”- 適切な元画像を選ぶ。 すでに想定レイアウトに合う画像から始めると、強いクロップは不要になります。
- サイズと幅のコントロールのバランスを取る。 アスペクト比の変更だけに頼るのではなく、画像が大きすぎると感じたら最大幅を調整してください。
- モバイルでのクロップを確認する。 デスクトップの画像が横長であったり、重要な焦点が含まれていたりする場合は、特に小さな画面を個別に確認してください。
- デスクトップとモバイルの設定を比較する。 クロップ、配置、表示、メディアの各オプションを変更したときは、表示結果が異なる場合があるため、両方のビューポートサイズを確認してください。
- 必要に応じてフォールバックのスタイルを維持する。 画像エリアにテーマの標準の見た目と動作を保たせたい場合は、空白、透明、またはデフォルトスタイルの値をそのままにしておきます。
- 上書きは意図的に使う。 ローカルの画像エリアを周囲のコンテンツから際立たせたい場合にのみ、明示的な色、グラデーション、または別のメディアを選択してください。
- 重要なコンテンツを保護する。 端から端までテキストやロゴがある画像、またはきっちりした構図の画像には、クロップが適切に機能することを確認していない限り固定比率を使わないでください。