Studioでアンカーリンク（ページ内リンク）を設定する方法を初心者にもわかりやすく解説
Mari
2024.09.26
Updated:2024.12.24
縦長でコンテンツ量の多いWebページでは、ページ内の特定の場所へ直接移動できるアンカーリンク（ページ内リンク）を設定することで、閲覧者の使いやすさを向上できます。
この記事では、STUDIOでアンカーリンクを設定する方法を初心者の方にもわかりやすく解説します。アンカーリンクの参考になるテンプレートもご紹介しますので、ぜひ最後までお読みください。
アンカーリンク（ページ内リンク）とは
アンカーリンク（ページ内リンク）とは、ページ内の特定の場所へ直接移動するためのリンクのことです。主にヘッダーや記事の目次などに使用されます。
アンカーリンクを設定することで、ユーザーがページをスクロールせずに目的の情報へアクセスできるようになります。特に画面サイズが小さいスマートフォンでは、ページを最後までスクロールするのに時間がかかるため、アンカーリンクの設定がおすすめです。
STUDIOでアンカーリンクを設定する方法
STUDIOでアンカーリンクを設定する方法は、次の通りです。
リンク先にIDを設定する
IDを含むページ・URLをリンクに設定する
ここでは、STUDIOテンプレート「FLOWER COMPANY」のヘッダーに設定しているアンカーリンクを例に解説します。STUDIO Store からアクセスできる「エディターを試す」からも実際の設定を確認できますので、ぜひチェックしてみてください。
1. リンク先にIDを設定する
まず、リンク先に設定したいボックスを選択し、右側のボックス設定パネルを開きます。
ボックス設定パネルのID欄に、任意のIDを設定します。
IDの文字列には、半角英数字、ハイフン、アンダースコアが使用可能です。なるべくリンク先のコンテンツ内容が伝わりやすい文字列を設定しましょう。
また、同じページ内で重複する文字列を使用できない点にも注意が必要です。例えば、今回設定した「about」の文字列は、同じページ内で他のボックスに設定することができません。
2. IDを含むページ・URLをリンクに設定する
続いて、リンク元に設定したいボックスを選択し、右側のボックス設定パネルを開きます。
リンクの「＋」マークをクリックし、設定したIDを含むページを選択します。
これでアンカーリンクの設定が完了です。
なお、リンク先にIDを設定すると、次の2種類のリンクが選択できるようになります。
リンクの種類 | 詳細 |
#about | IDが設定されたページ内でのみ動作するリンクです。 |
/#about | 別のページからでもIDを設定した場所に移動できるリンクです。ヘッダーなど、ページを跨いで配置するメニューでの利用に適しています。 |
リンクの設定後は、アンカーリンクが正しく動作するか、ライブプレビューで必ず確認しましょう。
STUDIOのアンカーリンクの位置がズレる場合の対処方法
ヘッダーを固定配置していると、アンカーリンクをクリックした時に位置がズレたと感じる場合があります。理由は、リンク先のボックスの上部がヘッダーと重なってしまうからです。
そのため、リンク先のボックスにはヘッダーの高さや画面上部の余白を考慮したパディングを設定する必要があります。例えば、STUDIOテンプレート「FLOWER COMPANY」では、高さ100pxのヘッダーを固定配置し、リンク先のボックスの上部に120pxのパディングを設定して余白を確保しています。
ページ全体のバランスも見ながら、余白を調整しましょう。
STUDIOのアンカーリンクがクリックできない場合の一例
STUDIOのアンカーリンクがクリックできない場合は、別のボックスが意図せず覆い被さっていることがケースがあります。
例えば、STUDIOテンプレート「La Prima Pagina」では、重ね順「5」のローディングアニメーション用ボックスが存在します。
初期設定では他のボックスに重ならないように、スケールX「0」にしていますが、「1」に変更すると、その透明なボックスが画面全体に広がり、アンカーリンク用のボックスに重なってしまいクリックできなくなります。
スケールXを「0」に戻すか、重ね順を「-1」など小さな値にするとクリックできるようになります。このように、アンカーリンクに見えないボックスが重なっていないかを、レイヤーパネルを確認しながらデザインを調整しましょう。
STUDIOのアンカーリンクの参考になるテンプレート
ここまでに紹介したテンプレート以外にも、「STUDIO Store」にはアンカーリンクを活用したテンプレートが数多く出品されています。
Small Company
「Small Company」は、小規模な会社や個人の方におすすめの無料テンプレートです。制作は「STUDIO Experts」の株式会社メアリーアンドディーンが担当。
ヘッダーやモバイル用のメニューモーダルにアンカーリンクが設定されています。ヘッダーが固定配置されていないため、デザインをカスタマイズしてもアンカーリンクがズレる心配がありません。
BtoB商材の標準LP
「BtoB商材の標準LP」は、売れるロジックを取り入れたBtoB向けのテンプレートです。
こちらのテンプレートでも、ヘッダーやモバイル用のメニューモーダルにアンカーリンクが設定されています。ヘッダーは固定配置されていますが、リンク先のボックスに適切なパディングが設定されているため安心です。
最後に
STUDIOなら、IDとリンクを設定するだけで簡単にアンカーリンクの設定が完了します。
設定方法がわからない場合も、STUDIOテンプレートの「エディタで試す」から実際の設定を確認できます。また、STUDIOで作成されたWebサイト事例集「STUDIO Showcase」を参考にすることも可能です。
この記事を参考に、ぜひアンカーリンクを活用してみましょう。
