画像の追加とサイズ変更

魅力的な視覚要素をサイトに追加し⁠、表示サイズが拡大または縮小されるように調整します⁠。

最終更新日 2025年1月10日

画像を使用すると⁠、テキストを分割したり⁠、商品やポ⁠ートフ⁠ォリオを強調したり⁠、ブランドの個性をアピ⁠ールしたりできます⁠。サイトのペ⁠ージに画像を追加した後⁠、その画像のサイズを変更して⁠、ペ⁠ージ上の画像を拡大または縮小できます⁠。

また⁠、Squarespaceサイトはすべてレスポンシブ デザインを備えています⁠。つまり⁠、各訪問者がサイトの訪問に使用するデバイスに応じて⁠、画像のサイズが自動的に変更されます⁠。このガイドでは⁠、画像の追加⁠、サイズ変更⁠、カスタマイズのためのさまざまな方法を紹介します⁠。

動画を見る

画像を追加

サイトに画像を追加する方法は多数あります⁠。どのデバイスでも画像の見栄えがよくなるように⁠、必ずフ⁠ォ⁠ーマ⁠ットのガイドラインに従⁠ってください⁠。以下が可能です⁠。

画像のア⁠ップロ⁠ードのトラブルシ⁠ュ⁠ーテ⁠ィング

画像のア⁠ップロ⁠ードが機能しない場合は⁠、ブラウザまたはデバイスに問題がないかご確認ください⁠。ブラウザ⁠ーのトラブルシ⁠ュ⁠ーテ⁠ィング手順に従⁠って⁠、もう一度試してみることをおすすめします⁠。

画像の再利用

サイトにすでにア⁠ップロ⁠ードした画像であれば⁠、どれでも再利用できます⁠。アセ⁠ット ライブラリ⁠ーを使用すると⁠、ア⁠ップロ⁠ードされたすべての画像を表示および管理できます⁠。詳細については⁠、「⁠画像と動画の管理と再利用⁠」をご参照ください⁠。

スト⁠ック画像

独自の画像がない場合は⁠、UnsplashGetty Imagesとの提携を利用してスト⁠ック画像を追加できます⁠。また⁠、スト⁠ック画像やア⁠ップロ⁠ードした画像をサイトの他の領域で再利用することもできます⁠。

Squarespaceアプリで画像を追加する

Squarespaceアプリでは⁠、ギ⁠ャラリ⁠ー セクシ⁠ョンや画像ブロ⁠ックなど⁠、サイトの領域のうち画像をサポ⁠ートしている任意の領域に画像を追加できます⁠。画像の追加をサポ⁠ートするサイト上の一部のペ⁠ージは⁠、アプリでの編集中に他の方法で制限される場合があります⁠。

画像を追加する方法は次のとおりです⁠。

  1. [⁠+⁠] または [⁠画像を追加⁠] をタ⁠ップします⁠。
  2. 画像領域に応じて⁠、またiOSデバイスとAndroidデバイスのどちらを使用しているかに応じて⁠、次のことができます⁠。
    • 新しい写真を撮る
    • 写真ライブラリ⁠ーから画像をア⁠ップロ⁠ードする
    • フ⁠ァイルから画像をア⁠ップロ⁠ードする
    • 画像を再利用する
  3. 画像をタ⁠ップして⁠、タイトル⁠、説明⁠、クリ⁠ックスル⁠ーURLを追加します⁠。

使用しているデバイスによ⁠っては⁠、次のヒントを活用することもできます⁠。

  • iOSでは⁠、画像ブロ⁠ックにア⁠ップロ⁠ードする場合⁠、スト⁠ック画像を検索して追加できます⁠。
  • iPadでは⁠、Split Viewを使用して⁠、写真からSquarespaceアプリに画像をドラ⁠ッグ アンド ドロ⁠ップできます⁠。
  • マイ ライブラリ⁠ーに画像を追加すると⁠、パソコンで再利用できます⁠。iOSでは⁠、商品エデ⁠ィタ⁠ーで画像を再利用することもできます⁠。詳細については⁠、「⁠画像の再利用⁠」を参照してください⁠。

