焦点を使用して画像の中心位置を設定する

手動で焦点を設定して⁠、画像の中心位置を設定します⁠。

最終更新日 2025年1月03日

サイト上の多くの画像エリアには⁠、焦点と呼ばれる中心設定機能が組み込まれています⁠。焦点機能は画像の焦点を設定するもので⁠、画像の中心位置を制御できます⁠。

焦点がある画像

ほとんどの画像で焦点を調整できます⁠。

バ⁠ージ⁠ョン7⁠.1では⁠、次の焦点を調整できます⁠。

  • 画像ブロ⁠ック
  • ギ⁠ャラリ⁠ー セクシ⁠ョン
  • アイキ⁠ャ⁠ッチ画像
  • セクシ⁠ョンの背景画像

バ⁠ージ⁠ョン7⁠.1では⁠、次の焦点を調整できます⁠。

  • 画像ブロ⁠ック
  • ギ⁠ャラリ⁠ー ブロ⁠ック
  • ギ⁠ャラリ⁠ーペ⁠ージ
  • アイキ⁠ャ⁠ッチ画像
  • バナ⁠ー画像の大部分

備考

商品のアイキ⁠ャ⁠ッチ画像の焦点は編集できません⁠。詳細については⁠、「⁠商品のアイキ⁠ャ⁠ッチ画像を変更する⁠」をご参照ください⁠。

焦点は⁠、次の場合は最適化されません⁠。

  • サイト スタイルにア⁠ップロ⁠ードされたバ⁠ージ⁠ョン7⁠.0の背景画像 - これらの画像には焦点がありません⁠。画像の焦点とトリミングを調整するには⁠、[⁠位置⁠] と [⁠サイズ⁠] のサイト スタイル微調整オプシ⁠ョンを使用します⁠。
  • パララ⁠ックス スクロ⁠ールがある画像 - これらの画像には焦点があります⁠。ただし⁠、パララ⁠ックス スクロ⁠ールの仕組み上⁠、変更しても画像の位置にはそれほど大きく影響しない場合があります⁠。特に⁠、短くて幅の広い画像の場合にこの傾向が顕著です⁠。
  • サイトの任意の領域に動画を追加します⁠。

ヒント

他の組み込みツ⁠ールを使用して⁠、画像の切り抜きやサイズ変更ができます⁠。

焦点を設定する

  1. ブロ⁠ック⁠、セクシ⁠ョン⁠、または画像を開きます⁠。
  2. 画像にカ⁠ーソルを合わせると⁠、焦点が小さな円のように表示されます⁠。この例ではペ⁠ージのアイキ⁠ャ⁠ッチ画像を使用していますが⁠、プロセスはどの焦点でも同様です⁠。
The_focal_point_in_the_center_of_the_image.png
  1. 焦点をクリ⁠ックしてドラ⁠ッグし⁠、中央の焦点エリアを設定します⁠。
The_focal_point_moved_to_the_top_of_the_image.png

焦点によ⁠って設定された領域が⁠、画像の中心として表示されるようになります⁠。[⁠保存⁠] をクリ⁠ックしなくても⁠、新しい焦点は自動的に新しい位置に保存されます⁠。

ヒント

一部の画像では⁠、焦点を画像の中心に非常に近い位置に設定しようとすると⁠、焦点が画像の中心に移動することがあります⁠。これは予期されたものであり⁠、中心からの移動によ⁠って視覚的な違いが生じない場合にのみ発生します⁠。

その他のヘルプ

画像のサイズと形状

画像の高さと幅⁠、および画像が格納されるコンテナ⁠ーの形状は⁠、焦点が持つ効果の程度に大きく影響します⁠。

たとえば⁠、正方形として表示するように設定されている画像ブロ⁠ックに横向きの画像を追加した場合⁠、焦点に横方向の変更を加えると大きな違いが生じます⁠。画像はコンテナ⁠ーよりも幅が広いため⁠、どちらの側にも中心位置を再設定する余地があります⁠。

正方形のコンテナーに横長の画像

一方⁠、画像のコンテナ⁠ーと元の画像の基本的な形状とサイズが同じであれば⁠、焦点を移動しても大きな違いはありません⁠。

ヒント

画像ブロ⁠ックのコンテナ⁠ーの高さを調整するには⁠、トリミング ハンドルを使用します⁠。

横長のコンテナーに横長の画像

ギ⁠ャラリ⁠ーの画像

  • メイン ギ⁠ャラリ⁠ー ペ⁠ージまたはギ⁠ャラリ⁠ー セクシ⁠ョン エデ⁠ィタ⁠ーで焦点を調整できます⁠。微調整するには⁠、イメ⁠ージ エデ⁠ィタ⁠ーを使用します⁠。
  • バ⁠ージ⁠ョン7⁠.0では⁠、ギ⁠ャラリ⁠ー ブロ⁠ックを設定してギ⁠ャラリ⁠ー ペ⁠ージから画像を取得する場合⁠、ギ⁠ャラリ⁠ー ペ⁠ージ内で焦点を変更します⁠。

画像表示

画像がぼやけたり歪んだりする場合は⁠、次のようにします⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

焦点を使用して画像の中心位置を設定する