サイトに画像を表示し、アニメーション、キャプション、リンクを追加します。

画像ブロックを使用して、ページまたはブログ投稿に画像を追加します。各画像ブロックには1つの画像が表示されます。

動画を見る

画像を追加する

画像ブロックを追加するには、次の手順に従ってください。

1. ページまたは投稿を編集し、[ブロックを追加] または挿入箇所をクリックしてから、[画像] をクリックします。ヘルプについては、「ブロックを使用してコンテンツを追加する」をご覧ください。
2. 画像ブロックの＋アイコンをクリックします。
3. コンピューターまたはモバイル端末からファイルをアップロードしたり、ライブラリーの画像を再利用したり、ストック画像を閲覧したりできます。最適な結果を得るには、500 KB未満の画像を使用してください。
4. 画像ブロック エディターを使用して、画像の置き換え、削除、編集を行います。
5. 創造エディターを使用している場合は、モバイル レイアウトも設定してください。

ヒント: 画像ブロックは、画像がアップロードされていないと公開サイトに表示されません。

モバイル端末から画像をアップロードする

Squarespaceアプリを使用して、携帯電話やその他のモバイル端末から画像を追加できます。画像をアップロードするには、次の手順に従ってください。

1. 画像ブロック エディターで、[+] をクリックし、[モバイルからアップロード] を選択します。これにより、デバイスにプッシュ通知が送信されます。
   • このサイトで初めてアップロードするときは、QRコードがコンピューターに表示されます。Squarespaceアプリをまだお持ちでない場合は、コードをスキャンしてダウンロードし、[続行] と [プッシュを送信] をクリックします。
2. デバイス上の通知をタップして、Squarespaceアプリのインポート ツールを開きます。アプリはデバイスの写真ライブラリーから画像を自動的に取得します。
   • 通知が表示されない場合は、お使いの端末の設定を確認して、Squarespaceアプリからのプッシュ通知を有効にしてください。
3. 使用する画像をタップし、[アップロード] をタップします。
4. 画像はコンピューターの画像ブロックに表示されます。Squarespaceアプリで、[置き換え] をタップして別の画像を選択するか、[完了] をタップしてアップローダーを閉じます。

ヒント: モバイルから画像をアップロードするときは、コンピューターに表示されるポップアップ ウィンドウで [トラブルシューティング] をクリックして、SquarespaceアプリをダウンロードするQRコードを再スキャンするか、プッシュ通知を再送信するオプションを探してください。

画像ブロック エディターを開く

画像ブロック エディターでは、以下のことができます。

• 画像の置き換え、削除、または編集
• 焦点の設定
• デザイン オプションの設定
• 代替テキストの追加
• ファイル名の編集
• ライトボックスの有効化または無効化
• 画像効果の追加

画像ブロック エディターを開くには、次の手順に従ってください。

1. ページまたは投稿を編集します。
2. 画像ブロックをクリックします。
3. ブロックのツールバーにある鉛筆アイコンをクリックします。

画像リンクを追加する

画像をリンクに変換するには、ブロックをクリックして強調表示し、ブロック ツールバーのリンク アイコンをクリックするか、ブロック エディターの [リンクを添付] をクリックします。クラシック エディターのほとんどのレイアウトでは、[リンクを添付] が表示される前に [画像の上] または [ボタンの上] を選択する必要があります。完了したら、ブロック エディターの外側をクリックして変更を保存します。

ライトボックスを有効にすると、クリックスルーURLが無効になることに注意してください。

クラシック エディターのレイアウト

創造エディター セクションに追加された画像ブロックには、組み込みのレイアウト オプションがありません。画像ブロックをテキスト ブロックやボタン ブロックなどの他のブロックとオーバーラップして、同様のレイアウトを作成してください。

クラシック エディターで画像ブロックを追加すると、既定でインライン レイアウトが使用されます。レイアウトを変更するには、[デザイン] タブをクリックし、以下の中から希望のレイアウトを選択します。

