Yorkテンプレート ファミリーのプロジェクト ページは、エレガントなポートフォリオ レイアウトを作るためにデザインされたカスタム ギャラリー ビューです。プロジェクト ページを使用しすれば、テキストと画像を組み合わせた目を引くレイアウトを作成できます。

York、Artesia、Flores、Harris、Jasper、Jones、Lange、ShiboriおよびTaylorは、基本的な構造と機能を共有しています。このガイドは、これらすべてのテンプレートに適用されます。これらのテンプレートは、さまざまなオプションを提供するギャラリー ページもサポートしています。

バージョン7.1はプロジェクト ページをサポートしていません。Squarespaceアプリでは、プロジェクト ページを追加もしくは編集することはできません。

プロジェクト ページを設定する

プロジェクト ページを設定する方法は次の通りです。

1. [ページパネル] を開きます。
2. +アイコンをクリックして [プロジェクト] を追加します。
3. 最良の結果を得るには、複数の画像もしくは動画を追加し、それぞれにタイトルと説明を付けます。

画像と動画を追加する

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

1. [ページパネル] を開きます。
2. 左側のパネルでプロジェクト ページをクリックします。
3. 画像をアップロードし、ストック画像を追加し、動画を追加します。すべての動画にはサムネイル画像が必要です。
4. 画像や動画の公開ステータスを設定します。

すでにアップロードした画像や動画の設定を編集するには、サイド パネルで画像もしくは動画をダブルクリックします。

レイアウト

レイアウトを調整するには、サイト スタイルの [プロジェクト: レイアウト] セクションを使用します。

• 画像の配置 - すべてのキャプションと画像を右、左、もしくは中央に揃えます。
• 画像の間隔 - プロジェクトの画像の間隔を調整します。
• バナーの間隔 - ページ ヘッダーと最初の画像の間隔を調整します。ページのテキストの高さ: イントロ テキスト セクションのテキストの高さもこれに影響する可能性があります。
• 縦長画像と正方形画像の全幅を許可 - メイン コンテンツ エリアの幅で縦長画像と正方形画像を表示します。[フルブリード プロジェクト] が選択されている場合、ブラウザーの幅に合わせて表示されます。この微調整は、ポートレイトや正方形のキャプションのスタイルが [標準] もしくは [オフセット] に設定されている場合に表示されます。

注: プロジェクト ページはライトボックスやディープリンクURLをサポートしていません。プロジェクト ページの画像にクリックスルーURLを追加できます。これはギャラリー ブロックや概要ブロックに接続されているときには機能しますが、プロジェクト ページ自体では機能しません。プロジェクト ページで機能するリンクが必要な場合は、画像のキャプションにリンクを追加してください。

キャプションを追加する

タイトルと説明文を追加・調整する方法は次の通りです。

1. [ページパネル] を開きます。
2. プロジェクト ページをクリックします。
3. サイド パネルの画像をダブルクリックします。
4. [タイトル] フィールドと [説明] フィールドにテキストを追加します。

タイトルと説明は、横長画像の下、縦長画像と正方形画像の下もしくは横に表示されます。サイト スタイルの [プロジェクト: レイアウト] セクションでレイアウトを調整します。

• すべての画像名や説明テキストを表示もしくは非表示にするには、[プロジェクトのキャプションを表示] 微調整オプションを使用します。
• [横の間隔を縮める] を選択すると、キャプションのない横長画像の下の間隔が削除されます。

サイト スタイルの[プロジェクト: フォント] セクションにある微調整オプションを使用して、画像のタイトルと説明文のテキストのスタイルを設定します。

• テキストを左、右、もしくは中央に寄せるには、[キャプション タイトルの配置] と [キャプション本文の配置] の微調整オプションを使用します。
• 縦長画像や正方形画像の横にキャプションを表示するには、[代替キャプションを画像に合わせる] 微調整オプションを使用します。

[画像の配置: 中央] を選択し、[プロジェクトのキャプションを表示] にチェックを入れた場合は、[縦長と正方形のキャプション スタイル] 微調整オプションと [横長のキャプション スタイル] 微調整オプションで、ページ上のキャプションの表示位置をさらに微調整できます。

• どちらの微調整オプションでも、[標準] を選択するとキャプションが画像のすぐ下に表示され、[オフセット] を選択すると、キャプションがさらに下に移動し、次の画像から等間隔で表示されます。
• [縦長と正方形のキャプション スタイル: 交互] を選択すると、キャプションが正方形および縦長画像の横に移動します。キャプションは左から右に交互に表示されます。キャプションのない画像は中央に配置されます。
• [縦長キャプション スタイル: はめ込み] を選択すると、横長画像の下のキャプションが少しオーバーラップするように上に移動します。

画像と動画のサイズ

プロジェクト ページの画像は、フルブリードに設定されていても、元のサイズより大きく引き伸ばされることはありません。これにより、画像がぼやけたり、ピクセル化して見えたりするのを防ぐことができます。

