今回は、ノーコードツールSTUDIOでアンカーリンクを設定する方法を紹介します。
「STUDIOでアンカーリンクを使いたい!」
「でも難しそうだし、そんな機能作れるの?」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、初心者の方でも、アンカーリンクを設定したサイトを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでアンカーリンクの設定方法を紹介
![](https://design-yandy.com/wp-content/uploads/2020/12/47cd55886c5bd4804d609d6b82e4f2f5.png)
それでは、ノーコードツールSTUDIOでアンカーリンクの設定方法を紹介します。
今回は、以下のようにアンカーリンクを設定していきたいと思います。
以下の5STEPで解説していきます。
① 管理画面にアクセス
② テンプレートのサイトの確認
③ グローバルナビゲーションの編集
④ IDの設定
⑤ アンカーリンクの設定
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① 管理画面にアクセス
それでは早速ご説明します。
まずは、サイトを作るための管理画面にアクセスしたいので、「新しいプロジェクト」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2021/12/004.00_00_37_10.静止画001-1024x576.jpg)
そして、「テンプレート」を使って解説していきたいと思います。
![](https://design-yandy.com/wp-content/uploads/2021/12/004.00_00_46_15.静止画002-1024x576.jpg)
今回は、「shadow」を利用します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_00_30_05.静止画001-1024x576.jpg)
「このテンプレートを選択」をクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_00_35_03.静止画002-1024x576.jpg)
次に、プロジェクト名を入力します。
今回は、「anchor link」と名前をつけて、「作成」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_00_45_15.静止画003-1024x576.jpg)
これで管理画面にアクセスできました。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_00_53_03.静止画004-1024x576.jpg)
② テンプレートのサイトの確認
次に、このテンプレートのサイトがどんなサイトかを「ライフプレビュー」で確認します。
右上にある「ライフプレビュー」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_01_04_11.静止画005-1024x576.jpg)
「スタート」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_01_08_13.静止画006-1024x576.jpg)
URLをクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_01_11_18.静止画007-1024x576.jpg)
すると、このテンプレートのサイトが確認できます。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_01_17_18.静止画008-1024x576.jpg)
このサイトは、「ファーストビュー」、「About」、「News」、「Access」、「Contact」の5つの構成でできております。
■ファーストビュー
■About
■News
■Access
■Contact
今回は、のちほど、以下の赤枠の「グローバルナビゲーション」を「Home」、「About」、「News」、「Access」、「Contact」になるように変更します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_01_48_19.静止画014-1024x576.jpg)
そして、それぞれのボタンを押すと、以下のように関連する部分までリンクするように「アンカーリンク」を設定していきます。
ちなみに、すでに「About」がありますが、現在の仕様では、「About」を押すと別のページに遷移するようになっております。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_02_00_01.静止画015-1024x576.jpg)
■Aboutの押下後
そのため、この「About」も関連する部分までリンクするような仕様に変更していきます。
それでは、ライフプレビュー画面を閉じて、以下の赤枠をクリックして、管理画面に戻ります。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_02_19_13.静止画017-1024x576.jpg)
③ グローバルナビゲーションの編集
まずは、「グローバルナビゲーション」を編集します。
「News」、「Access」、「Contact」のボタンを追加しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_02_29_09.静止画018-1024x576.jpg)
編集したいグローバルナビゲーションのレイヤーを確認するために、左下にあるマークを押して、「レイヤーパネル」を開きましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_02_37_02.静止画019-1024x576.jpg)
STUDIOで編集する際は、「レイヤーパネル」を開き、編集したい文字が、どのようなレイヤー構造になっているかを確認しながら編集していくようにしましょう。
今回は、「About」を複製して、「News」、「Access」、「Contact」の3つを作成していきたいので、「About」がどこのレイヤーにあるか確認します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_02_50_04.静止画020-1024x576.jpg)
まずは、「About」の上で4回クリックしてください。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_14_09.静止画021-1024x576.jpg)
すると、この「About」の文字は、「header」タグの中にある2つの「div」タグの中にあることがわかります。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_32_14.静止画022-1024x576.jpg)
ちなみに、1番下の<a>タグが「Home」と連動しており、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_38_14.静止画023-1024x576.jpg)
1番上の<p>タグが「電話番号」、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_44_03.静止画024-1024x576.jpg)
上から2番目の<a>タグが「Price」と連動しております。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_46_17.静止画025-1024x576.jpg)
今回は、「電話番号」と「Price」は不要になりますので、上から2つの<p>タグと<a>タグを選択した上で、「deleteキー」を押して削除しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_03_58_07.静止画026-1024x576.jpg)
そして、「About」を複製して、「News」、「Access」、「Contact」の3つを作成するために、1番上の<a>タグを選択して3つ複製しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_04_06_10.静止画027-1024x576.jpg)
Macの方は、「command +c」と「command +v」、Windowsの方は、「Ctrl +c」と「Ctrl +v」で複製できます。
これで、3つの文字が複製できました。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_04_36_20.静止画028-1024x576.jpg)
次に、文字を変更していきます。
1番上の<a>タグを選択してからグローバルナビゲーションの1番右側の「About」の上でダブルクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_04_52_06.静止画030-1024x576.jpg)
そして、「Contact」に文言を変更します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_04_55_22.静止画031-1024x576.jpg)
同様に、「News」と「Access」に文言を変更してください。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_05_00_20.静止画032-1024x576.jpg)
これでグローバルナビゲーションの編集は完了です。
④ idの設定
次に、「アンカーリンク」を設定するために、まずはリンクさせたい文字にidを設定させる必要があります。
まず、1つ目にidを設定させるのは、「About shadow」の文言です。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_05_21_12.静止画033-1024x576.jpg)
「About shadow」の文言の上で、3回クリックして、レイヤーパネルから<h2>タグが選択されているかを確認しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_05_37_07.静止画034-1024x576.jpg)
「About shadow」のボックスの右上にある「矢印」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_05_44_22.静止画035-1024x576.jpg)
すると、テキストの設定画面が開きますので、IDに「about2」と入力しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_05_58_05.静止画036-1024x576.jpg)
同様に、「News」の文言のIDには「news2」、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_06_13_05.静止画037-1024x576.jpg)
そして「Access」を選択し、「Access」の文言のIDには「access2」、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_06_33_08.静止画038-1024x576.jpg)
「Contact」の文言のIDには「contact2」を設定します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_06_50_11.静止画039-1024x576.jpg)
こちらの「矢印」のボタンを押して、テキストの設定タブを閉じます。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_06_56_18.静止画040-1024x576.jpg)
これでidの設定は完了です。
⑤ アンカーリンクの設定
次に、先ほど作成したグローバルナビゲーションに、アンカーリンクを設定していきます。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_09_19.静止画041-1024x576.jpg)
まずは、レイヤーパネルから1番上の<a>タグの「Contact」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_16_08.静止画042-1024x576.jpg)
そして、テキストボックの右上に表示されている「about」の文字をクリックして、テキストの設定タブを開きます。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_25_03.静止画043-1024x576.jpg)
そして、「リンク」に設定されている「about」のバツボタンを押して削除します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_34_15.静止画044-1024x576.jpg)
すると検索ボックスが表示されるので、検索ボックスの上でクリックをして、「♯contact2」を選択しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_49_10.静止画045-1024x576.jpg)
検索ボックスで先ほど設定した「♯contact2」を選択することで、グローバルナビゲーションの「Contact」を押すと、「♯contact2」を設定した場所まで遷移するようになります。
次に上から2つ目の<a>タグの「Access」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_07_55_04.静止画046-1024x576.jpg)
そして、idに「♯access2」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_02_06.静止画047-1024x576.jpg)
上から3つ目の<a>タグの「News」も選択し、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_06_00.静止画048-1024x576.jpg)
「♯news2」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_13_00.静止画049-1024x576.jpg)
最後に、上から4つ目の<a>タグの「About」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_18_18.静止画050-1024x576.jpg)
「♯about2」を選択しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_24_15.静止画051-1024x576.jpg)
これでアンカーリンクの設定は完了です。
テキストの設定タブとレイヤーパネルは閉じて、「ライフプレビュー」で確認します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_38_04.静止画052-1024x576.jpg)
URLをクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_41_18.静止画053-1024x576.jpg)
そして、「About」を押すと「About」まで遷移し、
「News」を押すと「News」まで遷移し、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_55_01.静止画055-1024x576.jpg)
「Access」を押すと「Access」まで遷移し、
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_08_59_13.静止画056-1024x576.jpg)
「Contact」を押すと「Contact」まで遷移します。
![](https://design-yandy.com/wp-content/uploads/2022/01/シーケンス-01.00_09_05_03.静止画057-1024x576.jpg)
これで、アンカーリンクを設定することができました。
まとめ
![](https://design-yandy.com/wp-content/uploads/2021/09/スクリーンショット-2021-09-04-14.59.10.png)
今回は、アンカーリンクを設定する方法を以下の5STEPで解説しました。
① 管理画面にアクセス
② テンプレートのサイトの確認
③ グローバルナビゲーションの編集
④ IDの設定
⑤ アンカーリンクの設定
アンカーリンクは、今回のようにグローバルナビゲーションに設定することで、サイトの滞在率が伸びますので、ぜひ積極的に利用していきましょう。
他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)