バージョン7.0では、インデックス ページはさまざまなページの画像とコンテンツを独自のレイアウトに配置し、訪問者が複数のサブページからコンテンツを閲覧できる単一の閲覧先を作成します。

インデックス ページは、特定のテンプレートで使用できます。

このガイドはバージョン7.0用です。バージョン7.1では、スタック インデックス ページ レイアウトに似た効果を得るためにページ セクションを使用することや、グリッド インデックス ページ レイアウトに効果を与えるためにポートフォリオ ページを使用することができます。

動画を見る

インデックス ページがどのように機能するかを確認するには、次の動画をご覧ください。

インデックス ページのデザイン

各テンプレート ファミリーには独自のインデック ススタイルがあり、次の3つのデザインのいずれかに分類されます。

• グリッド - インデックスの各ページは、ページ上に画像を作成します。画像をクリックすると、接続されたページが開きます。このデザインは、サイト全体のコンテンツにリンクする視覚的なナビゲーション グリッドを形成します。以下に例を示します。
• スタック - インデックス内の各ページは、1つのスクロール ページに1つのセクションを作成します。セクションは縦に積み重なるため、訪問者は統一された外観で多くの情報をスクロールできます。これは、アコーディオンを折りたたんだような形のパンフレットのデジタル版と考えてください。すべてのページを同時に開いて見ることができます。以下に例を示します。
• スライドショー - 各ページは、コンテンツ オーバーレイを備えたフルブリードの背景画像として表示されます。ページ タイトルをクリックすると、接続されたページが開きます。これは、画像を使用してさまざまなコンセプトやポートフォリオを紹介する方法として優れています。以下に例を示します。

さらに、ナビゲーション内のインデックス ページのリンクはテンプレートによって異なります。任意のテンプレートのナビゲーションでページのドロップダウン メニューを作成するには、代わりにドロップダウンを作成してください。詳細については、「バージョン7.0のドロップダウンとインデックス ページ」をご参照ください。

インデックス ページの機能の比較

これらのテンプレート ファミリーでは、インデックスは次のように表示されます。テンプレートがリストにない場合、そのテンプレートにはインデックス ページがありません。

テンプレート ファミリー	スタイル	アイキャッチ画像	サポートされているページ
Avenue	グリッド	必須	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
Bedford	スタック	オプション	レイアウト
Brine	スタック	オプション	ギャラリー、レイアウト
Flatiron	グリッド	必須	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
Forte	スライドショー	必須	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
Momentum	スライドショー	オプション	ギャラリー
Montauk	グリッド	必須	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
Pacific	スタック	オプション	アルバム、ギャラリー、レイアウト
Supply	グリッド	必須	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
Tremont	スライドショー	オプション	アルバム、ブログ、ギャラリー、イベント、商品、レイアウト
York	グリッド	オプション	アルバム、ブログ、ギャラリー、イベント、商品、プロジェクト、レイアウト

インデックス ページを設定するには、この後のガイドに従ってください。

インデックス ページを追加する

テンプレートがインデックス ページをサポートしている場合は、次の手順に従います。

Squarespaceアプリでは、新しいページの追加はiOSバージョンでのみ可能です。

1. [ページ] パネルを開いて、[+] アイコンをクリックします。
2. ページ メニューから [インデックス] を選択します。
3. ページ タイトルを入力し、Enterキーを押して保存します。これは後で変更できます。

ページ設定の編集

タイトルやURLスラッグなど、インデックス ページの設定を変更できます。一部のテンプレートでは、タイトル、説明、およびアイキャッチ画像がページの上部に表示されます。

インデックス ページの設定を編集する方法は次のとおりです。

1. [ページ] パネルで、インデックスにカーソルを合わせます。
2. をクリックします。
3. 変更を加えたら、[保存] をクリックします。

各種のオプションの詳細については、「ページ設定」をご参照ください。

ページを追加、編集、配置する

次に、ページを追加、編集、配置して、インデックスのコンテンツを構築します。各ページには、インデックスのセクションが作成されます。

