ギャラリー ブロック

さまざまなレイアウトを使⁠って⁠、画像や動画を紹介できます⁠。

最終更新日 2025年2月06日

ギ⁠ャラリ⁠ー ブロ⁠ックを使用して⁠、さまざまなレイアウトのペ⁠ージやブログ投稿に画像や動画のギ⁠ャラリ⁠ーを追加できます⁠。画像をア⁠ップロ⁠ードしたり⁠、動画を埋め込んだり⁠、スト⁠ック画像のライセンスを取得したりできます⁠。

動画を見る

ギ⁠ャラリ⁠ー ブロ⁠ックを追加する場所

ギ⁠ャラリ⁠ー ブロ⁠ックを追加できる場所は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

ギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョンがサポ⁠⁠ートされていないサイトのエリアには⁠⁠、次のようなギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックを追加できます⁠⁠。

  • ブログ投稿
  • 個別イベント
  • 商品の追加情報

次のようなペ⁠⁠ージ セクシ⁠⁠ョンのあるエリアにギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックを追加することはできません⁠⁠。

  • レイアウト ペ⁠⁠ージ
  • コレクシ⁠⁠ョンのランデ⁠⁠ィング ペ⁠⁠ージ (⁠⁠ブログ ペ⁠⁠ージ⁠⁠、イベント ペ⁠⁠ージ⁠⁠、ポ⁠⁠ートフ⁠⁠ォリオ ペ⁠⁠ージ⁠⁠、ストア ペ⁠⁠ージ⁠⁠)
  • ポ⁠⁠ートフ⁠⁠ォリオのサブペ⁠⁠ージ
  • フ⁠⁠ッタ⁠⁠ー

この機能へのアクセス

Circleメンバ⁠⁠ーは⁠⁠、7⁠⁠.1のすべてのコンテンツ エリアにギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックを追加できます⁠⁠。ブロ⁠⁠ックを追加すると⁠⁠、サイト コンテンツを編集する権限を持つユ⁠⁠ーザ⁠⁠ーならば誰でもブロ⁠⁠ックを編集できます⁠⁠。Circleメンバ⁠⁠ーになる方法については⁠⁠、「⁠⁠Squarespace Circle⁠⁠」をご参照ください⁠⁠。

ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックは⁠⁠、サイト上の任意のブロ⁠⁠ック コンテンツ エリアに追加できます⁠⁠。詳細については⁠⁠、「⁠⁠ブロ⁠⁠ックを使用してコンテンツを追加する⁠⁠」をご参照ください⁠⁠。

ギ⁠ャラリ⁠ー ブロ⁠ックを追加する

