訪問者をページの特定の部分に誘導します。

アンカー リンク (または「ページ移動」) は、ページ上の特定の場所にユーザーを誘導するための特別な URL です。 たとえば、このガイドの目次には、各見出しに移動できるアンカー リンクが含まれています。

このガイドでは、コード ブロックを使用してサイトの任意のブロック セクションにアンカー リンクを追加する方法について説明します。

動画を見る

ステップ 1 - コード ブロックを追加する

ページ エディターでリンク先のセクションまでスクロールし、コード ブロックを追加します。 コード ブロックは任意のブロック セクションに追加できますが、ギャラリー セクション、コレクション ページ セクション、自動レイアウトなどの他のセクション タイプにはブロックを追加できないため、これらのセクション対象外となります。

コード フィールドに、以下を追加します。

<p id="unique-id">ハイパーリンクの移動先</p>

最初のタグ内で、引用符で囲まれている一意の ID を、ハイパーリンク専用の一意の ID に置き換えます。

• 一意の ID 用には任意のテキストを入力できますが、スペースを含めることはできません。 スペースの代わりにダッシュを使って単語を区切ります。
• 一意の ID では大文字と小文字が区別され、ページごとに 1 回のみ使用できます。 詳細については、ベスト プラクティスのヒントをご覧ください。

[ハイパーリンクの移動先] を、サイトに表示する任意のテキストに置き換えます。

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

ステップ 1 で作成したコンテンツにアクセスするために訪問者がクリックするリンクを追加します。 どのタイプのリンクも使用できますが、この例ではテキスト リンクを使用します。

1. リンクするテキストをテキスト ブロックに入力して強調表示にし、テキスト ブロック ツールバーのリンクアイコンをクリックします。
2. URL の下に、そのページの完全な URL (同じページである場合も同様) と、さらにスラッシュ マークを追加します。 以下のように表示されます。

   https://examplesite.com/pageslug/