ヒント: インデックス ページには最大100ページまで追加できますが、25ページを超えるページを追加することはおすすめしません。追加するコンテンツが増えるほど、ページの読み込みにかかる時間が長くなります。

ページのアイキャッチ画像を追加する

インデックス内のすべてのページやセクションにアイキャッチ画像を追加できます。テンプレートのインデックス スタイルによっては、この画像がナビゲーション画像、バナー、または背景画像になる場合があります。

一部のテンプレートでは、注目の動画を追加できます。グリッド インデックス ページでは動画をアイキャッチ画像として使用できないため、代わりに画像を使用してください。

インデックス ページのスタイルを設定する

テンプレートによってインデックスのスタイル (グリッド、スタック、またはスライドショー) が決まります。サイト スタイル パネルには、インデックスの外観をカスタマイズするための微調整オプションがあります。

グリッド

アイキャッチ画像の数や形状、パディング、ページ タイトルの表示方法を変更できます。オプションはテンプレートによって異なります。これらのテンプレート ファミリーについては、以下のリンクをご参照ください。

• Avenue
• Flatiron
• Montauk
• Supply
• York

スタック

フォント、ナビゲーション要素、ページ コンテンツの表示方法を変更できます。オプションはテンプレートによって異なります。これらのテンプレート ファミリーについては、以下のリンクをご参照ください。

• Bedford
• Brine
• Pacific

ヒント: セクションの管理に関するその他のヒントをご覧ください。

スライドショー

ページ名のスタイルの設定や、訪問者がクリックして接続ページに移動する方法の選択ができます。オプションはテンプレートによって異なります。これらのテンプレート ファミリーについては、以下のリンクをご参照ください。

• Forte
• Momentum
• Tremont

スタック インデックス セクションを管理する

スタック インデックス ページでは、[ページ] パネルの [セクションを管理] を使用してセクションの移動、追加、削除ができます。

セクションを管理するには、次の手順に従います。

1. [ページパネル] を開きます。
2. インデックス ページをクリックします。
3. サイト プレビューの上部にカーソルを合わせて、[セクションを管理] をクリックします。

インデックスのズームアウト バージョンが表示され、これを使用してセクションをより簡単にスクロールできます。

• 任意のセクションをクリックしてドラッグし、並べ替えます。
• [+] および [-] アイコンを使用してセクションを追加または削除します。
• [ページ] パネルに戻るには、左上の [戻る] をクリックします。

その他のコンテンツを表示する

インデックス内のサポートされていないページ タイプのコンテンツを表示するには、インデックスにレイアウト ページを追加します。その後、次のメソッドを使用して、そのレイアウト ページにコンテンツを表示します。

• ブログ投稿 - 概要ブロックを追加してブログ ページに接続します。
• 商品 - 概要ブロックを追加して商品ページに接続します。商品ブロックを使用して個々の商品を追加することもできます。
• ギャラリー画像 - ギャラリー ブロックを追加します。既存のギャラリー ページに接続することも、画像を直接追加することもできます。個々の画像ブロックを追加することもできます。
• イベント - カレンダー ブロックを追加してイベント ページに接続します。
• アルバム トラック - オーディオ ブロックを追加し、そこにトラックを直接追加します。

アーカイブ ブロックを使用して、ブログ投稿、ギャラリー画像、商品、イベントのリストを作成することもできます。

ヒント: コレクション ページ (ブログ ページなど) を、リンクされていないセクションに移動すると、ナビゲーションに表示されなくなります。

Momentum

Momentumテンプレートはギャラリー ページのみをサポートしています。サイト上の他のコンテンツにリンクするには、ギャラリー画像の説明へのリンクを追加するか、メイン ナビゲーションにページを追加して、リンクがナビゲーション バーに表示されるようにします。

特別なURL

