さまざまなレイアウトを使って、画像や動画を紹介できます。
ギャラリー ブロックを使用して、さまざまなレイアウトのページやブログ投稿に画像や動画のギャラリーを追加できます。画像をアップロードしたり、動画を埋め込んだり、ストック画像のライセンスを取得したりできます。
動画を見る
ギャラリー ブロックを追加する場所
ギャラリー ブロックを追加できる場所は、サイトのバージョンによって異なります。
ギャラリー セクションがサポートされていないサイトのエリアには、次のようなギャラリー ブロックを追加できます。
- ブログ投稿
- 個別イベント
- 商品の追加情報
次のようなページ セクションのあるエリアにギャラリー ブロックを追加することはできません。
- レイアウト ページ
- コレクションのランディング ページ (ブログ ページ、イベント ページ、ポートフォリオ ページ、ストア ページ)
- ポートフォリオのサブページ
- フッター
Circleメンバーは、7.1のすべてのコンテンツ エリアにギャラリー ブロックを追加できます。ブロックを追加すると、サイトコンテンツを編集する権限を持つユーザーならば誰でもブロックを編集できます。Circleメンバーになる方法については、「Squarespace Circle」をご参照ください。
ギャラリー ブロックは、サイト上の任意のブロック コンテンツ エリアに追加できます。詳細については、「ブロックを使用してコンテンツを追加する」をご参照ください。
ギャラリー ブロックを追加する
ギャラリー ブロックを追加する方法は次の通りです。
- ギャラリー ブロックをサポートするエリアで挿入箇所をクリックし、[ギャラリー] をクリックします。ヘルプについては、「ブロックを使用してコンテンツを追加する」をご参照ください。
- 画像や動画を追加するには、[コンテンツ] タブを使用します。
- [デザイン] タブを使用して、レイアウトを変更し、デザインをカスタマイズします。サイトがバージョン7.0の場合は、[適用] をクリックして変更を公開します。
画像や動画を追加する
ギャラリー ブロック エディターの [コンテンツ] タブでは、画像のアップロード、ストック画像の追加、動画の埋め込みを行うことができます。また、サイトの他のエリアからストック画像やアップロードした画像を再利用することもできます。新しい画像をギャラリー ブロックに追加すると、変更が自動的に保存されます。
画像アップロードのベスト プラクティの詳細については、「Webで表示する画像の書式設定を行う」を参照するか、「画像に関するすべて」の動画シリーズをご覧ください。
制限事項
- 最大250個の画像と動画を追加できます。
- 追加するコンテンツが増えるほど、ページの読み込みが遅くなります。これは特に、処理能力に制限のあるモバイル端末に特に当てはまります。ページ サイズを減らすには、複数のページに小さなギャラリーを作成することを検討してください。
ギャラリー ブロックに画像や動画を追加する方法は、サイトのバージョンによって異なります。
注: バージョン7.1では、[既存のギャラリーを使用] オプションを使用できません。このオプションはギャラリー ページ専用で、バージョン7.0でのみ利用可能です。
独自のイメージを追加する
ギャラリー ブロック エディターで、複数の画像を画像アップローダーにドラッグするか、画像アップローダーをクリックしてファイル選択メニューを開きます。
サイトにアップロード済みの画像を再利用するには、右下隅の [+] アイコンをクリックし、[画像を検索] をクリックします。これにより [マイ ライブラリー] タブが開き、サイトにアップロードした画像や動画、これまでに使用したフリー画像やライセンス取得済みのストック画像が表示されます。
ストック画像を追加する
右下隅にある [+] アイコンをクリックし、[画像を検索] をクリックします。ブラウザーのサイズによっては、[+] アイコンが表示されるまで下にスクロールする必要があります。
詳細については、「ストック画像を検索して追加する」をご参照ください。
動画を追加する
ホスティング サービスから動画を埋め込むことができます。動画を直接アップロードすることはできません。現在、YouTubeとVimeoからのダイレクトURLをサポートしています。その他のサービスについては、埋め込みコードを使用してください。詳細については、「動画に適した埋め込みオプションを選択する」をご参照ください。
動画を追加する方法は次の通りです。
- 右下隅にある [+] アイコンをクリックし、[動画] をクリックします。
- [動画を編集] ウィンドウで、[埋め込み可能なURLをここに入力します] フィールドに動画のURLを貼り付けます。また、>アイコンをクリックして、表示される [埋め込みデータ] ウィンドウに動画の埋め込みコードを貼り付けることもできます。
- カスタムのサムネイル画像を追加すると、訪問者が再生する前に動画の上に表示できます。一部の動画にはギャラリー ブロックがアップロードする画像が含まれていますが、この画像を削除して新しい画像をアップロードすることができます。
- カスタム サムネイルを使用するには、[サムネイルを使用] をオンにします。
- 完了したら、[保存] をクリックします。
独自のイメージを追加する
ギャラリー ブロック エディターで、複数の画像を画像アップローダーにドラッグします。画像アップローダーをクリックしてファイル選択メニューを開くこともできます。
サイトにアップロード済みの画像を再利用するには、右下隅の [+] アイコンをクリックし、[画像を検索] をクリックします。これにより [マイ ライブラリー] タブが開き、サイトにアップロードした画像や動画、これまでに使用したフリー画像やライセンス取得済みのストック画像が表示されます。
ストック画像を追加する
右下隅にある [+] アイコンをクリックし、[画像を検索] をクリックします。ブラウザーのサイズによっては、[+] アイコンが表示されるまで下にスクロールする必要があります。
詳細については、「ストック画像を検索して追加する」をご参照ください。
動画を追加する
ホスティング サービスから動画を埋め込むことができます。動画を直接アップロードすることはできません。現在、YouTubeとVimeoからのダイレクトURLをサポートしています。その他のサービスについては、埋め込みコードを使用してください。詳細については、「動画に適した埋め込みオプションを選択する」をご参照ください。
動画を追加する方法は次の通りです。
- 右下隅にある [+] アイコンをクリックし、[動画] をクリックします。
- [動画を編集] ウィンドウで、[埋め込み可能なURLをここに入力します] フィールドに動画のURLを貼り付けます。また、>アイコンをクリックして、表示される [埋め込みデータ] ウィンドウに動画の埋め込みコードを貼り付けることもできます。
- カスタムのサムネイル画像を追加すると、訪問者が再生する前に動画の上に表示できます。一部の動画にはギャラリー ブロックがアップロードする画像が含まれていますが、この画像を削除して新しい画像をアップロードすることができます。
- カスタム サムネイルを使用するには、[サムネイルを使用] をオンにします。
- 完了したら、[保存] をクリックします。
他のページからインポートする
サイトの他のページから画像を追加するには、次の2つの方法があります。
- ギャラリー ページから画像と動画を追加する - [既存のギャラリーを使用] をクリックし、使用するギャラリー ページを選択します。
- 他のページから画像を追加する - 右下隅の [+] をクリックし、[画像を検索] をクリックすると、画像を検索して再利用できます。
独自のイメージを追加する
ギャラリー ブロックに画像を追加する方法は次の通りです。
- ブロック エディターの [アップロード] タブで、[コンテンツ] をタップします。
- [+] アイコンをタップします。
- 画像を選択します。
- 新しい写真を撮る – [写真を撮る] または [カメラ] をタップします。
- デバイスから画像を選択する - [写真ライブラリー] または [ファイル] をタップします。
- iCloudから画像を選択する - [挿入元...] をタップします。
- 画像をタップして、タイトル、説明、クリックスルーURLを追加します。
注: 現在、Squarespaceアプリでストック画像を検索したり、ブログ投稿のギャラリー ブロックにコンテンツを追加したりすることはできません。これを行うには、コンピューターを使用してください。
既存のギャラリーを使用する (バージョン7.0のみ)
バージョン7.0サイトでは、サイト上の既存のギャラリー ページから画像を取得できます。
- ブロック エディターの [既存] タブをタップします。
- [マイ ギャラリー] をタップします。
- 使用するギャラリー ページをタップします。
画像のタイトル、説明、クリックスルーURLを追加するには、ギャラリー ページで画像を編集します。
ギャラリー ブロックのレイアウト
各ギャラリー ブロック レイアウトの例を次に示します。コンピューターでは、ギャラリー ブロックの [デザイン] タブでレイアウトを変更できます。Squarespaceアプリで、[表示] をタップしてレイアウトを変更します。
スライドショー ギャラリー ブロックには、アイテムがスライドショー形式で表示されます。訪問者はアイテムをクリックして選択することも、スライドショーを自動的に再生することもできます。一度に1つのアイテムが表示されます。
カルーセル ギャラリー ブロックには、アイテムは水平方向のストリップで表示されます。訪問者はアイテムをクリックして選択することも、カルーセルを自動的にスクロールすることもできます。一度に表示されるアイテムの数は、アイテムの縦横比とブロックのサイズによって異なります。
グリッド ギャラリー ブロックには、アイテムが均等なグリッドで表示されます。長さが不均一なアイテムは、自動的にトリミングしない限り、アイテム間にスペースができます。
スタック ギャラリー ブロックでは、アイテムが1ピクセルのスペースで1列に表示されます。アイテムはブロックの幅いっぱいに配置されます。このレイアウトはカスタマイズ性が低く、縦横比オプションやナビゲーション コントロールはありません。
画像のセットを積み重ねて画像に間隔を設けたい場合は、グリッド レイアウトに切り替えます。その後、[行あたりのサムネイル数] を1に設定し、必要に応じて間隔を変更できます。
デザインをカスタマイズする
ギャラリー ブロックのデザインと動作をカスタマイズできます。コンピューターでは、ブロック エディターの [デザイン] タブをクリックして、これらの変更を行います。Squarespaceアプリでは、[表示] をタップします。オプションはレイアウトによって異なります。
スライドショー ギャラリー ブロックのデザイン オプションは次の通りです。
| デザイン オプション | 目的 |
| スライド間の自動切り替え |
設定した時間が経過すると、スライドショーが次の画像または動画に自動的に切り替わります。チェックをオンにすると、トランジション時間を1～10秒で設定するスライダーが表示されます。 動画を再生すると、この設定が上書きされます。訪問者が動画を再生した際に、ギャラリー内の次のアイテムに移動するには「次へ」の矢印をクリックする必要があります。 |
| 次と前のコントロールの表示 |
ナビゲーション用の矢印を追加します。コントロールする矢印は、メイン画像や動画の左右にオーバーレイとして表示されます。チェックをオフにすると、画像にクリックスルーURLが使用されていない限り、訪問者はクリックすることでスライドショーを進めることができます。 ギャラリーに動画が含まれ、[スライド間の自動切り替え] がチェックされている場合、この設定を確認することをおすすめします。 |
| 画像の自動トリミング |
最適なデザインになるよう、画像のトリミングやサイズ変更を行います。 チェックをオフにした場合
|
| サムネイルの表示 |
ギャラリー内のすべての画像と動画のサムネイルを表示するストリップをメイン画像の下に追加します。 チェックをオンにすると、サムネイル ストリップの高さやサムネイル ストリップとメイン画像の間の距離を設定するスライダーが表示されます。 |
| タイトルと説明の表示 |
各画像の設定で設定された画像のタイトルと説明を表示します。 チェックをオンにすると、場所を設定したり、カーソルを合わせたときにのみ表示したりするための追加のオプションが表示されます。 |
| 透明な背景 | トリミングされていない画像の背後にある灰色を削除します。このオプションは、[画像を自動トリミング] のチェックがオフの場合にのみ表示されます。 |
| リンクを新しいウィンドウで開く | クリックすると、クリックスルーURLが新しいタブで開きます。 |
スライドショーの高さ
スライドショー ギャラリー ブロックの高さは、最も幅の広い画像の高さによって設定されます。ブロックは、最も幅の広い画像を最も広い縦横比を持つ画像とみなします。
ギャラリー ブロックにアップロードする2つの画像の例を次に示します。一方は幅と高さの比率が大きく、もう一方はピクセル幅が広くなっています。
幅と高さの比が大きい方の画像がブロックの高さを設定します。
ギャラリーの高さを設定するには、縦横比が最も広い画像が希望の高さになるようにします。たとえば、ギャラリー全体の高さを小さくするには、最も広い縦横比で画像をトリミングします。
高さを設定するためのヒントをいくつか紹介します。
- ギャラリーの高さを予測して画像サイズを一定に保つには、アップロードする前にサードパーティーの画像エディターを使用して画像を同じ縦横比にトリミングすることを検討してください。
- ストック画像や既にアップロードした画像は、組み込みの画像エディターを使用してトリミングしてください。
- スライドショー内のすべての画像を同じ縦横比で表示させるには、[デザイン] タブの [画像を自動トリミング] のチェックをオンにします。
- 縦横比の詳細については、「縦横比について」をご参照ください。
カルーセル ギャラリー ブロックのデザイン オプションは次の通りです。
| デザイン オプション | 目的 |
| スライド間の自動切り替え |
指定した時間 (1から10秒) が経過すると、ギャラリーが自動的に次のアイテムに切り替わるようにします。 動画を再生すると、この設定が上書きされます。訪問者が動画を再生した際に、ギャラリー内の次のアイテムに移動するには、矢印をクリックする必要があります。 |
| 次と前のコントロールの表示 |
ナビゲーション用の矢印を追加します。コントロールする矢印は、メイン アイテムの左右にオーバーレイで表示されます。 ギャラリーに動画があり、[スライド間の自動切り替え] がチェックされている場合、この設定を確認することをおすすめします。 |
| アクティブなコンテンツの配置位置 |
画像の移動に応じて、スライダーのどこにアクティブ画像を表示するかを選択します。 |
| リンクを新しいウィンドウで開く | クリックスルーURLを新しいタブで開くようにします。 |
グリッド ギャラリー ブロックのデザイン オプションは次の通りです。
| デザイン オプション | 目的 |
| 縦横比 | 画像や動画の形を変えます。既定では、[1:1 正方形] が選択されています。 |
| 画像のトリミング |
パディングを取り除き、選択した縦横比で画像と動画を表示します。 チェックをオフにすると、各行の高さは最も高い画像や動画を基準に統一されます。選択した縦横比によっては、特にグリッドが1行に1つのサムネイルに設定されている場合、間隔が不均一になることがあります。 |
| タイトルを表示 |
画像の下にタイトルを表示します。 画像をライトボックスで開き、カーソルを合わせるとタイトルと説明が表示されます。 |
| 行あたりのサムネイル数 | サムネイルを並べる数を設定します。数字を大きくすると、各サムネイルのサイズが小さくなります。 |
| パディング | 各画像または動画間のパディング/マージンを変更します。スライダーを0に動かすと、パディングが削除されます。 |
| ライトボックス |
チェックをオンにして、画像や動画をクリックすると、背景が黒や白のスライドショー ライトボックスに表示されます。クリックスルーURLは無効になります。 ライトボックス テーマのドロップダウンを使用して、ライトボックスの背景を黒にするか白にするかを選択します。 |
| リンクを新しいウィンドウで開く | クリックすると、クリックスルーURLが新しいタブで開きます。 |
スタック ギャラリー ブロックのデザイン オプションは次の通りです。
| デザイン オプション | 目的 |
| タイトルと説明の表示 |
各画像や動画の下にタイトルと説明を表示します。 |
| リンクを新しいウィンドウで開く | クリックすると、クリックスルーURLが新しいタブで開きます。 |
画像のタイトルと説明を追加する
タイトルと説明は、スライドショー、グリッド、およびスタック ギャラリー ブロックにのみ表示されます。各画像のタイトルは代替テキストとして機能し、サイトのSEOとアクセシビリティに役立ちます。サイトのアクセシビリティ向上の方法の詳細については、「オーディオ、画像、動画にアクセスしやすくする」をご参照ください。
画像や動画にタイトルや説明を追加する方法は次の通りです。
- ギャラリー ブロック エディターで、画像または動画にカーソルを合わせます。
-
をクリックします。 - タイトルと説明を入力します。画像を説明し、サイト全体のコンテンツに関連する短い用語を使用することをおすすめします。
をクリックします。- [コンテンツ] タブをタップします。
- 画像をタップします。
- タイトルと説明を入力します。画像を説明し、サイト全体のコンテンツに関連する短い用語を使用することをおすすめします。
ヒント: サイトがバージョン7.0の場合、既存のギャラリー ページの画像には、ギャラリー ページの画像のタイトルと説明が自動的に表示されます。
テキストの動作と外観は、ギャラリー ブロック レイアウトによって異なります。
- スライドショー - タイトルと説明を常時表示するか、カーソルを合わせた時に表示するかを選択できます。ブロックの [デザイン] タブで位置を設定します。小さなブラウザーやモバイル端末では、タイトルや説明文が表示されない場合があります。
- カルーセル - タイトルと説明は表示されません。
- グリッド - 画像の下にタイトルを表示します。画像をライトボックスで開いた場合、カーソルを合わせるとタイトルと説明が表示されますが、動画をライトボックスで開いた場合は表示されません。
- スタック - タイトルと説明が画像の下に表示されます。
ヒント: キャプションのスタイルは、ギャラリー ブロックのデザインとサイトのバージョンによって異なります。詳細については、「画像キャプションのスタイル設定」をご参照ください。
クリックスルーURLを追加する
クリックスルーURLを使用して、画像を外部ページ、内部コンテンツ、もしくはファイルにリンクします。これは、クライアントのプロジェクト、商品、ブログ投稿など、他のコンテンツへのクリックを促すのに最適な方法です。クリックスルーURLは画像では機能しますが、動画では機能しません。
クリックスルーURLを追加する方法は次の通りです。
- ギャラリー ブロック エディターで、画像にカーソルを合わせます。
-
をクリックします。
- [クリックしてURLを追加...] フィールドにリンクを設定します。詳細な手順については、「クリックスルーURL」をご参照ください。
- [デザイン] タブで [リンクを新しいウィンドウで開く] のチェックをオンもしくはオフにして、リンクの表示方法を設定します。
- [コンテンツ] タブをタップします。
- 画像をタップします。
- [画像リンク] をタップします。
- タブを使用して、サイト上のページ、外部Webサイト、メールアドレス、アップロードされたファイル、もしくは電話番号にリンクします。
- 左上の矢印をタップし、[保存] をタップします。
クリックスルーURLには次のいくつかの制限があります。
- スライドショー ギャラリー ブロックでは、クリックスルーURLがクリック ナビゲーションよりも優先されます。クリックスルーURLとスライドショー デザインを使用する場合は、ブロック エディターの [デザイン] タブで [次と前のコントロールを表示] のチェックをオンにすることをおすすめします。
- ライトボックスのチェックがオンになっている場合、グリッド ギャラリー ブロックでクリックスルーURLはサポートされません。
- 動画はクリックスルーURLをサポートしていません。
- バージョン7.1でクリックスルーURLを追加する場合、[コンテンツ] タブでポートフォリオ ページを選択できません。そのかわりに、[外部] を選択し、ポートフォリオ ページのURLを貼り付けます。
画像と動画を並べ替える
ギャラリー ブロックには画像や動画を自動的に並べ替えるオプションはありませんが、手動でアイテムを並べ替えることができます。画像を並べ替えると、変更が自動的に保存されます。
- 一度に1つの画像を移動するには、ブロック エディターを開き、画像をクリックして所定の位置にドラッグします。
- 複数の画像を移動するには、Windowsの場合はCtrl、Macの場合は⌘を押したまま、移動したいそれぞれの画像をクリックします。画像を選択した後、画像をクリックして所定の位置にドラッグします。
サイトがバージョン7.0で、ギャラリー ブロックに既存のギャラリーのコンテンツが表示されている場合は、元のギャラリー ページで画像もしくは動画を並べ替えます。
画像や動画を削除する
ギャラリー ブロックから画像や動画を削除する方法は次の通りです。
- ギャラリー ブロック エディターで、削除する画像にカーソルを合わせ、ゴミ箱アイコンをクリックします。
- [確認] をクリックします。
- ブロック エディターの [アップロード] タブで、[コンテンツ] をタップします。
- [編集] をタップします。
- 削除したい画像や動画の赤い[-] アイコンをタップして、[削除] をタップします。
ギャラリー ブロックから画像や動画を削除すると、変更は自動的に保存されます。
画像をトリミングもしくはサイズ変更する (コンピューターのみ)
ギャラリー ブロックのサイズ変更や切り抜きは、さまざまな方法で行うことができます。オプションはレイアウトによって異なります。
- 画像を自動的に同じ縦横比に切り抜くには、[デザイン] タブで [画像を自動トリミング] のチェックをオンにします。
- 個々の画像トリミングするには、組み込みの画像エディターを使用します。
- 画像の中心を変更するには、画像の焦点を変更します。
- ギャラリー ブロック全体を縮小するには、左右どちらかにブロックを追加します。
- 画像のサイズや一度に表示する画像の数を変更するには、トリミング ハンドルを使用します。
- 個々の画像トリミングするには、組み込みの画像エディターを使用します。
- ギャラリー ブロック全体を縮小するには、左右どちらかにブロックを追加します。
- 画像を自動的に同じ縦横比に切り抜くには、[デザイン] タブで [画像をトリミング] のチェックをオンにします。
- すべての画像のサイズを変更するには、[デザイン] タブで行ごとのサムネイル数を変更します。
- 個々の画像トリミングするには、組み込みの画像エディターを使用します。
- 画像の中心を変更するには、画像の焦点を変更します。
- ギャラリー ブロック全体を縮小するには、左右どちらかにブロックを追加します。
- 個々の画像トリミングするには、組み込みの画像エディターを使用します。
- ギャラリー ブロック全体を縮小するには、左右どちらかにブロックを追加します。
モバイルのギャラリー ブロック
モバイル端末のギャラリー ブロックは、レイアウトによっては、コンピューターとは異なる表示や動作をする場合があります。
スライドショー ギャラリー ブロックは、モバイルでもスライドショーのレイアウトを維持します。
- [デザイン] タブで選択した自動トランジションとナビゲーションの設定はそのまま適用されます。クリックスルーURLはタップすると機能します。
- 幅480ピクセル未満のディスプレイでは、タイトルと説明は表示されません。これには、縦長モードで保持されるほとんどのスマートフォンが含まれます。
- タイトルと説明 (カーソルを合わせた時のキャプションを含む) は、横長モードやタブレットなどの大型デバイスでは表示される場合があります。これはデバイスによって異なります。
カルーセル ギャラリー ブロックは、モバイルでもカルーセル レイアウトを維持します。
- 画像によっては、一度に1つの画像しか表示されない場合があります。
- [デザイン] タブで選択した自動トランジションとナビゲーションの設定はそのまま適用されます。クリックスルーURLはタップすると機能します。
グリッド ギャラリー ブロックは、モバイルでは2列幅のグリッドとして表示されます。
- [デザイン] タブで選択した縦横比は、そのまま適用されます。
- 有効にするとライトボックスが表示されます。
- ライトボックスが無効の場合、タップするとクリックスルーURLが機能します。
- ライトボックスで、右下隅の円をタップすると、画像のタイトルと説明が表示されます。
スタック ギャラリー ブロックは、モバイルでも同様に表示され、動作します。