サイトの画像のサイズを変更するためのヒント。

縦横比は、画像の幅と高さの比率です。つまり、画像の形状を表します。

縦横比は、3:2のように幅と高さの比率で記されます。

たとえば、正方形の画像は高さと幅が同じであるため、縦横比は1:1になります。500px × 500pxの画像も、1500px × 1500pxの画像も、縦横比は1:1となります。

縦向きの画像の縦横比は、多くが2:3です。この比率は、高さが幅の1.5倍になります。こうした画像は500px × 750pxや1500px × 2250pxなどがよく見られます。

動画を見る

縦横比とSquarespace

多くのスタイル オプションでは、ブログ投稿のアイキャッチ画像、ギャラリー画像、商品など、さまざまなタイプの画像の縦横比を選択できます。

• たとえば、ブログ投稿のアイキャッチ画像に対して縦横比3:2を選択すると、ブログ ページのすべてのブログ投稿のアイキャッチ画像がその形状にトリミングされます。
• 画像はブラウザーの幅に合わせて拡大縮小されるため、正確な寸法 (750px × 500pxなど) はありませんが、形状は常に同じになります。
• 縦横比が同じ画像を揃えると、どのようにトリミングされるかを予測しやすくなります。
• 一部の画像ブロックの高さは、トリミング ハンドルを使用して変更できます。画像のトリミングの詳細については、「トリミングに関する問題のトラブルシューティング」を参照してください。

使用可能な縦横比オプションは、バージョンとテンプレートによって異なります。Brineテンプレートのブログ ページの例を以下に示します。

一部のスタイル微調整オプションでは、縦横比を無視するオプションが提供されます。この場合、画像は元の形状を維持します。たとえば、Skyeテンプレートのブログ ページでは、[画像のトリミング: なし] を選択できます。

縦横比へのトリミング

組み込みのスタイル オプションを使用する以外に、画像を特定の縦横比に手動でトリミングしたい場合があります。たとえば、同じ縦横比の商品画像を揃えると、サイト上ではすべて同じ方法でトリミングされます。

オプション1 - プリセットの図形に切り抜く

組み込みの画像エディターを使用して、画像を特定の形状にトリミングします。エディターを開いたら、トリミング ツールを使用して、プリセットされた縦横比から選択します。

ヒント: 画像をアップロードする前にこれを行いたい場合は、一部のサードパーティー製ツールにプリセットされている縦横比オプションを使用します。

オプション2 - 寸法のカスタマイズ

組み込みの画像エディターでは提供されていないカスタム縦横比に画像をトリミングするには、サードパーティーのエディターを使用します。

画像は同じ縦横比にするために同じ寸法である必要はないため、正確な寸法に合わせるよりも、特定の比率でトリミングすることをおすすめします。最適な結果を得るには、長辺に基づいて短辺をトリミングします。

• たとえば、画像が1500px × 1200pxで、縦横比を3:1にしたい場合は、短辺をトリミングして1500px × 500pxにします。
• 長辺をスケール アップしないでください。画像がぼやける可能性があります。

短辺の長さを算出するには、次のような縦横比計算ツールを使います。このサードパーティー アプリケーションは、Squarespaceサポートの範囲外であることに注意してください。

1. コンピューター上の画像のサイズを確認します。
2. 縦横比計算ツールで、左側にW1とH1を入力して、現在の縦横比を特定します。
3. 好みの比率になるまで短辺を調整します。

ページのバナー

ページのバナーには、事前に設定された縦横比やサイズはありません。これは、さまざまなブラウザーに合わせて伸縮し、形状が変化するためです。次の点に留意してください。

• バナーに画像をアップロードする前に、バナー画像の書式設定のヒントに従ってください。
• 組み込みの画像エディターを使用して画像をトリミングすることをおすすめします。バナーのトリミングに関するヘルプについては、「トリミングに関する問題のトラブルシューティング」を参照してください。
• ほとんどのテンプレートには、高さを含むバナーのサイズを変更するオプションがあります。
• MontaukテンプレートやSkyeテンプレートなど、高さが固定されているバナーの場合は、すべてのバナー画像の縦横比を同じにすると、統一感のある見た目になります。

商品画像の縦横比

商品画像を見込み客にアピールすることが重要です。そのために、ストア ページや商品詳細ページで商品画像の縦横比を設定することができます。商品画像のスタイルを設定する方法については、「商品画像」を参照してください。

商品画像がトリミングされて表示される場合は、「トリミングに関する問題のトラブルシューティング」を参照してください。

動画の縦横比

サイトに直接アップロードした動画の場合、動画の縦横比はアップロードしたファイルの縦横比と一致します。ほとんどのアップロード動画は16:9の縦横比を持つプレーヤーで表示されるため、他の縦横比を持つ動画の場合は側面に黒いバーや空白が表示されることがあります。セクションの背景にアップロードされた動画は、背景のサイズに合わせてトリミングおよびズームされます。

埋め込み動画の場合、動画ホスティング サービスのサムネイル画像によって動画の縦横比が決まります。動画ブロックを行内に配置したり、グリッド ギャラリーを使用したりすると、行が不均一になることがあります。

ギャラリー ブロックとギャラリー ページ (バージョン7.0のみ) を使用していて、動画が正しく表示されない場合は、以下のようにサイト スタイルを変更します。

• ギャラリー ブロックの場合は、[画像をトリミングする] を有効にして、動画の縦横比を統一します。
• ギャラリー ページの場合は、[縦横比] を [自動] 以外に設定します。

パーセント表示の縦横比

Brineテンプレート ファミリーのインデックス グリッド ギャラリーでは、縦横比の微調整オプションがパーセントで表示され、スライダーで調整できます。

• スライダーには0～160までの値が表示されます。
• 100に設定すると、画像が正方形になります。
• 100未満では横長になります。
• 100を超えると縦長になります。

正確な縦横比を出すには、高さを幅で割ります。以下に例を示します。

• 2:3の縦横比: 3 ÷ 2 = 1.5なので、スライダーを150までドラッグします。
• 3:2の縦横比: 2 ÷ 3 = 0.667なので、スライダーの横に66.7と入力します。

縦横比の例

以下に、一般的な縦横比とその見た目の例を示します。