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

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

バージョン7.0のサイトでは、コンテンツ エリアにコード ブロックを追加することでアンカー リンクを作成できます。

このガイドでは、バージョン7.0のサイトにアンカー リンクを手動で作成する方法について説明します。バージョン7.0のテンプレートの中には、インデックス ページのアンカー リンクが組み込まれているものもあります。バージョン7.1でアンカー リンクを追加するには、「アンカー リンクを作成する」をご参照ください。

動画を見る

この動画では、バージョン7.1でアンカー リンクを手動で追加する方法について説明しますが、その手順はバージョン7.0でも同じです。

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

ページ エディターで、リンクしたい場所までスクロールし、コード ブロックを追加します。どのブロック コンテンツ エリアにも追加できますが、ブロックを追加できないブログやギャラリーなどのコレクション ページには追加できません。

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

ハイパーリンクの移動先

最初のタグ内で、引用符で囲まれている一意の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で

と

のタグを変更します。HTMLを使い慣れていない場合は、「見出し1」のタグである

をお試しください。

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

ハイパーリンクの移動先

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

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

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

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

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

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

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

#unique-id

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

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

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

ページ上部にリンクする

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

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

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

ページ下部にリンクする

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

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

1. ステップ2の説明に従って、テキストとアンカー リンクをページのコンテンツの任意の場所に追加します。ただし、一意のIDの前にサイトのURLやスラッシュ記号 (/) は含めないでください。テキストとしては [フッターに移動] を、一意のIDとして#bottomを使用できます。
2. [コード挿入] パネルを開きます。
3. [フッター] フィールドに、というコードを追加します。リンクの設定時に#bottom以外の一意のIDを使用した場合は、最初のタグの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は、ブラウザーのアドレス バー内で訪問者に表示される点にご注意ください。

リンク先のランディング テキストはブラウザーの上部に表示されます。

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

テキストをブラウザー ウィンドウの一番上に表示したくない場合は、改行しないスペースを含む

タグをランディング テキストのコピーに追加することで、テキストの前に空白部分を作ることができます。HTMLでは、改行しないスペースは「 」と表記されます。

 

タグをテキストの前に追加するたびに、改行が追加されます。たとえば、見出し3のランディング テキストの前に2行の改行が必要な場合、コード ブロックは次のコードを使用します。

 
 
ここがリンクの移動先

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

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

トラブルシューティング

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

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

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

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

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

Ajaxとアンカー リンク

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

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

• Brine
• Farro
• Tremont
• York

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

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

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

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

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

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

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

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