私たちは、Web サイトに最高の画像を表示したいと考えていることを理解しています。この記事では、サイトに完璧に表示するための画像サイズのガイドラインを示します。
このページでは
さまざまなセクションとブロックの画像サイズ
Be Yoursテーマでは、次のように特定の画像サイズをさまざまなセクションに適用することをお勧めします。
- バンドル製品: 1000 x 1100 ピクセル。
- ブログ投稿の注目の画像:
最高の外観を得るために、正方形、横長、横長の画像を選択できます。このような場合の推奨サイズは次のとおりです。
- 正方形: 少なくとも 2000 x 2000 ピクセル
- 風景: 少なくとも 2400 x 1600 ピクセル
- ワイド: 少なくとも 2400 x 1350 ピクセル
ブログ投稿の注目の画像を設定するには、Shopify 管理ダッシュボードで[オンライン ストア] > [ブログ投稿]に移動します。次に、投稿をクリックし、右側の列で[注目の画像]ボックスを見つけて画像を追加します。
Web サイトでは、ブログ投稿の注目画像は、ブログ ページの投稿サムネイル画像と投稿ページのトップ バナーの 2 か所に表示されます。
投稿のサムネイル画像:
投稿のトップバナー:
- コレクションの注目画像:
推奨される画像のピクセル サイズは、ブログ投稿の注目の画像と同様です。
コレクションのアイキャッチ画像を設定するには、Shopify 管理ダッシュボードで[製品] > [コレクション]に移動します。次に、コレクションをクリックし、右側の列で[コレクション画像]ボックスを見つけて画像を追加します。
- 画像比較:1920×960ピクセル。
- テキストオーバーレイ付きの画像: 1920 x 1280 ピクセル。
- テキストを含むレイヤー画像: 1000 x 1100 ピクセル。
- ルックブック: 1500 x 750 ピクセル。
- メガメニューのプロモーション画像(ヘッダーセクション) :
推奨サイズは、次のように選択した画像の比率によって異なります。
- 正方形: 少なくとも 2000 x 2000 ピクセル
- ポートレート: 少なくとも 2000 x 2500 ピクセル
- 風景: 少なくとも 2400 x 1600 ピクセル
- ワイド: 少なくとも 2400 x 1350 ピクセル
- バナーを表示: 1920 x 1280 ピクセル。
- 外観を購入: 1000 x 1000 ピクセル。
- スライドショー: 2048 x 1365 ピクセル。
スライドショーの場合は、さまざまなデバイスで最適な画像表現を実現するために、デスクトップ バージョンとモバイル バージョンに別々の画像を挿入することを強くお勧めします。
両方のバージョンに同じ画像を適用した場合、モバイルで表示する場合、デフォルトでは画像の中心から切り取られます。画像の重要な詳細が失われないようにし、別の表示デバイスに注目するには、次のいずれかの方法を適用できます。
- デザインや写真撮影の際には、最も魅力的で関連性の高い部分を画像の中央に配置するようにしてください。
- または、 [スライドショー] > [デスクトップの高さ]または[スライドショー] > [モバイル レイアウト] > [モバイルの高さ]ドロップダウン リストで[最初の画像に適応する]オプションを選択すると、デスクトップまたはモバイルに読み込むときに元の画像を維持できます。
- タブコラージュ: 1200 x 1200 ピクセル。
- スライドショー
デスクトップ: 1920 x 1280 ピクセル。
モバイル: 1028 x 1540 ピクセル。
商品の画像サイズ
Shopify 管理者ダッシュボードの[製品]タブから、画像付きの新しい製品を追加できます。これらの製品と画像は、Beyours テーマ Web サイトの製品関連セクション ( 「注目のコレクション」 、 「注目の製品」 、 「最近見た製品」など) に表示されます。これらのセクションでは、 [画像に適応] 、 [正方形] 、 [ポートレート] 、 [ランドスケープ] 、 [ワイド]で構成される画像比率のオプションを使用して、選択した製品画像を表示できます。
これらの画像比率に基づいて、商品画像のサイズを次のように推奨します。
- 正方形: 2000 x 2000 ピクセル以上
- ポートレート: 2000 x 2500 ピクセル以上
- 風景: 少なくとも 2400 x 1600 ピクセル
- ワイド: 少なくとも 2400 x 1350 ピクセル
以上が、 Be Yoursテーマで使用される最適な画像サイズに関する推奨事項のすべてです。
同じセクション内の同様のブロック内の画像には一貫したサイズを適用する必要があることに注意することも重要です。たとえば、4 つの画像を含むスライドショー セクションを追加する場合、これら 4 つの画像が同じサイズであることを確認してください。
この記事がお役に立てば幸いです。この機能についてご不明な点がございましたら、サポートが必要なため、お気軽に弊社チームまでお問い合わせください。
"
Share:
Be Yours のカスタム JavaScript イベント リスナーとトリガー
Shopify テーマにカスタム フォントを追加する