バージョン7.0でインデックス ページにアンカー リンクを追加する

最終更新日 2024年6月28日

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

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

この機能へのアクセス

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

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

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

ヒント

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

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

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

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

ヒント

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

Adding_Index_Page_anchor_links.png

ステ⁠ップ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. Enterを押します⁠。

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

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

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

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

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

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

備考

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

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

Brineテンプレートでボタン ブロック、テキスト リンク、画像のクリックスルーURLを使用したアンカー リンクの例。

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

Bedfordテンプレートでアンカー リンクを横並びに配置した例。

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

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

  • Avenue
  • Flatiron
  • Montauk

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

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

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

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

グリッド インデックス ページでのアンカー リンクの動作の例。

トラブルシ⁠ュ⁠ーテ⁠ィング

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

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

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

  • Squarespace Expertを雇う

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

バージョン7.0でインデックス ページにアンカー リンクを追加する