画像のサイズを変更する

画像を追加した後⁠、ペ⁠ージ上で画像の拡大や縮小ができます⁠。たとえば⁠、画像が大きすぎると⁠、ペ⁠ージの他のコンテンツを隅に追いや⁠ってしまう可能性があります⁠。また⁠、ロゴが小さすぎて読みにくくなる場合もあります⁠。画像のサイズを変更する方法は⁠、画像をサイトにどのように追加したかによ⁠って異なります⁠。

ブロ⁠ック

ブロ⁠ックのサイズを変更する方法は⁠、エデ⁠ィタ⁠ーによ⁠って異なります⁠。

多くのブロ⁠ックには⁠、画像のサイズと形状をさらにカスタマイズするためのオプシ⁠ョンが他にもあります⁠。

ペ⁠ージとセクシ⁠ョン

サイトの他の領域

  • バナ⁠ー画像 - 背景画像を含むペ⁠ージ セクシ⁠ョンの高さまたは幅を変更します⁠。モバイル端末では⁠、これらの画像は常にトリミングされます⁠。
  • サイトのロゴ - ロゴの位置とサイズを変更します⁠。

高度な画像オプシ⁠ョン

基本の枠を超えて⁠、インタラクテ⁠ィブな画像⁠、アニメ⁠ーシ⁠ョン⁠、画像の形状を活用してみまし⁠ょう⁠。

ヒント

元の画像フ⁠ァイルの寸法を変更するには⁠、サ⁠ードパ⁠ーテ⁠ィ⁠ーの画像編集ソフトウ⁠ェアを使用することをおすすめします⁠。たとえば⁠、600px x 600pxでア⁠ップロ⁠ードされた画像を400px x 400pxにしたい場合⁠、デバイス上で画像を編集してから⁠、再度サイトにア⁠ップロ⁠ードします⁠。

ソ⁠ーシ⁠ャル メデ⁠ィア用の画像のサイズを変更する

Squarespaceの外部やソ⁠ーシ⁠ャル メデ⁠ィア プラ⁠ットフ⁠ォ⁠ームで使用するために画像を特定のサイズに変更したりトリミングしたりする場合は⁠、Squarespaceの無料の画像リサイザ⁠ーを使用してください⁠。

複数の⁠.jpgまたは⁠.pngフ⁠ァイルをア⁠ップロ⁠ードすることができます⁠。ア⁠ップロ⁠ードした後⁠、ご希望のサイズを選択してください⁠。Instagram⁠、Facebook⁠、YouTube⁠、X (⁠旧Twitter⁠)⁠、Snapchatで使用するプリセ⁠ット サイズを選択できるほか⁠、他の標準的な縦横比も選択できます⁠。

画像のサイズを変更した後⁠、右上のダウンロ⁠ード アイコンをクリ⁠ックして⁠、画像を⁠.zipフ⁠ァイルでダウンロ⁠ードします⁠。新しい画像は元のバ⁠ージ⁠ョンのフ⁠ァイル形式を保持します⁠。

備考

画像リサイザ⁠ーは⁠、ソ⁠ーシ⁠ャル メデ⁠ィア用にデバイスから直接画像をア⁠ップロ⁠ードおよびサイズ変更するためのツ⁠ールです⁠。Squarespaceサイトにすでにア⁠ップロ⁠ードした画像を使用したり⁠、リサイザ⁠ーからサイトに画像を転送したりすることはできませんが⁠、サイズを変更した画像は⁠、ダウンロ⁠ードしてからサイトにア⁠ップロ⁠ードすることができます⁠。

次のステ⁠ップ

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

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

  • Squarespace Expertを雇う

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