バージョン7.0では、スタック インデックス ページに独自のURL構造があり、この構造を使ってカスタム コードなしでアンカー リンク (または「ページ移動」) を作成できます。これらのアンカー リンクを通じてインデックス ページ上の特定の場所に移動できます。

たとえば、Haydenテンプレートのデモ サイトで [作品を見る] ボタンをクリックすると、ページの「Moreau」セクションまでスクロールダウンします。

このガイドはバージョン7.0のインデックス ページ用です。バージョン7.1でアンカー リンクを追加する場合、またはバージョン7.0で他のタイプのページにアンカー リンクを追加する場合は、「アンカー リンクの作成」を参照してください。

サポートされるテンプレート

インデックス ページのアンカー リンクは、スタック インデックス ページを含むテンプレートに最も適しています。これらのテンプレート ファミリーでは、アンカー リンクをクリックすると、インデックス ページのそのセクションにスクロールします。

• Bedford
• Brine - Ajax読み込みがアンカー リンクの動作と競合する可能性があります。 組み込みのインデックス ナビゲーションを代わりに使用してください。
• Pacific - リンクの末尾に-sectionを追加する必要があります。詳細については、以下のステップ3を参照してください。

ヒント: 一部のグリッド形式のインデックス ページは、同様の機能をサポートしています。カスタム コードを使用して、任意のテンプレートに通常のアンカー リンクを追加することもできます。

ステップ1 - URLスラッグを見つける

[ページ] パネルで、リンク先に指定するインデックス セクションにカーソルを合わせます。をクリックし、そのセクションのページ設定を開きます。

[URLスラッグ] フィールドからURLスラッグをコピーします 。このURLスラッグを使用してアンカー リンクを作成します。

ヒント: 訪問者がそのセクションに移動すると、URLスラッグがブラウザー バーに表示されることがあります。 このフィールドに新しいテキストを入力すると、URLスラッグを変更できます。

ステップ2 - リンクを作成する

訪問者がクリックするリンクを追加します。 あらゆる種類のリンクを使用できますが、以下の手順では例としてテキスト リンクを使用します。 テキスト ブロックで、テキストを強調表示し、テキスト ブロック ツールバーのリンク アイコンをクリックします。

ヒント: 各テンプレートのインデックスには固有のオプションがあります。 詳細については、テンプレート ファミリーのガイド (Bedford、Brine、またはPacific) を参照してください。

ステップ3 - ページのURLスラッグを追加する

次に、以下の手順に従ってください。

1. [URL] フィールドに、ステップ1でコピーしたURLスラッグを貼り付けます。
2. URLスラッグの先頭にハッシュタグ記号 (#) を追加してリンクを完成させてください。 この例では、アンカー リンクは#hours-and-locationです。
3. [新しいタブでリンクを開く] トグルをオフに切り替えます。
4. Pacific、Charlotte、Horizon、Naomiの各テンプレートの場合にのみ、アンカー リンクの末尾に-sectionを追加します (例: #hours-and-location-section)。
5. [入力] をクリックします。

ステップ4 - インデックスのURLスラッグを追加する

ステップ2で同じインデックス内のセクションにリンクを追加した場合は、このステップはスキップしても構いません。

ナビゲーション リンクや他のページのリンクなど、その他のリンクにはアンカー リンクの前にインデックス ページのURLスラッグを含めてください。 これにより、リンクは以下の場所から確実に機能するようになります。

• 別のページ
• サイトのナビゲーション
• サブページの直接URL

これを追加する方法は以下の通りです。

1. ページ設定からインデックス ページのURLスラッグをコピーします。
2. リンク エディターを再び開きます。
3. 次のように、アンカー リンクの前の2つの/記号の間にページのURLスラッグを追加します。

https://examplesite.com/indexslug/#pageslug

4. [入力] をクリックします。

注: プライマリ ドメインのドメイン名の前にwww.が含まれている場合は、アンカー リンクのURLにもこれを含めてください。

例

複数のセクションにアンカー リンクを追加して、訪問者がインデックス ページ内を移動しやすくします。この例では、Brineテンプレートと3つの異なるリンク タイプ (ボタン ブロック、テキスト リンク、画像のクリックスルーURL) を使用します。

アンカー リンクを横並びにした配置でナビゲーションを作成します。 この例では、Bedfordテンプレートとテキスト リンクを使用します。

グリッド インデックス ページとアンカー リンク

グリッド インデックス ページを含むこれらのテンプレート ファミリーは、同様の機能をサポートしています。

• Avenue
• Flatiron
• Montauk

次のURL形式を使用して、これらのテンプレートでインデックス ページのアンカー リンクを作成できます。

/index-page-slug/#/page-slug

これは、サイトのナビゲーションやサイトの他のページからインデックス内のページにリンクする場合に適しています。 ページは、インデックスでアイキャッチ画像をクリックした場合と同じように、インデックス固有の形式で開きます。

この例では、Avenueテンプレートを使用します。

トラブルシューティング

アンカー リンクが機能しない場合は、次のヒントが役立つ可能性があります。

• 必要に応じ、2つの/記号を含むインデックス ページのURLスラッグをステップ4の説明に従って追加したかを確認してください。 これは、ナビゲーション リンクや他のページからのリンクに必要です。
• モバイルで問題が発生しており、Brineファミリーに含まれるテンプレートを使用している場合は、一時的にAjaxを無効にして、Ajaxが問題の原因であるかどうかを確認してください。
• インデックス ページのURLスラッグとセクションのページのURLスラッグが正しいことを確認してください。これらのスラッグのいずれかを変更した場合は、アンカー リンクを手動で更新する必要があります。