以下のテンプレートでは、ギャラリー ページとレイアウト ページのサブページURLをインデックス ページから開くと、ハッシュタグ (#) が表示されます。以下に例を示します。

http://www.mydomain.com/#/page-title

ページのハッシュタグ バージョンには、次のテンプレート ファミリーの特別なフォーマットがあります。

• Avenue - ナビゲーション画像と [前へ]/[次へ] リンクを使用します。ページ ヘッダーとページ フッターは表示されません。ギャラリー ページの画像が縦に積み重なります。
• Flatiron - ナビゲーション画像と矢印を使用します。レイアウト ページには、ページのタイトルと説明が表示されます。
• Montauk - 画像ナビゲーションを使用します。レイアウト ページのバナーは表示されません。代わりに、インデックス ページのバナーが表示されます。

ハッシュタグがない場合、特殊な形式のページのバージョンは表示されません。これは、次の場合に発生します。

• 訪問者はサブページの直接URL (ハッシュタグなし) にアクセスします。
• サブページにはパスワードがあります。
• 訪問者がサブページを新しいタブまたはウィンドウで開く。

検索エンジンでは、URLのハッシュタグ バージョンはインデックス化されません。これにより、Webサイトの重複したコンテンツを検索エンジンが認識しなくなります。これはSEOのベスト プラクティスのひとつです。検索エンジンの結果からサブページに移動した訪問者には、特別なフォーマットが設定されていないバージョンが表示されます。これらのページが検索で表示されないようにするには、各サブページにnoindexタグを追加します。

パスワードとインデックス ページ

ページ パスワードを使用して、インデックス コンテンツが公開されないようにすることができます。

メイン インデックス ページを、そのページの設定でパスワード保護します。

サブページをパスワードで保護する方法は、インデックスのスタイルによって異なります。

• グリッド インデックスとスライドショー インデックスの場合は、各サブページに直接パスワードを追加します。
• スタック インデックスの場合、メイン インデックス ページのパスワードがサブページを保護します。

グリッドおよびスライドショーのインデックス内の、パスワードで保護されたサブページの場合は次のようにします。

• サブページのアイキャッチ画像は、通常、メイン インデックス ページに表示されます。
• 訪問者がその画像をクリックするか、直接URLにアクセスすると、ページのパスワードを入力するよう求められます。
• Avenue、Flatiron、Montaukの各ファミリーでは、特別なフォーマットは表示されません。

パスワードで保護されたスタック インデックスの場合、次の手順に従います。

• 訪問者がサブページのダイレクトURLにアクセスすると、メイン インデックス ページのページ パスワードを入力するよう求められます。
• [ページ] パネルで、サブページのパスワード フィールドが非表示になります。 インデックスからページをドラッグして、パスワードを設定します。ページにパスワードを追加した後は、そのページをインデックスにドラッグすることはできません。

注: 以前は、スタック インデックスのサブページにパスワードを追加できました。サブページにすでにパスワードが設定されている場合、次の手順に従います。

• ページのアイキャッチ画像とコンテンツがインデックスに表示されます。
• 訪問者がページURLに直接アクセスしない限り、ログイン プロンプトは表示されません。
• パスワードを削除すると、[パスワード] フィールドは表示されなくなります。
• インデックスからページをドラッグすると、パスワードを解除するまで再びドラッグすることはできません。

SEOとソーシャル共有

インデックスはページのコレクションであるため、検索エンジンやソーシャル メディア サイトは、Squarespaceの他のページとは異なる方法でインデックス ページを扱います。詳細については、「バージョン7.0のインデックス ページのSEOとソーシャル共有」をご覧ください。

他のテンプレートでインデックスを複製する

テンプレートがインデックス ページや好みのインデックス ページ スタイルをサポートしていない場合、任意のテンプレートでインデックスの外観を再作成することができます。

• グリッド - レイアウト ページで、クリックスルー リンクを含む画像のグリッドを作成します。
• スタック - レイアウト ページに画像やテキストを追加します。
• スライドショー - カバー ページを追加し、[メディア] タブに複数の画像を追加します。