3. ページの URL スラッグの後にハッシュタグ (#) を入力し、ステップ 1 で作成した一意の ID を入力すると、以下のように表示されます。

   https://examplesite.com/pageslug/#unique-id

4. リンクを新しいタブで開くようにする場合は、[新しいタブでリンクを開く] トグルをオンに切り替えます。
5. Enter をクリックします。

一部のアンカー リンクでは完全な Webサイト アドレスを含めなくてよい場合もありますが、ほとんどのハイパーリンクではアドレスを含めることが推奨されています。

ヒント: ホームページにアンカー リンクを追加する場合は、ページの URL スラッグを含める必要はありません。 ホームページを変更した場合、古いホームページで作成したアンカー リンクに当該の URL スラッグを追加しなければリンクは正常に機能しません。

ステップ 3 - 保存して公開する

[保存] をクリックして変更した内容を公開します。これで、ステップ 2 で作成したリンクは、ステップ 1 で設定したテキストに訪問者を誘導するようになります。

異なる種類のハイパーリンクを使用する

上の例では、ステップ 2 のアンカー リンクに本文を使用していますが、ボタンや画像のクリックスルーなど、どのような種類のリンクでも使用できます。 リンク オプションの種類については、「サイトにリンクを追加する」をご覧ください。

どの種類のリンクにも、上記のステップ 2 で示されている通り以下の形式で URL と一意の ID を追加してください。

https://examplesite.com/pageslug/#unique-id

ランディング テキストの書式を設定する

ランディング テキストを本文以外のテキストとして設定するには、ステップ 1 で <p> と </p> のタグを変更します。HTMLを使い慣れていない場合は、「見出し 1」のタグである <h1>　</h1> を試してみてください。

別のタグを使用する場合は、ステップ 1 で取った手順と同じ方法で一意の ID をコードに追加します。

<h1 id="unique-id">ハイパーリンクの移動先</h1>

空白スペースにリンクする

アンカー リンクは、テキストが表示されていなくても機能します。 ランディング箇所にテキストを表示したくない場合は、ランディング テキストのタグの間には何も挿入しないでください。

<p id="unique-id"></p>

ページの URL スラッグとアンカー リンク

ほとんどの場合は、一意の ID の前に URL とページの URL スラッグを追加することをおすすめします。 アンカー リンクにページの URL スラッグが含まれていない場合、以下は機能しません。

• ハイパーリンクがナビゲーション リンクである場合
• 別のページにリンクする場合

サイト URL を含まないアンカー リンクは、Safari モバイル ブラウザーでの動作にも支障をきたす可能性があります。ページの URL を見つけるには、「URL スラッグ」をご覧ください。

訪問者に Safari モバイル ブラウザーのユーザーがいないことが分かっていて、同じページ上の特定の場所にリンクを繋げる場合 (下のヘッダーまでスクロールする場合など) は、ページの URL スラッグや URL なしで #unique-id をハイパーリンクに使用できます。

ヒント: 訪問者が使用しているブラウザーの種類を確認するには、トラフィック分析パネルをご覧ください。

ページの上部または下部にリンクする

ページの上部または下部にリンクするには、コード挿入を使用してヘッダーまたはフッターにリンクします。 コード挿入はプレミアム機能です。

ページ上部にリンクする

ページ上部へのリンクは、ページのコンテンツが長く、容易にナビゲーションに戻る方法を訪問者に提供したい場合に便利です。 ページの上部にリンクする方法は以下の通りです。

1. ステップ 2 の説明に従って、テキストとアンカー リンクをページの下部またはフッターに追加します。ただし、一意の ID の前にサイトの URL やスラッシュ記号 ( / ) は含めないでください。 テキストとしては [上に戻る] を、一意の ID として #top を使用できます。
2. [コード挿入] パネルを開きます。
3. [ヘッダー] フィールドに、<a id="top"></a> というコードを追加します。リンクの設定時に #top 以外の一意の ID を使用した場合は、最初の <a> タグの ID の部分を必ず正しいものに置き換えてください。
4. [保存] をクリックします。

この方法では、サイト全体の各ページの上部にリンクが繋がります。コードをページの詳細設定に追加すると、同じプロセスを使用して単一ページの上部にリンクすることもできます。

ページ下部にリンクする

ページ下部へのリンクは、訪問者に情報を見つけてもらったり、フッターに含まれるアイテム (ニュースレター ブロックなど) を見てもらったりしたい場合に便利です。

ページの下部にリンクする方法は以下の通りです。

1. ステップ 2 の説明に従って、テキストとアンカー リンクをページのコンテンツの任意の場所に追加します。ただし、一意の ID の前にサイトの URL やスラッシュ記号 ( / ) は含めないでください。 テキストとしては [フッターに移動] を、一意の ID として #bottom を使用できます。
2. [コード挿入] パネルを開きます。
3. [フッター] フィールドに、<a id="bottom"></a> というコードを追加します。リンクの設定時に #bottom 以外の一意の ID を使用した場合は、最初の <a> タグの ID の部分を必ず正しいものに置き換えてください。
4. [保存] をクリックします。

この方法では、サイト全体の各ページのフッターにリンクが繋がります。

制限事項とベスト プラクティス

アンカー リンクは訪問者がサイト内を移動するのに役立つ強力なツールですが、いくつかの点に留意しておくことをおすすめします。

ID は各ページで 1 度のみ使用可能

たとえば、ホームページで「panda」という ID を一度使用すると、その後はホームページに「panda」を ID として追加することはできません。 別のページでの使用は可能ですが、ホームページで再び使用することはできません。

ID では大文字と小文字が区別される

HTMLに「id="Panda"」と書かれている一方でハイパーリンクには ID が「#panda」と記載されている場合、そのリンクは機能しません。

アンカー リンクをクリックすると一意の ID は URL の一部になる

訪問者がアンカー リンクをクリックすると、サイトの URL の末尾に一意の ID が表示されます。 一意の ID が、訪問者に公開されても問題ないものであることを確認してください。

一意の ID には任意のテキストを使用可能

記憶に残りやすい ID を作成することで、設定プロセスが合理化され、問題が発生した場合のトラブルシューティングに役立ちます。 多くの場合、論理的に意味を成す ID が記憶に残りやすいと言えます。たとえば、「上に戻る」リンクに #top を使用するなどが考えられます。

アンカー リンクは、サイトにユーモアや個性を持たせる方法としても活用できます。 訪問者には URL の末尾に ID が表示される点にご注意ください。

リンク先のセクションはブラウザーの上部に表示されます。

ランディング テキストは、ブラウザーの上部に表示されるか、ページ下部にコンテンツがあまりない場合はできる限り上の方に表示されます。

テキストをブラウザー ウィンドウの一番上に表示したくない場合は、改行しないスペースを含む <p> タグをランディング テキストのコピーに追加することで、テキストの前に空白部分を作ることができます。HTMLでは、改行しないスペースは「&nbsp;」と表記されます。

<p>&nbsp;</p> タグをテキストの前に追加するたびに、改行が追加されます。 下の画像を参考にしてください。

ブロックに対応しないセクションへのリンク

ギャラリー セクションや自動レイアウトなどの一部のセクションにはブロックを追加できないため、これらのセクション タイプに直接リンクを繋げることはできません。ただし、以下の手順に従って同様の動作を構築することができます。

1. リンク先のセクションの上に空白のセクションを追加します。
2. 上記の手順に従って、空白のセクションにコード ブロックを追加し、アンカー リンクを設定します。
3. 空白のセクションによって余白が生じるのを避けるには、空白のセクションをクリックしてから [セクションを編集] をクリックし、[画面いっぱいに表示] をオフに切り替えます。

リンクを最新の状態に保つ

今後、プライマリ ドメインを変更したりページの URL スラッグを更新したりする場合は、アンカー リンクも更新してください。古い URL が使用されていると、アンカー リンクは正常に機能しません。

トラブルシューティング

アンカー リンクが機能しない場合

アンカー リンクが機能しない場合は、以下を確認してください。

• ステップ 2 で説明されている通りに、ページの URL スラッグと 2つの「/」記号を含む URL を追加していること。これは、ナビゲーション リンクや他のページからのリンクでは特に重要です。
• ハイパーリンクとランディング テキストに使われている一意の ID がまったく同じものであること。スペルや大文字と小文字に違いがあると、ハイパーリンクは機能しません。
• ランディング テキストのHTMLが正しく設定されていること。たとえば、一意の ID が #bamboo である場合、ランディング テキストのHTMLに追加するリンクは id="bamboo" となります。
• ランディング テキストのHTMLに使われる引用符は、このガイドの例の通り「ストレート」の引用符です。 「曲がった (スマート)」引用符はコード ブロックでは使用できません。 コード ブロックでは既定で「ストレート」引用符が使用されますが、コードをコピーしてブロックに貼り付けた場合は「曲がった」引用符が使用される場合があります。
• www. を URL の冒頭に追加していること (プライマリ ドメインに含まれる場合) 。
• ログアウトした状態、またはシークレット ブラウザーでテストしている場合。 ログインした状態でアンカー リンクをクリックしても動作する場合もありますが、訪問者のエクスペリエンスを検証するためのテストとして信頼できるものではありません。

すべてが正しく設定されていても、以下の場合にはアンカー リンクは機能しません。

• サイトの組み込みドメインを使用しており、ログインした状態でテストしている場合。代わりにシークレット ブラウザーでテストしてください。
• サイトが非公開に設定されており、ログインした状態でアンカー リンクをテストしている場合。代わりにサイト全体のパスワードを設定し、シークレット ブラウザーでテストしてください。
• すでにページで当該の ID が使用されている場合。別の ID を使用するか、大文字と小文字を変更したものを使用してください。

アンカー リンクがコード ブロックの下に移動する場合

サイトのヘッダーで [固定位置] が有効になっている場合、一意の ID の付いたコード ブロックの下にアンカー リンクが表示されることがあります。これを防ぐには、[固定位置] トグルをオフに切り替えるか、コード ブロックとアンカー リンクの移動先コンテンツの間に空白部分を追加します。

備考: カスタム コードの変更は当社サポートの範囲外です。つまり、セットアップやトラブルシューティングに関し、当社はこれ以上のサポートを提供することができません。さらに、コードベースのソリューションに関しては、その機能性やSquarespaceとの完全な互換性は保証できません。これには、Squarespaceのレスポンシブ デザインにおける当該ソリューションの機能性 (特にモバイル デバイス上での外観)や、すべてのテンプレートでソリューションが機能するかどうかが含まれます。カスタム コードは、当社プラットフォームの今後の更新時に、表示に関する問題を引き起こす可能性もあります。当社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• カスタム コードを追加するためのベスト プラクティスについて学びましょう。
• 「サードパーティーのカスタマイズに関する基本ガイド」をお読みください。
• 当社の顧客および開発者用コミュニティである Squarespace Forum をご覧ください。
• Squarespace Expertを雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。

モバイル上のアンカー リンク

デバイスやブラウザーによって、モバイルでのアンカー リンクの動作は異なります。 たとえば、推奨されている通りにアンカー リンクに完全な URL が含まれている場合、ブラウザーはランディング箇所にすぐには移動せず、ランディング箇所でページを再読み込みする場合があります。

モバイル上でのアンカーリンクの動作を別のものにする場合は、/pageslug#unique-id や #unique-id などの代替形式のアンカー リンクをお試しください。ただし、これらの形式は、特定の設定や特定のモバイル ブラウザー (Safari モバイル ブラウザーなど) では機能しない場合があります。

詳細については、「ページの URL スラッグとアンカー リンク」をご確認ください。

バージョン 7.0 のアンカー リンク

サイトのバージョンが 7.0 の場合は、アンカー リンクを設定する際に考慮すべき特別事項がいくつかあります。

Ajax とアンカー リンク

Ajax は、コンテンツの多いページの読み込みスピードを大幅に改善する、サイト読み込みの特別な手法です。 ただし、この機能は (特にモバイル端末では) アンカー リンクの動作に支障をきたす可能性があります。

上記のトラブルシューティングの手順を踏んでも問題が解決しない場合、Ajax をサポートするテンプレートをお使いであれば、サイト スタイルで Ajax を一時的に無効にすることで Ajax が問題の原因であるかどうかを確認できます。Ajax は、以下のテンプレート タイプで利用可能です。

• Brine
• Farro
• Tremont
• York

インデックス ページのアンカー リンク

スタックされたインデックス ページには、コードを使わずにアンカー リンクを追加する別の方法があります。詳しくは、「インデックス ページにアンカー リンクを追加する」をご覧ください。