魅力的なビジュアルをサイトに追加し、表示サイズが拡大または縮小されるように変更します。

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

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

動画を見る

画像を追加

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

• 画像ブロックを使用して画像をページまたは投稿に追加する。
• サイトのロゴ、ソーシャル共有ロゴ、およびファビコンを追加して、ブランディングを一貫性のある強力なものにする。
• ギャラリー セクションがあるページに複数の画像を追加する。
• ギャラリー ブロックを使用して、サイトの他の領域に複数の画像を表示する。
• 商品画像をアップロードして商品のさまざまなスタイルや角度を表示し、商品ブロックを使用してサイトのさまざまな部分に表示する。
• ページの上部にバナー画像を追加して、ページの雰囲気を設定する。
• Instagramブロックを使用して、Instagramフィードから最新の画像を表示する。
• アイキャッチ画像を使用して、ブログ投稿やイベントなどのコレクション アイテムを表現する。要約ブロックを使用して、サイトの他のエリアにそれらのアイキャッチ画像を表示する。

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

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

画像の再利用

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

ストック画像

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

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

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

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

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

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

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

画像のサイズを変更する

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

ブロック

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

• 創造エディターの場合 - クリックしてドラッグすると、ページ上でブロックのサイズを直接変更できます。
• クラシック エディターの場合 - ブロックの横に他のブロックを追加して、ブロックの幅を小さくします。たとえば、画像ブロックの隣にスペース調整ブロックを追加すると、画像ブロックのサイズと幅が半分になります。その後、スペース調整ブロックの幅を変更して、画像ブロックを大きくしたり小さくしたりできます。

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

• 画像ブロック - クラシック エディターでは、トリミング ハンドルを使用してインライン ブロックとポスター ブロックの画像ブロックの高さを変更します。
• ギャラリー ブロック -レイアウトに応じて、画像のトリミングやサイズ変更ができます。
• 要約ブロック - デザイン設定を使用して画像の表示方法を変更します。
• Instagramブロック - 設定を使用してデザインを選択し、縦横比を変更します。

ページとセクション

• ギャラリー セクション - 画像が意図通りに表示されるようにギャラリーのスタイルを設定します。別のレイアウトを使用してみることもできます。
• ポートフォリオ ページ - ポートフォリオ セクションのスタイルを設定して、画像の表示形式を変更します。
• ストア ページ - ストア ページのスタイルを設定して、縦横比と商品画像の幅を変更します。
• サイトがバージョン 7.0 の場合は、ギャラリー ページやカバー ページに画像を追加することもできます。一部のバージョン 7.0 テンプレートは、サイト全体の背景画像をサポートしています。画像のサイズを変更する方法については、テンプレートのガイドを参照してください。

サイトの他の領域

• バナー画像 - 設定を使用してバナーの高さまたは幅を変更します。モバイル端末では、バナーは常にトリミングされます。
• サイトのロゴ - ロゴの位置とサイズを変更します。

高度な画像オプション

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

• 画像に代替テキストを追加すると、画像が検索結果に表示されやすくなり、またスクリーン リーダーを使用する訪問者がサイトにアクセスしやすくなります。
• 組み込みの画像エディターで画像を編集して、完璧な外観を実現します。たとえば、トリミング、回転、フィルターの追加などができます。
• ライトボックスで開く画像を設定して、他のコンテンツから目立たせます。
• クリックスルーURL を使用して、画像をリンクに変換します。
• 訪問者が画像上にカーソルを移動したときに、ホバーの効果を使用して詳細情報を表示します。
• 画像の形状を使用して、画像に多様性やユニークな視覚効果を追加します。

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

次のステップ

• Squarespaceでの画像の使用に関するチュートリアルについては、「画像に関するすべて」動画シリーズをご覧ください。
• 訪問者にさらに動的なエクスペリエンスを提供するために、サイトに動画を追加することもできます。
• 画像にアクセスしやすくする方法については、「音声、画像、動画にアクセスしやすくする」をご覧ください。