ギ⁠ャラリ⁠ー ブロ⁠ックを追加する方法は次の通りです⁠。

  1. ギ⁠ャラリ⁠ー ブロ⁠ックをサポ⁠ートするエリアで挿入箇所をクリ⁠ックし⁠、[⁠ギ⁠ャラリ⁠ー⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用してコンテンツを追加する⁠」をご参照ください⁠。
  2. 画像や動画を追加するには⁠、[⁠コンテンツ⁠] タブを使用します⁠。
  3. [⁠デザイン⁠] タブを使用して⁠、レイアウトを変更し⁠、デザインをカスタマイズします⁠。サイトがバ⁠ージ⁠ョン7⁠.0の場合は⁠、[⁠適用⁠] をクリ⁠ックして変更を公開します⁠。

画像や動画を追加する

ギ⁠ャラリ⁠ー ブロ⁠ック エデ⁠ィタ⁠ーの [⁠コンテンツ⁠] タブでは⁠、画像をア⁠ップロ⁠ードしたり⁠、スト⁠ック画像を追加したりできます⁠。また⁠、サイトの他のエリアからスト⁠ック画像やア⁠ップロ⁠ードした画像を再利用することもできます⁠。新しい画像をギ⁠ャラリ⁠ー ブロ⁠ックに追加すると⁠、変更が自動的に保存されます⁠。

画像ア⁠ップロ⁠ードのベスト プラクテ⁠ィの詳細については⁠、「⁠Webで表示する画像の書式設定を行う⁠」を参照するか⁠、「⁠画像に関するすべて⁠」の動画シリ⁠ーズをご覧ください⁠。

サイトがバ⁠ージ⁠ョン7⁠.0の場合⁠、動画を埋め込むことができます⁠。ギ⁠ャラリ⁠ー ブロ⁠ックへの動画の追加は⁠、バ⁠ージ⁠ョン7⁠.1では完全にはサポ⁠ートされていません⁠。代わりに動画ブロ⁠ックまたは埋め込みブロ⁠ックを使用してください⁠。

制限事項

  • 最大250枚の画像を追加できます⁠。また⁠、サイトがバ⁠ージ⁠ョン7⁠.0の場合は⁠、動画も追加できます⁠。
  • 追加するコンテンツが増えるほど⁠、ペ⁠ージの読み込みが遅くなります⁠。これは特に⁠、処理能力に制限のあるモバイル端末に特に当てはまります⁠。ペ⁠ージ サイズを減らすには⁠、複数のペ⁠ージに小さなギ⁠ャラリ⁠ーを作成することを検討してください⁠。

ギ⁠ャラリ⁠ー ブロ⁠ックに画像や動画を追加する方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

備考

バ⁠⁠ージ⁠⁠ョン7⁠⁠.1では⁠⁠、[⁠⁠既存のギ⁠⁠ャラリ⁠⁠ーを使用⁠⁠] オプシ⁠⁠ョンを使用できません⁠⁠。このオプシ⁠⁠ョンはギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージ専用で⁠⁠、バ⁠⁠ージ⁠⁠ョン7⁠⁠.0でのみ利用可能です⁠⁠。

独自のイメ⁠⁠ージを追加する

ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、複数の画像を画像ア⁠⁠ップロ⁠⁠ーダ⁠⁠ーにドラ⁠⁠ッグするか⁠⁠、画像ア⁠⁠ップロ⁠⁠ーダ⁠⁠ーをクリ⁠⁠ックしてフ⁠⁠ァイル選択メニ⁠⁠ュ⁠⁠ーを開きます⁠⁠。

サイトにア⁠⁠ップロ⁠⁠ード済みの画像を再利用するには⁠⁠、右下隅の [⁠⁠+⁠⁠] アイコンをクリ⁠⁠ックし⁠⁠、[⁠⁠画像を検索⁠⁠] をクリ⁠⁠ックします⁠⁠。これにより [⁠⁠マイ ライブラリ⁠⁠ー⁠⁠] タブが開き⁠⁠、サイトにア⁠⁠ップロ⁠⁠ードした画像や⁠⁠、これまでに使用したフリ⁠⁠ー画像とライセンス取得済みのスト⁠⁠ック画像が表示されます⁠⁠。

スト⁠⁠ック画像を追加する

右下隅にある [⁠⁠+⁠⁠] アイコンをクリ⁠⁠ックし⁠⁠、[⁠⁠画像を検索⁠⁠] をクリ⁠⁠ックします⁠⁠。ブラウザ⁠⁠ーのサイズによ⁠⁠っては⁠⁠、[⁠⁠+⁠⁠] アイコンが表示されるまで下にスクロ⁠⁠ールする必要があります⁠⁠。

詳細については⁠⁠、「⁠⁠スト⁠⁠ック画像を検索して追加する⁠⁠」をご参照ください⁠⁠。

独自のイメ⁠⁠ージを追加する

ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、複数の画像を画像ア⁠⁠ップロ⁠⁠ーダ⁠⁠ーにドラ⁠⁠ッグします⁠⁠。画像ア⁠⁠ップロ⁠⁠ーダ⁠⁠ーをクリ⁠⁠ックしてフ⁠⁠ァイル選択メニ⁠⁠ュ⁠⁠ーを開くこともできます⁠⁠。

サイトにア⁠⁠ップロ⁠⁠ード済みの画像を再利用するには⁠⁠、右下隅の [⁠⁠+⁠⁠] アイコンをクリ⁠⁠ックし⁠⁠、[⁠⁠画像を検索⁠⁠] をクリ⁠⁠ックします⁠⁠。これにより [⁠⁠マイ ライブラリ⁠⁠ー⁠⁠] タブが開き⁠⁠、サイトにア⁠⁠ップロ⁠⁠ードした画像や動画⁠⁠、これまでに使用したフリ⁠⁠ー画像やライセンス取得済みのスト⁠⁠ック画像が表示されます⁠⁠。

スト⁠⁠ック画像を追加する

右下隅にある [⁠⁠+⁠⁠] アイコンをクリ⁠⁠ックし⁠⁠、[⁠⁠画像を検索⁠⁠] をクリ⁠⁠ックします⁠⁠。ブラウザ⁠⁠ーのサイズによ⁠⁠っては⁠⁠、[⁠⁠+⁠⁠] アイコンが表示されるまで下にスクロ⁠⁠ールする必要があります⁠⁠。

詳細については⁠⁠、「⁠⁠スト⁠⁠ック画像を検索して追加する⁠⁠」をご参照ください⁠⁠。

動画を追加する

ホステ⁠⁠ィング サ⁠⁠ービスから動画を埋め込むことができます⁠⁠。動画を直接ア⁠⁠ップロ⁠⁠ードすることはできません⁠⁠。現在⁠⁠、YouTubeVimeoからの直接URLをサポ⁠⁠ートしています⁠⁠。その他のサ⁠⁠ービスについては⁠⁠、埋め込みコ⁠⁠ードを使用してください⁠⁠。詳細については⁠⁠、「⁠⁠動画に適した埋め込みオプシ⁠⁠ョンを選択する⁠⁠」をご参照ください⁠⁠。

動画を追加する方法は次の通りです⁠⁠。

  1. 右下隅にある [⁠⁠+⁠⁠] アイコンをクリ⁠⁠ックし⁠⁠、[⁠⁠動画⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠動画を編集⁠⁠] ウ⁠⁠ィンドウで⁠⁠、[⁠⁠埋め込み可能なURLをここに入力します⁠⁠] フ⁠⁠ィ⁠⁠ールドに動画のURLを貼り付けます⁠⁠。また⁠⁠、>アイコンをクリ⁠⁠ックして⁠⁠、表示される [⁠⁠埋め込みデ⁠⁠ータ⁠⁠] ウ⁠⁠ィンドウに動画の埋め込みコ⁠⁠ードを貼り付けることもできます⁠⁠。
  3. カスタムのサムネイル画像を追加すると⁠⁠、訪問者が再生する前に動画の上に表示できます⁠⁠。一部の動画にはギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックがア⁠⁠ップロ⁠⁠ードする画像が含まれていますが⁠⁠、この画像を削除して新しい画像をア⁠⁠ップロ⁠⁠ードすることができます⁠⁠。
  4. カスタム サムネイルを使用するには⁠⁠、[⁠⁠サムネイルを使用⁠⁠] をオンにします⁠⁠。
  5. 完了したら⁠⁠、[⁠⁠保存⁠⁠] をクリ⁠⁠ックします⁠⁠。

他のペ⁠⁠ージからインポ⁠⁠ートする

サイトの他のペ⁠⁠ージから画像を追加するには⁠⁠、次の2つの方法があります⁠⁠。

  • ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージから画像と動画を追加する - [⁠⁠既存のギ⁠⁠ャラリ⁠⁠ーを使用⁠⁠] をクリ⁠⁠ックし⁠⁠、使用するギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージを選択します⁠⁠。
  • 他のペ⁠⁠ージから画像を追加する - 右下隅の [⁠⁠+⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠画像を検索⁠⁠] をクリ⁠⁠ックすると⁠⁠、画像を検索して再利用できます⁠⁠。

独自のイメ⁠⁠ージを追加する

ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックに画像を追加する方法は次の通りです⁠⁠。

  1. ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーの [⁠⁠ア⁠⁠ップロ⁠⁠ード⁠⁠] タブで⁠⁠、[⁠⁠コンテンツ⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. [⁠⁠+⁠⁠] アイコンをタ⁠⁠ップします⁠⁠。
  3. 画像を選択します⁠⁠。
    • 新しい写真を撮る – [⁠⁠写真を撮る⁠⁠] または [⁠⁠カメラ⁠⁠] をタ⁠⁠ップします⁠⁠。
    • デバイスから画像を選択する - [⁠⁠写真ライブラリ⁠⁠ー⁠⁠] または [⁠⁠フ⁠⁠ァイル⁠⁠] をタ⁠⁠ップします⁠⁠。
    • iCloudから画像を選択する - [⁠⁠挿入元⁠⁠.⁠⁠.⁠⁠.⁠⁠] をタ⁠⁠ップします⁠⁠。
  4. 画像をタ⁠⁠ップして⁠⁠、タイトル⁠⁠、説明⁠⁠、クリ⁠⁠ックスル⁠⁠ーURLを追加します⁠⁠。

備考

現在⁠⁠、Squarespaceアプリでスト⁠⁠ック画像を検索したり⁠⁠、ブログ投稿のギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックにコンテンツを追加したりすることはできません⁠⁠。これを行うには⁠⁠、コンピ⁠⁠ュ⁠⁠ータ⁠⁠ーを使用してください⁠⁠。

既存のギ⁠⁠ャラリ⁠⁠ーを使用する (⁠⁠バ⁠⁠ージ⁠⁠ョン7⁠⁠.0のみ⁠⁠)

バ⁠⁠ージ⁠⁠ョン7⁠⁠.0サイトでは⁠⁠、サイト上の既存のギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージから画像を取得できます⁠⁠。

  1. ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーの [⁠⁠既存⁠⁠] タブをタ⁠⁠ップします⁠⁠。
  2. [⁠⁠マイ ギ⁠⁠ャラリ⁠⁠ー⁠⁠] をタ⁠⁠ップします⁠⁠。
  3. 使用するギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージをタ⁠⁠ップします⁠⁠。

画像のタイトル⁠⁠、説明⁠⁠、クリ⁠⁠ックスル⁠⁠ーURLを追加するには⁠⁠、ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージで画像を編集します⁠⁠。

ギ⁠ャラリ⁠ー ブロ⁠ックのレイアウト

各ギ⁠ャラリ⁠ー ブロ⁠ック レイアウトの例を次に示します⁠。コンピ⁠ュ⁠ータ⁠ーでは⁠、ギ⁠ャラリ⁠ー ブロ⁠ックの [⁠デザイン⁠] タブでレイアウトを変更できます⁠。Squarespaceアプリで⁠、[⁠表示⁠] をタ⁠ップしてレイアウトを変更します⁠。

スライドシ⁠⁠ョ⁠⁠ー ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックには⁠⁠、アイテムがスライドシ⁠⁠ョ⁠⁠ー形式で表示されます⁠⁠。訪問者はアイテムをクリ⁠⁠ックして選択することも⁠⁠、スライドシ⁠⁠ョ⁠⁠ーを自動的に再生することもできます⁠⁠。一度に1つのアイテムが表示されます⁠⁠。

スライドショー ギャラリー ブロックの例。

スライドショー ギャラリー ブロックの例。

カル⁠⁠ーセル ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックには⁠⁠、アイテムは水平方向のストリ⁠⁠ップで表示されます⁠⁠。訪問者はアイテムをクリ⁠⁠ックして選択することも⁠⁠、カル⁠⁠ーセルを自動的にスクロ⁠⁠ールすることもできます⁠⁠。一度に表示されるアイテムの数は⁠⁠、アイテムの縦横比とブロ⁠⁠ックのサイズによ⁠⁠って異なります⁠⁠。

カルーセル ギャラリー ブロックの例。

カルーセル ギャラリー ブロックの例。

グリ⁠⁠ッド ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックには⁠⁠、アイテムが均等なグリ⁠⁠ッドで表示されます⁠⁠。長さが不均一なアイテムは⁠⁠、自動的にトリミングしない限り⁠⁠、アイテム間にスペ⁠⁠ースができます⁠⁠。

グリッド ギャラリー ブロックの例。

グリッド ギャラリー ブロックの例。

スタ⁠⁠ック ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックでは⁠⁠、アイテムが1ピクセルのスペ⁠⁠ースで1列に表示されます⁠⁠。アイテムはブロ⁠⁠ックの幅い⁠⁠っぱいに配置されます⁠⁠。このレイアウトはカスタマイズ性が低く⁠⁠、縦横比オプシ⁠⁠ョンやナビゲ⁠⁠ーシ⁠⁠ョン コントロ⁠⁠ールはありません⁠⁠。

画像のセ⁠⁠ットを積み重ねて画像に間隔を設けたい場合は⁠⁠、グリ⁠⁠ッド レイアウトに切り替えます⁠⁠。その後⁠⁠、[⁠⁠行あたりのサムネイル数⁠⁠] を1に設定し⁠⁠、必要に応じて間隔を変更できます⁠⁠。

スタック ギャラリー ブロックの例。

デザインをカスタマイズする

ギ⁠ャラリ⁠ー ブロ⁠ックのデザインと動作をカスタマイズできます⁠。コンピ⁠ュ⁠ータ⁠ーでは⁠、ブロ⁠ック エデ⁠ィタ⁠ーの [⁠デザイン⁠] タブをクリ⁠ックして⁠、これらの変更を行います⁠。Squarespaceアプリでは⁠、[⁠表示⁠] をタ⁠ップします⁠。オプシ⁠ョンはレイアウトによ⁠って異なります⁠。

スライドシ⁠⁠ョ⁠⁠ー ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックのデザイン オプシ⁠⁠ョンは次の通りです⁠⁠。

デザイン オプシ⁠⁠ョン 目的
スライド間の自動切り替え

設定した時間が経過すると⁠⁠、スライドシ⁠⁠ョ⁠⁠ーが次の画像または動画に自動的に切り替わります⁠⁠。チ⁠⁠ェ⁠⁠ックをオンにすると⁠⁠、トランジシ⁠⁠ョン時間を1~10秒で設定するスライダ⁠⁠ーが表示されます⁠⁠。

動画を再生すると⁠⁠、この設定が上書きされます⁠⁠。訪問者が動画を再生した際に⁠⁠、ギ⁠⁠ャラリ⁠⁠ー内の次のアイテムに移動するには「⁠⁠次へ⁠⁠」の矢印をクリ⁠⁠ックする必要があります⁠⁠。

次と前のコントロ⁠⁠ールの表示

ナビゲ⁠⁠ーシ⁠⁠ョン用の矢印を追加します⁠⁠。コントロ⁠⁠ールする矢印は⁠⁠、メイン画像や動画の左右にオ⁠⁠ーバ⁠⁠ーレイとして表示されます⁠⁠。チ⁠⁠ェ⁠⁠ックをオフにすると⁠⁠、画像にクリ⁠⁠ックスル⁠⁠ーURLが使用されていない限り⁠⁠、訪問者はクリ⁠⁠ックすることでスライドシ⁠⁠ョ⁠⁠ーを進めることができます⁠⁠。

ギ⁠⁠ャラリ⁠⁠ーに動画が含まれ⁠⁠、[⁠⁠スライド間の自動切り替え⁠⁠] がチ⁠⁠ェ⁠⁠ックされている場合⁠⁠、この設定を確認することをおすすめします⁠⁠。

画像の自動トリミング

最適なデザインになるよう⁠⁠、画像のトリミングやサイズ変更を行います⁠⁠。

チ⁠⁠ェ⁠⁠ックをオフにした場合

  • 最も幅の広い画像または動画は⁠⁠、ブロ⁠⁠ックの幅全体に広がります⁠⁠。縦横比を維持するように高さがサイズ変更されます⁠⁠。
  • その他の画像や動画は⁠⁠、最も幅の広い画像や動画と同じ高さにサイズ変更されます⁠⁠。
  • 縦横比は維持されます⁠⁠。
チ⁠⁠ェ⁠⁠ックをオンにした場合
  • 最も幅の広い画像または動画は⁠⁠、ブロ⁠⁠ックの幅全体に広がります⁠⁠。その縦横比は⁠⁠、高さとともに維持されます⁠⁠。
  • その他の画像や動画は⁠⁠、最も幅の広い画像や動画と同じ幅や高さにサイズ変更されます⁠⁠。
サムネイルの表示

ギ⁠⁠ャラリ⁠⁠ー内のすべての画像と動画のサムネイルを表示するストリ⁠⁠ップをメイン画像の下に追加します⁠⁠。

チ⁠⁠ェ⁠⁠ックをオンにすると⁠⁠、サムネイル ストリ⁠⁠ップの高さやサムネイル ストリ⁠⁠ップとメイン画像の間の距離を設定するスライダ⁠⁠ーが表示されます⁠⁠。

タイトルと説明の表示

各画像の設定で設定された画像のタイトルと説明を表示します⁠⁠。

チ⁠⁠ェ⁠⁠ックをオンにすると⁠⁠、場所を設定したり⁠⁠、カ⁠⁠ーソルを合わせたときにのみ表示したりするための追加のオプシ⁠⁠ョンが表示されます⁠⁠。

透明な背景 トリミングされていない画像の背後にある灰色を削除します⁠⁠。このオプシ⁠⁠ョンは⁠⁠、[⁠⁠画像を自動トリミング⁠⁠] のチ⁠⁠ェ⁠⁠ックがオフの場合にのみ表示されます⁠⁠。
リンクを新しいウ⁠⁠ィンドウで開く クリ⁠⁠ックすると⁠⁠、クリ⁠⁠ックスル⁠⁠ーURLが新しいタブで開きます⁠⁠。

スライドシ⁠⁠ョ⁠⁠ーの高さ

スライドシ⁠⁠ョ⁠⁠ー ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックの高さは⁠⁠、最も幅の広い画像の高さによ⁠⁠って設定されます⁠⁠。ブロ⁠⁠ックは⁠⁠、最も幅の広い画像を最も広い縦横比を持つ画像とみなします⁠⁠。

ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックにア⁠⁠ップロ⁠⁠ードする2つの画像の例を次に示します⁠⁠。一方は幅と高さの比率が大きく⁠⁠、もう一方はピクセル幅が広くな⁠⁠っています⁠⁠。

幅と高さの比率が異なる画像の比較。

幅と高さの比が大きい方の画像がブロ⁠⁠ックの高さを設定します⁠⁠。

スライドショー ギャラリー ブロックの高さを設定する幅と高さの比率が大きい画像。

ギ⁠⁠ャラリ⁠⁠ーの高さを設定するには⁠⁠、縦横比が最も広い画像が希望の高さになるようにします⁠⁠。たとえば⁠⁠、ギ⁠⁠ャラリ⁠⁠ー全体の高さを小さくするには⁠⁠、最も広い縦横比で画像をトリミングします⁠⁠。

高さを設定するためのヒントをいくつか紹介します⁠⁠。

  • ギ⁠⁠ャラリ⁠⁠ーの高さを予測して画像サイズを一定に保つには⁠⁠、ア⁠⁠ップロ⁠⁠ードする前にサ⁠⁠ードパ⁠⁠ーテ⁠⁠ィ⁠⁠ーの画像エデ⁠⁠ィタ⁠⁠ーを使用して画像を同じ縦横比にトリミングすることを検討してください⁠⁠。
  • スト⁠⁠ック画像や既にア⁠⁠ップロ⁠⁠ードした画像は⁠⁠、組み込みの画像エデ⁠⁠ィタ⁠⁠ーを使用してトリミングしてください⁠⁠。
  • スライドシ⁠⁠ョ⁠⁠ー内のすべての画像を同じ縦横比で表示させるには⁠⁠、[⁠⁠デザイン⁠⁠] タブの [⁠⁠画像を自動トリミング⁠⁠] のチ⁠⁠ェ⁠⁠ックをオンにします⁠⁠。
  • 縦横比の詳細については⁠⁠、「⁠⁠縦横比について⁠⁠」をご参照ください⁠⁠。

カル⁠⁠ーセル ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックのデザイン オプシ⁠⁠ョンは次の通りです⁠⁠。

デザイン オプシ⁠⁠ョン 目的
スライド間の自動切り替え

指定した時間 (⁠⁠1から10秒⁠⁠) が経過すると⁠⁠、ギ⁠⁠ャラリ⁠⁠ーが自動的に次のアイテムに切り替わるようにします⁠⁠。

動画を再生すると⁠⁠、この設定が上書きされます⁠⁠。訪問者が動画を再生した際に⁠⁠、ギ⁠⁠ャラリ⁠⁠ー内の次のアイテムに移動するには⁠⁠、矢印をクリ⁠⁠ックする必要があります⁠⁠。

次と前のコントロ⁠⁠ールの表示

ナビゲ⁠⁠ーシ⁠⁠ョン用の矢印を追加します⁠⁠。コントロ⁠⁠ールする矢印は⁠⁠、メイン アイテムの左右にオ⁠⁠ーバ⁠⁠ーレイで表示されます⁠⁠。

ギ⁠⁠ャラリ⁠⁠ーに動画があり⁠⁠、[⁠⁠スライド間の自動切り替え⁠⁠] がチ⁠⁠ェ⁠⁠ックされている場合⁠⁠、この設定を確認することをおすすめします⁠⁠。

アクテ⁠⁠ィブなコンテンツの配置位置

画像の移動に応じて⁠⁠、スライダ⁠⁠ーのどこにアクテ⁠⁠ィブ画像を表示するかを選択します⁠⁠。

リンクを新しいウ⁠⁠ィンドウで開く クリ⁠⁠ックスル⁠⁠ーURLを新しいタブで開くようにします⁠⁠。

グリ⁠⁠ッド ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックのデザイン オプシ⁠⁠ョンは次の通りです⁠⁠。

デザイン オプシ⁠⁠ョン 目的
縦横比 画像や動画の形を変えます⁠⁠。既定では⁠⁠、[⁠⁠1⁠⁠:1 正方形⁠⁠] が選択されています⁠⁠。
画像のトリミング

パデ⁠⁠ィングを取り除き⁠⁠、選択した縦横比で画像と動画を表示します⁠⁠。

チ⁠⁠ェ⁠⁠ックをオフにすると⁠⁠、各行の高さは最も高い画像や動画を基準に統一されます⁠⁠。選択した縦横比によ⁠⁠っては⁠⁠、特にグリ⁠⁠ッドが1行に1つのサムネイルに設定されている場合⁠⁠、間隔が不均一になることがあります⁠⁠。

タイトルを表示

画像の下にタイトルを表示します⁠⁠。

画像をライトボ⁠⁠ックスで開き⁠⁠、カ⁠⁠ーソルを合わせるとタイトルと説明が表示されます⁠⁠。

行あたりのサムネイル数 サムネイルを並べる数を設定します⁠⁠。数字を大きくすると⁠⁠、各サムネイルのサイズが小さくなります⁠⁠。
パデ⁠⁠ィング 各画像または動画間のパデ⁠⁠ィング/マ⁠⁠ージンを変更します⁠⁠。スライダ⁠⁠ーを0に動かすと⁠⁠、パデ⁠⁠ィングが削除されます⁠⁠。
ライトボ⁠⁠ックス

チ⁠⁠ェ⁠⁠ックをオンにして⁠⁠、画像や動画をクリ⁠⁠ックすると⁠⁠、背景が黒や白のスライドシ⁠⁠ョ⁠⁠ー ライトボ⁠⁠ックスに表示されます⁠⁠。クリ⁠⁠ックスル⁠⁠ーURLは無効になります⁠⁠。

ライトボ⁠⁠ックス テ⁠⁠ーマのドロ⁠⁠ップダウンを使用して⁠⁠、ライトボ⁠⁠ックスの背景を黒にするか白にするかを選択します⁠⁠。

リンクを新しいウ⁠⁠ィンドウで開く クリ⁠⁠ックすると⁠⁠、クリ⁠⁠ックスル⁠⁠ーURLが新しいタブで開きます⁠⁠。

スタ⁠⁠ック ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックのデザイン オプシ⁠⁠ョンは次の通りです⁠⁠。

デザイン オプシ⁠⁠ョン 目的
タイトルと説明の表示

各画像や動画の下にタイトルと説明を表示します⁠⁠。

リンクを新しいウ⁠⁠ィンドウで開く クリ⁠⁠ックすると⁠⁠、クリ⁠⁠ックスル⁠⁠ーURLが新しいタブで開きます⁠⁠。

画像のタイトルと説明を追加する

タイトルと説明は⁠、スライドシ⁠ョ⁠ー⁠、グリ⁠ッド⁠、およびスタ⁠ック ギ⁠ャラリ⁠ー ブロ⁠ックにのみ表示されます⁠。各画像のタイトルは代替テキストとして機能し⁠、サイトのSEOとアクセシビリテ⁠ィに役立ちます⁠。サイトのアクセシビリテ⁠ィ向上の方法の詳細については⁠、「⁠オ⁠ーデ⁠ィオ⁠、画像⁠、動画にアクセスしやすくする⁠」をご参照ください⁠。

画像や動画にタイトルや説明を追加する方法は次の通りです⁠。

  1. ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、画像または動画にカ⁠⁠ーソルを合わせます⁠⁠。
  2. 歯車アイコンをクリ⁠⁠ックします⁠⁠。
  3. タイトルと説明を入力します⁠⁠。画像を説明し⁠⁠、サイト全体のコンテンツに関連する短い用語を使用することをおすすめします⁠⁠。
  1. [⁠⁠コンテンツ⁠⁠] タブをタ⁠⁠ップします⁠⁠。
  2. 画像をタ⁠⁠ップします⁠⁠。
  3. タイトルと説明を入力します⁠⁠。画像を説明し⁠⁠、サイト全体のコンテンツに関連する短い用語を使用することをおすすめします⁠⁠。

ヒント

サイトがバ⁠ージ⁠ョン7⁠.0の場合⁠、既存のギ⁠ャラリ⁠ー ペ⁠ージの画像には⁠、ギ⁠ャラリ⁠ー ペ⁠ージの画像のタイトルと説明が自動的に表示されます⁠。

テキストの動作と外観は⁠、ギ⁠ャラリ⁠ー ブロ⁠ック レイアウトによ⁠って異なります⁠。

  • スライドシ⁠ョ⁠ー - タイトルと説明を常時表示するか⁠、カ⁠ーソルを合わせた時に表示するかを選択できます⁠。ブロ⁠ックの [⁠デザイン⁠] タブで位置を設定します⁠。小さなブラウザ⁠ーやモバイル端末では⁠、タイトルや説明文が表示されない場合があります⁠。
  • カル⁠ーセル - タイトルと説明は表示されません⁠。
  • グリ⁠ッド - 画像の下にタイトルを表示します⁠。画像をライトボ⁠ックスで開いた場合⁠、カ⁠ーソルを合わせるとタイトルと説明が表示されますが⁠、動画をライトボ⁠ックスで開いた場合は表示されません⁠。
  • スタ⁠ック - タイトルと説明が画像の下に表示されます⁠。

ヒント

キ⁠ャプシ⁠ョンのスタイルは⁠、ギ⁠ャラリ⁠ー ブロ⁠ックのデザインとサイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。詳細については⁠、「⁠画像キ⁠ャプシ⁠ョンのスタイル設定⁠」をご参照ください⁠。

クリ⁠ックスル⁠ーURLを追加する

クリ⁠ックスル⁠ーURLを使用して⁠、画像を外部ペ⁠ージ⁠、内部コンテンツ⁠、もしくはフ⁠ァイルにリンクします⁠。これは⁠、クライアントのプロジ⁠ェクト⁠、商品⁠、ブログ投稿など⁠、他のコンテンツへのクリ⁠ックを促すのに最適な方法です⁠。クリ⁠ックスル⁠ーURLは画像では機能しますが⁠、動画では機能しません⁠。

クリ⁠ックスル⁠ーURLを追加する方法は次の通りです⁠。

  1. ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、画像にカ⁠⁠ーソルを合わせます⁠⁠。
  2. 歯車アイコンをクリ⁠⁠ックします⁠⁠。
  3. [⁠⁠クリ⁠⁠ックしてURLを追加⁠⁠.⁠⁠.⁠⁠.⁠⁠] フ⁠⁠ィ⁠⁠ールドにリンクを設定します⁠⁠。詳細な手順については⁠⁠、「⁠⁠クリ⁠⁠ックスル⁠⁠ーURL⁠⁠」をご参照ください⁠⁠。
  4. [⁠⁠デザイン⁠⁠] タブで [⁠⁠リンクを新しいウ⁠⁠ィンドウで開く⁠⁠] のチ⁠⁠ェ⁠⁠ックをオンもしくはオフにして⁠⁠、リンクの表示方法を設定します⁠⁠。
  1. [⁠⁠コンテンツ⁠⁠] タブをタ⁠⁠ップします⁠⁠。
  2. 画像をタ⁠⁠ップします⁠⁠。
  3. [⁠⁠画像リンク⁠⁠] をタ⁠⁠ップします⁠⁠。
  4. タブを使用して⁠⁠、サイト上のペ⁠⁠ージ⁠⁠、外部Webサイト⁠⁠、メ⁠⁠ールアドレス⁠⁠、ア⁠⁠ップロ⁠⁠ードされたフ⁠⁠ァイル⁠⁠、もしくは電話番号にリンクします⁠⁠。
  5. 左上の矢印をタ⁠⁠ップし⁠⁠、[⁠⁠保存⁠⁠] をタ⁠⁠ップします⁠⁠。

クリ⁠ックスル⁠ーURLには次のいくつかの制限があります⁠。

  • スライドシ⁠ョ⁠ー ギ⁠ャラリ⁠ー ブロ⁠ックでは⁠、クリ⁠ックスル⁠ーURLがクリ⁠ック ナビゲ⁠ーシ⁠ョンよりも優先されます⁠。クリ⁠ックスル⁠ーURLとスライドシ⁠ョ⁠ー デザインを使用する場合は⁠、ブロ⁠ック エデ⁠ィタ⁠ーの [⁠デザイン⁠] タブで [⁠次と前のコントロ⁠ールを表示⁠] のチ⁠ェ⁠ックをオンにすることをおすすめします⁠。
  • ライトボ⁠ックスのチ⁠ェ⁠ックがオンにな⁠っている場合⁠、グリ⁠ッド ギ⁠ャラリ⁠ー ブロ⁠ックでクリ⁠ックスル⁠ーURLはサポ⁠ートされません⁠。
  • 動画はクリ⁠ックスル⁠ーURLをサポ⁠ートしていません⁠。
  • バ⁠ージ⁠ョン7⁠.1でクリ⁠ックスル⁠ーURLを追加する場合⁠、[⁠コンテンツ⁠] タブでポ⁠ートフ⁠ォリオ ペ⁠ージを選択できません⁠。そのかわりに⁠、[⁠外部⁠] を選択し⁠、ポ⁠ートフ⁠ォリオ ペ⁠ージのURLを貼り付けます⁠。

画像と動画を並べ替える

ギ⁠ャラリ⁠ー ブロ⁠ックには画像や動画を自動的に並べ替えるオプシ⁠ョンはありませんが⁠、手動でアイテムを並べ替えることができます⁠。画像を並べ替えると⁠、変更が自動的に保存されます⁠。

  • 一度に1つの画像を移動するには⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開き⁠、画像をクリ⁠ックして所定の位置にドラ⁠ッグします⁠。
  • 複数の画像を移動するには⁠、Windowsの場合はCtrl⁠、Macの場合はを押したまま⁠、移動したいそれぞれの画像をクリ⁠ックします⁠。画像を選択した後⁠、画像をクリ⁠ックして所定の位置にドラ⁠ッグします⁠。

サイトがバ⁠ージ⁠ョン7⁠.0で⁠、ギ⁠ャラリ⁠ー ブロ⁠ックに既存のギ⁠ャラリ⁠ーのコンテンツが表示されている場合は⁠、元のギ⁠ャラリ⁠ー ペ⁠ージで画像もしくは動画を並べ替えます⁠。

画像や動画を削除する

ギ⁠ャラリ⁠ー ブロ⁠ックから画像や動画を削除する方法は次の通りです⁠。

  1. ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、削除する画像にカ⁠⁠ーソルを合わせ⁠⁠、ゴミ箱アイコンをクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠確認⁠⁠] をクリ⁠⁠ックします⁠⁠。
  1. ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーの [⁠⁠ア⁠⁠ップロ⁠⁠ード⁠⁠] タブで⁠⁠、[⁠⁠コンテンツ⁠⁠] をタ⁠⁠ップします⁠⁠。
  2. [⁠⁠編集⁠⁠] をタ⁠⁠ップします⁠⁠。
  3. 削除したい画像や動画の赤い[⁠⁠-⁠⁠] アイコンをタ⁠⁠ップして⁠⁠、[⁠⁠削除⁠⁠] をタ⁠⁠ップします⁠⁠。

ギ⁠ャラリ⁠ー ブロ⁠ックから画像や動画を削除すると⁠、変更は自動的に保存されます⁠。

画像をトリミングもしくはサイズ変更する (⁠コンピ⁠ュ⁠ータ⁠ーのみ⁠)

ギ⁠ャラリ⁠ー ブロ⁠ックのサイズ変更や切り抜きは⁠、さまざまな方法で行うことができます⁠。オプシ⁠ョンはレイアウトによ⁠って異なります⁠。

  • 画像を自動的に同じ縦横比に切り抜くには⁠⁠、[⁠⁠デザイン⁠⁠] タブで [⁠⁠画像を自動トリミング⁠⁠] のチ⁠⁠ェ⁠⁠ックをオンにします⁠⁠。
  • 個⁠⁠々の画像トリミングするには⁠⁠、組み込みの画像エデ⁠⁠ィタ⁠⁠ーを使用します⁠⁠。
  • 画像の中心を変更するには⁠⁠、画像の焦点を変更します⁠⁠。
  • ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック全体を縮小するには⁠⁠、左右どちらかにブロ⁠⁠ックを追加します⁠⁠。
  • 画像を自動的に同じ縦横比に切り抜くには⁠⁠、[⁠⁠デザイン⁠⁠] タブで [⁠⁠画像をトリミング⁠⁠] のチ⁠⁠ェ⁠⁠ックをオンにします⁠⁠。
  • すべての画像のサイズを変更するには⁠⁠、[⁠⁠デザイン⁠⁠] タブで行ごとのサムネイル数を変更します⁠⁠。
  • 個⁠⁠々の画像トリミングするには⁠⁠、組み込みの画像エデ⁠⁠ィタ⁠⁠ーを使用します⁠⁠。
  • 画像の中心を変更するには⁠⁠、画像の焦点を変更します⁠⁠。
  • ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック全体を縮小するには⁠⁠、左右どちらかにブロ⁠⁠ックを追加します⁠⁠。

モバイルのギ⁠ャラリ⁠ー ブロ⁠ック

モバイル端末のギ⁠ャラリ⁠ー ブロ⁠ックは⁠、レイアウトによ⁠っては⁠、コンピ⁠ュ⁠ータ⁠ーとは異なる表示や動作をする場合があります⁠。

スライドシ⁠⁠ョ⁠⁠ー ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックは⁠⁠、モバイルでもスライドシ⁠⁠ョ⁠⁠ーのレイアウトを維持します⁠⁠。

  • [⁠⁠デザイン⁠⁠] タブで選択した自動トランジシ⁠⁠ョンとナビゲ⁠⁠ーシ⁠⁠ョンの設定はそのまま適用されます⁠⁠。クリ⁠⁠ックスル⁠⁠ーURLはタ⁠⁠ップすると機能します⁠⁠。
  • 幅480ピクセル未満のデ⁠⁠ィスプレイでは⁠⁠、タイトルと説明は表示されません⁠⁠。これには⁠⁠、縦長モ⁠⁠ードで保持されるほとんどのスマ⁠⁠ートフ⁠⁠ォンが含まれます⁠⁠。
  • タイトルと説明 (⁠⁠カ⁠⁠ーソルを合わせた時のキ⁠⁠ャプシ⁠⁠ョンを含む⁠⁠) は⁠⁠、横長モ⁠⁠ードやタブレ⁠⁠ットなどの大型デバイスでは表示される場合があります⁠⁠。これはデバイスによ⁠⁠って異なります⁠⁠。

カル⁠⁠ーセル ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックは⁠⁠、モバイルでもカル⁠⁠ーセル レイアウトを維持します⁠⁠。

  • 画像によ⁠⁠っては⁠⁠、一度に1つの画像しか表示されない場合があります⁠⁠。
  • [⁠⁠デザイン⁠⁠] タブで選択した自動トランジシ⁠⁠ョンとナビゲ⁠⁠ーシ⁠⁠ョンの設定はそのまま適用されます⁠⁠。クリ⁠⁠ックスル⁠⁠ーURLはタ⁠⁠ップすると機能します⁠⁠。

グリ⁠⁠ッド ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックは⁠⁠、モバイルでは2列幅のグリ⁠⁠ッドとして表示されます⁠⁠。

  • [⁠⁠デザイン⁠⁠] タブで選択した縦横比は⁠⁠、そのまま適用されます⁠⁠。
  • 有効にするとライトボ⁠⁠ックスが表示されます⁠⁠。
  • ライトボ⁠⁠ックスが無効の場合⁠⁠、タ⁠⁠ップするとクリ⁠⁠ックスル⁠⁠ーURLが機能します⁠⁠。
  • ライトボ⁠⁠ックスで⁠⁠、右下隅のをタ⁠⁠ップすると⁠⁠、画像のタイトルと説明が表示されます⁠⁠。
円をタップすると、モバイルのライトボックスに画像のテキストが表示されます。

スタ⁠⁠ック ギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ックは⁠⁠、モバイルでも同様に表示され⁠⁠、動作します⁠⁠。

 

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

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

  • Squarespace Expertを雇う

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