• インライン - 基本的な画像ブロックです。画像の下または上にオプションのキャプションが表示されます。[コンテンツ] タブでのキャプションの表示方法を設定します。
• ポスター - 画像の上にテキストを表示して、バナーやポスターのような見た目にします。
• カード - 左または右にテキスト付きの画像を表示します。通常、ブラウザー画面が狭い場合やモバイル端末の場合、または画像ブロックが列で使用されている場合、テキストは画像の下に移動します。
• オーバーラップ - 片側に画像を表示し、もう片側にテキストを表示し、部分的に画像にオーバーラップさせます。タイトルに背景色を追加すれば、ハイライト効果を演出できます。通常、ブラウザー画面が狭い場合やモバイル端末の場合、または画像ブロックが列で使用されている場合、テキストは画像の下部に移動します。
• コラージュ - 片側に画像を表示し、もう片側は背景「カード」にテキストを表示し、画像をオフセットさせたりオーバーラップさせたりします。通常、ブラウザー画面が狭い場合やモバイル端末の場合、または画像ブロックが列で使用されている場合、テキストは画像の下側の隅に移動します。
• スタック - 画像の下にテキストを表示します。

レイアウトを選択すると、ページにレイアウトのプレビューが表示されます。画像ブロックがモバイル端末でどのように表示されるかを確認するには、端末別プレビューを使用してください。

レイアウトとテキストの配置を簡単に変更する

クラシック エディターでは、クイック アクション ボタンを使用することで、エディターを開かずに画像ブロックのレイアウトとテキストの配置を変更できます。ページの編集中に画像ブロックをクリックし、鉛筆アイコンとゴミ箱アイコンの間に表示されるレイアウト ボタンまたは配置ボタンをクリックします。

画像の形状を設定する

トリミングやサイズ変更以外にも、画像ブロックの形状を変形して、画像に多様性とユニークな視覚効果を加えることができます。画像ブロック エディターの [デザイン] タブで、以下のように画像の形状を設定します。

• 角丸め半径 - 画像の角を丸めて、さりげない効果を得ます。
• 図形 - より劇的な変化を得るには、円や三角形などの図形を設定します。図形が画像の上にマスクのように表示されます。

ヒント: サイトが創造エディターをサポートしている場合は、図形ブロックを使用して、画像を使わずに単色の図形をページに追加できます。

角丸め半径

[デザイン] タブで、[角丸め半径] オプションを使用して、画像全体または個々の角丸め半径を設定します。

以下の点に留意してください。

• 角丸め半径を削除するには、編集中に変更を取り消すか、[角丸め半径] フィールドに「0」を入力します。
• [デザイン] タブに角丸め半径のオプションが表示されない場合は、[図形] が選択されていないことを確認します。

図形

[デザイン] タブで [図形] をクリックし、縦横比（1:1、2:3、または3:2）を選択してから、図形を選択します。図形を削除するには、[デザイン] タブで別のオプション（[合わせる/塗りつぶし] または [オリジナル]）を選択します。

以下の点に留意してください。

• 焦点を使用して、図形内での画像の表示方法をカスタマイズします
• 画像をライトボックスで開くように設定すると、訪問者が画像をクリックした後に、画像の元の形が表示されます。
• 円形を選択したにもかかわらず画像が楕円形として表示される場合は、組み込みの画像エディターを使用して、画像を1:1の縦横比にトリミングします。

画像のサイズを変更する

画像ブロックのサイズ変更や切り抜きは、さまざまな方法で行うことができます。画像のサイズを変更するには、主に以下のような方法があります。

• 創造エディター - 角や側面をクリックしてドラッグし、[デザイン] タブの [塗りつぶし] オプションを使用してトリミングや形状を整えます。
• クラシック エディター - ブロックのサイズを変更します。

すべての画像ブロックは、画像エディターを使用して元の画像をトリミングすることもできます。これは永続的な変更となります。

クラシック エディターでサイズを変更する

クラシック エディターでは、どちらかの側にブロックを追加することで画像ブロックのサイズを小さくできます。スペース調整ブロックを使用するのが最も一般的な方法です。

ブロックを使用してサイズを変更するには、次の手順に従ってください。

1. 挿入箇所をクリックしてスペース調整ブロックを追加します。
2. スペース調整ブロックを画像ブロックの左または右にドラッグします。
3. サイズ変更ハンドルをクリックしてドラッグします。

以下の点に留意してください。

• 画像を中央に配置するには、両側に同じサイズのスペース調整ブロックを追加します。
• クラシック エディターの [インライン] レイアウトと [ポスター] レイアウトでは、 トリミング ハンドルをクリックしてドラッグし、画像を垂直方向にトリミングします。これにより、画像の幅はそのままで、高さが変更されます。
• クラシック エディターのスタイル設定では、[カード]、[オーバーラップ]、[コラージュ] の各レイアウトにサイズ変更オプションがあり、次の手順に従ってサイズを変更します。

これらの変更を行うと、そのレイアウトのすべての画像ブロックに影響することに注意してください。