• 一般に、プロジェクト ページの画像サイズは、画像の元のサイズによって決まります。ページ上で画像をより大きく見せたい場合は、より大きなサイズの画像をアップロードします。
• ページ上の画像のサイズを小さくするには、より小さいサイズの画像をアップロードします。
• サイトの外側のパディングの微調整は、フルブリードに設定されていない画像の幅に影響する可能性があります。
• 動画の幅は、ホスティング サイトによって設定されます。動画の幅をカスタマイズするには、動画埋め込みコードを使用し、コード内で幅を手動で設定します。
• バナーとレスポンシブ デザインに関するヘルプについては、ベスト プラクティスを参照してください。

フルブリード画像

フルブリード画像は、外側のパディングを無視してブラウザーの端まで広がります。これを有効にするには、まず画像のサイズが十分であることを確認してください。プロジェクト ページの画像は、元のサイズよりも大きく引き伸ばされることはありません。また、Squarespaceではレスポンシブ デザインを最適化しているため、2500ピクセルを超える幅は表示されませんが、最良の結果を得るには、少なくとも2500ピクセル幅の画像をアップロードすることをおすすめします。

画像が十分に大きい場合は、サイト スタイルを使用して画像をフルブリードにすることができます。これはサイト上のすべてのプロジェクト ページに影響します。

プロジェクト ページでは、次の場合にのみ画像をフルブリード表示できます。

• 画像が中央に配置されている。
• キャプションが画像の下にある。
• 横長以外の画像をフルブリードに設定する前に、横長画像をフルブリードに設定する必要があります。

すべての画像をフルブリードで表示するには、次の手順でまず横長の画像を設定します。

1. サイト スタイルを開き、[プロジェクト: レイアウト] セクションまでスクロールします。
2. [画像配置: 中央] を選択します。これにより、画像が中央に配置されます。
3. キャプションがない場合でも、[プロジェクトのキャプションを表示] がチェックされていることを確認してください。
4. [フルブリード] プロジェクトを選択します。これにより、横長の画像がフルブリードに設定されます。

次に、横長以外の画像を設定します。

1. 横長と正方形キャプションのスタイル: 標準もしくはオフセットを選択します。これにより、キャプションが横長以外の画像の下に移動します。
2. [縦長と正方形の全幅を許可] にチェックを入れます。これにより、横長以外の画像がフルブリードに設定されます。
3. Save and refresh the page.

画像を移動する

ページ上の画像の順序を並べ替えるには、ページのパネルで順序を変更します。プロジェクト ページのサイド パネルには、ギャラリー ページと同じ機能があります。

画像とそれに対応するタイトルとキャプションは、任意のプロジェクト ページやギャラリー ページ間で移動できます。詳細については、「ページ間でのコンテンツの移動」を参照してください。

ヘッダーとフッター

画像とキャプションに加えて、プロジェクト ページは次をサポートします。

• ページ バナー - ページ上部に表示される画像や動画。
• ページ タイトル、説明、およびカテゴリー テキスト - ページの上部に表示されるテキスト。ページ バナーがある場合は、このテキストが画像もしくは動画の上に表示されます。
• ヘッダーとフッターの領域 - ページの上部と下部の領域で、独自のコンテンツでカスタマイズできます。

プロジェクト ページにアイキャッチ画像がない場合は、プロジェクト ページに最初に追加された画像が自動的に上部のバナー画像になります。アイキャッチ画像を追加して置き換えるか、[サイト スタイルにプロジェクト バナーを表示する] のチェックをオフにしてすべてのプロジェクト ページで非表示にできます。

ページの読み込み

プロジェクト ページの画像とキャプションは、ページを下にスクロールすると下から上にスライドして表示されます。この効果を取り除くには、[カスケード画像とキャプション] 微調整オプションのチェックをオフにします。チェックをオフにすると、代わりに画像とキャプションがフェードインします。

ギャラリー ページとプロジェクト ページ

プロジェクト ページに加えて、これらのテンプレートは標準のギャラリー ページをサポートします。

プロジェクト ページは画像とテキストを組み合わせるのに最適ですが、ギャラリー ページは画像と動画だけに焦点を当てるのに最適です。プロジェクト ページとは異なり、ギャラリー ページはディープリンクURL、クリックスルーURL、およびライトボックス機能をサポートします。

両方のオプションをテストするには、ギャラリー ページとプロジェクト ページの間で画像を移動します。

注: ギャラリー ページはページ バナー動画をサポートしていません。

テンプレートの切り替え

York、Artesia、Flores、Harris、Jasper、Jones、Lange、Shibori、Taylor以外のテンプレートに切り替えると、プロジェクト ページはギャラリー ページに変換されます。

York、Artesia、Flores、Harris、Jasper、Jones、Lange、Shibori、Taylorに戻した場合、元の形式を再現するには、新しいプロジェクト ページとギャラリー ページを作成し、そこに画像を移動する必要がある場合があります。

モバイル

モバイル端末や幅の狭いブラウザーでは、コンテンツは 1列に垂直にスタックされます。