成功
画像
柔軟なサイズ、トリミング、キャプション、オーバーレイ、モバイルレイアウトのコントロールを備えた単体画像を追加します。
このブロックを使うと、表示コントロールを柔軟に調整できる単体の画像を追加できます。形状、幅、トリミングの動作、キャプション、オーバーレイの処理、配置、リンクの動作を調整して、周囲のレイアウトに合わせられます。テーマコンテンツでこれがどのように機能するかの概要については、セクションとブロックに関するShopifyドキュメントをご覧ください。
このグループでは、画像そのものとその表示方法を制御します。画像関連のコントロールについてより詳しくは、画像設定をご覧ください。
まず画像を選び、その後で表示を調整します。画像スタイルは見た目の形状を変更し、最大画像幅は画像を枠内に収めるか、利用可能なスペースいっぱいに広げるかを決めます。最大画像幅を 0 に設定すると、画像は利用可能な幅全体を使用します。
複数の画像を一緒に表示する場合など、より一貫したレイアウトにしたいときは、アスペクト比が役立ちます。デフォルトの比率では画像本来の縦横比が維持されますが、固定比率にするとグリッドが整います。その一方で、表示される画像の一部がトリミングされる場合があります。
モバイルのアスペクト比は、メインの比率に従うことも、独自の設定を使うこともできます。これは、幅広いデスクトップ向けのトリミングが、小さな画面では短すぎたり窮屈に感じられたりする場合に便利です。
リンクを追加すると、画像をクリックできるようになります。新しいタブで開く設定は、外部の移動先やダウンロードに特に便利です。
固定アスペクト比では、画像の端がトリミングされることがあります。画像に顔、商品詳細、テキストが含まれる場合は、デスクトップとモバイルの両方で確認してください。
キャプション設定
Section titled “キャプション設定”画像にラベル、短い説明、またはクレジット表記が必要な場合は、キャプションを使用します。画像の上または下に配置でき、その役割に合わせて配置とテキストサイズを調整できます。
短いキャプションが最も適しています。キャプションをより強調したい場合はテキストサイズを大きくできますが、画像が主役であることを保つため、簡潔にしてください。
オーバーレイ設定
Section titled “オーバーレイ設定”オーバーレイ設定では、画像の上に単色またはグラデーションを重ねられます。これにより、より強いビジュアルスタイルを作ったり、情報量の多い写真でもキャプションのコントラストを高めたりできます。
不透明度は、オーバーレイが画像にどの程度強く影響するかを制御します。不透明度を下げると画像の詳細がより保たれ、高くするとよりドラマチックな色味の効果になります。
これらの設定では、デスクトップとモバイルでこのブロックが利用可能なスペース内にどのように配置されるかを制御します。特に、画像が全幅を占めない場合に重要です。
単体画像では、中央配置が最も無難な選択肢になることが多いです。左寄せや右寄せは、画像がより編集的なレイアウトの一部である場合や、近くのコンテンツと組み合わせる場合によく合います。
標準ブロック設定
Section titled “標準ブロック設定”これらのコントロールでは、枠線色やテキスト色を含む、このブロックの通常の色を上書きできます。画像を周囲のレイアウトから際立たせたい場合や、キャプションにより明確なコントラスト処理が必要な場合に使用してください。詳しくは、カラー設定をご覧ください。
表示コントロールを使うと、デバイス別にこのブロックの表示/非表示を切り替えられます。これは、デスクトップとモバイルレイアウトで別々の画像表現を使いたい場合に便利です。詳しくは、表示設定をご覧ください。
エディター設定
Section titled “エディター設定”エディター設定では、エディターのサイドバーでこのブロックをわかりやすくラベル付けできます。特に、同じ領域に複数の画像ブロックがある場合は、カスタムのエディタータイトルが役立ちます。ブロック編集インターフェースについては、テーマエディターに関するShopifyドキュメントをご覧ください。
使用上の注意
Section titled “使用上の注意”- デスクトップとモバイルを個別に確認します。 レイアウト、配置、表示、メディアの動作はビューポートによって異なる場合があるため、公開前に両方の表示を確認してください。
- 可能であれば、フォールバックのスタイルを保ちます。 空白またはデフォルトスタイルの色設定は、通常、周囲の見た目を維持します。一方で、明示的な色、グラデーション、メディアの上書きは、ブロックをより独立した印象にします。
- 別々のメディアは意図的な選択として扱います。 デスクトップ用とモバイル用で異なる画像を使うと、フィット感を改善できますが、トリミング、読み込み、フォールバック動作、読みやすさが変わることもあります。
- 重要な画像コンテンツに注意します。 画像に顔、商品詳細、テキストが含まれる場合は、選択したトリミングで、両方の画面サイズで被写体が読みやすく保たれていることを確認してください。