ヒント: 画像ブロックに自動的に適用されるパディングを削除するには、カスタム コードを追加してください。詳細については、Squarespace Forumのこちらの投稿をご覧ください。

ただし、カスタム コードの変更は弊社サポートの範囲外です。つまり、コード ベースのソリューションのセットアップやトラブルシューティングはサポート対象外です。

ブロックを塗りつぶす

創造エディターとクラシック エディターの [インライン] レイアウトでは、画像がブロックのエリアを塗りつぶして表示されるように設定できます。他のクラシック レイアウトは、自動的にブロック エリアを塗りつぶして表示されます。

• 創造エディター - [デザイン] タブの [塗りつぶし] オプションを使用して、画像がコンテナーを塗りつぶして表示されるようにします。[合わせる] を選択すると、画像はパディングで囲まれます。
• クラシック エディター - [デザイン] タブの [ストレッチ] トグルをオンに切り替えます。
• 画像が画像ブロック エリアよりも広い場合、収まるように画像が縮小されます（トリミングは行われません）。

以下の点に留意してください。

• 画像を引き伸ばすと、画質に影響を及ぼす可能性があります。
• 引き伸ばさなくても良いように、幅が1500～2500ピクセルの画像をアップロードすることをおすすめします。

アニメーションと画像効果を追加する

以下の方法で画像にちょっとしたアニメーションを加え、サイトの視覚的な魅力を向上させることができます。

• 創造エディター - サイト スタイルでサイト全体のアニメーションを有効にしたり、画像効果を追加したりできます。
• クラシック エディター - アニメーション化する各画像ブロックの [デザイン] タブで ブロック アニメーションを有効にします。

テキストを追加する

クラシック エディターの画像ブロックにはキャプション オプションが組み込まれていますが、創造エディターにはより高い汎用性があります。

ヒント: アクセシビリティと SEO を向上させるために、すべての画像に代替テキストを追加することも推奨します。 画像にアクセスしやすくする方法については、「音声、画像、動画にアクセスしやすくする」を参照してください。

創造エディター

創造エディター セクションでは、テキスト ブロックを使用して、画像ブロックに隣接またはオーバーレイするテキストを追加します。

クラシック エディター

クラシック エディター セクションでは、テキスト フィールドをクリックして画像にテキストを追加します。「画像の説明を追加」や「印象づけよう」などのプレースホルダー テキストが表示される場合があります。

以下の点に留意してください。

• タイトルは2～3語に抑えます。サブタイトルとキャプションには1つまたは2つの文を使用します。これにより、文字と画像のバランスが取れます。また、モバイル端末でテキストが見やすくなります。
• タイトル テキストに改行を追加するには、、Shift + Enter を押します。
• 太字、斜体、リンクの追加などの書式変更を行うには、テキストを強調表示し、ツールバーを使用します。
• インライン レイアウトとスタック レイアウトを除き、モバイル端末や幅の狭いブラウザーでは、テキストは画像に対して設定された相対幅を維持します。
• 初めてインライン レイアウトとその他のレイアウトの間で切り替えるときは、画像のテキストを再入力する必要があります。

インライン レイアウトは1つの基本的なキャプションをサポートし、他のレイアウトはタイトルおよびサブタイトルのフィールドをサポートします。

フォントと色

創造エディター

創造エディター セクションでは、[デザイン] タブの [オーバーレイ] トグルをオンに切り替えることで、画像ブロックにオーバーレイの色を追加できます。オーバーレイは、画像の上にカラー フィルターを適用し、画像の色合いをわずかに変化させます。

オーバーレイの色と透明度を選択するには、カラー ピッカーを使用します。オーバーレイに視覚効果を追加するには、[ブレンド モード] をクリックします。これらの視覚効果は、閲覧者のブラウザーに応じて、視覚的にわずかに異なってレンダリングされます。

クラシック エディター

クラシック エディターで画像ブロックのフォントと色のスタイルを設定する方法は、サイトのバージョンによって異なります。

インライン画像ブロックには、サイト スタイルにおける独自のデザイン微調整オプションはありません。キャプションのフォントのスタイル、色、サイズの詳細については、「画像キャプションのスタイル設定」を参照してください。

次のステップ

画像ブロックを設定した後、以下のことが可能になります。

• ブロックをドラッグ アンド ドロップして移動したり、列や行を作成したりする。
• 画像エディターを使用して、画像のトリミング、回転、画像フィルターの追加を行う。
• ブロックを削除する。

画像に関する問題のトラブルシューティングについては、「Webで表示する画像の書式設定を行う」を参照してください。