今回は、ノーコードツールSTUDIOでアンカーリンクを設定する方法を紹介します。
「STUDIOでアンカーリンクを使いたい！」
「でも難しそうだし、そんな機能作れるの？」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、初心者の方でも、アンカーリンクを設定したサイトを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでアンカーリンクの設定方法を紹介
それでは、ノーコードツールSTUDIOでアンカーリンクの設定方法を紹介します。
今回は、以下のようにアンカーリンクを設定していきたいと思います。
以下の5STEPで解説していきます。
① 管理画面にアクセス
② テンプレートのサイトの確認
③ グローバルナビゲーションの編集
④ IDの設定
⑤ アンカーリンクの設定
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① 管理画面にアクセス
それでは早速ご説明します。
まずは、サイトを作るための管理画面にアクセスしたいので、「新しいプロジェクト」をクリックします。
そして、「テンプレート」を使って解説していきたいと思います。
今回は、「shadow」を利用します。
「このテンプレートを選択」をクリックしましょう。
次に、プロジェクト名を入力します。
今回は、「anchor link」と名前をつけて、「作成」をクリックします。
これで管理画面にアクセスできました。
② テンプレートのサイトの確認
次に、このテンプレートのサイトがどんなサイトかを「ライフプレビュー」で確認します。
右上にある「ライフプレビュー」をクリックします。
「スタート」を押しましょう。
URLをクリックします。
すると、このテンプレートのサイトが確認できます。
このサイトは、「ファーストビュー」、「About」、「News」、「Access」、「Contact」の5つの構成でできております。
■ファーストビュー
■About
■News
■Access
■Contact
今回は、のちほど、以下の赤枠の「グローバルナビゲーション」を「Home」、「About」、「News」、「Access」、「Contact」になるように変更します。
そして、それぞれのボタンを押すと、以下のように関連する部分までリンクするように「アンカーリンク」を設定していきます。
ちなみに、すでに「About」がありますが、現在の仕様では、「About」を押すと別のページに遷移するようになっております。
■Aboutの押下後
そのため、この「About」も関連する部分までリンクするような仕様に変更していきます。
それでは、ライフプレビュー画面を閉じて、以下の赤枠をクリックして、管理画面に戻ります。
③ グローバルナビゲーションの編集
まずは、「グローバルナビゲーション」を編集します。
「News」、「Access」、「Contact」のボタンを追加しましょう。
編集したいグローバルナビゲーションのレイヤーを確認するために、左下にあるマークを押して、「レイヤーパネル」を開きましょう。
STUDIOで編集する際は、「レイヤーパネル」を開き、編集したい文字が、どのようなレイヤー構造になっているかを確認しながら編集していくようにしましょう。
今回は、「About」を複製して、「News」、「Access」、「Contact」の3つを作成していきたいので、「About」がどこのレイヤーにあるか確認します。
まずは、「About」の上で4回クリックしてください。
すると、この「About」の文字は、「header」タグの中にある2つの「div」タグの中にあることがわかります。
ちなみに、1番下の＜a＞タグが「Home」と連動しており、
1番上の<p>タグが「電話番号」、
上から2番目の＜a＞タグが「Price」と連動しております。
今回は、「電話番号」と「Price」は不要になりますので、上から2つの＜p＞タグと＜a＞タグを選択した上で、「deleteキー」を押して削除しておきます。
そして、「About」を複製して、「News」、「Access」、「Contact」の3つを作成するために、1番上の＜a＞タグを選択して3つ複製しましょう。
Macの方は、「command +c」と「command +v」、Windowsの方は、「Ctrl +c」と「Ctrl +v」で複製できます。
これで、3つの文字が複製できました。
次に、文字を変更していきます。
1番上の＜a>タグを選択してからグローバルナビゲーションの1番右側の「About」の上でダブルクリックします。
そして、「Contact」に文言を変更します。
同様に、「News」と「Access」に文言を変更してください。
これでグローバルナビゲーションの編集は完了です。
④ idの設定
次に、「アンカーリンク」を設定するために、まずはリンクさせたい文字にidを設定させる必要があります。
まず、1つ目にidを設定させるのは、「About shadow」の文言です。
「About shadow」の文言の上で、3回クリックして、レイヤーパネルから＜h2＞タグが選択されているかを確認しましょう。
「About shadow」のボックスの右上にある「矢印」をクリックします。
すると、テキストの設定画面が開きますので、IDに「about2」と入力しましょう。
同様に、「News」の文言のIDには「news2」、
そして「Access」を選択し、「Access」の文言のIDには「access2」、
「Contact」の文言のIDには「contact2」を設定します。
こちらの「矢印」のボタンを押して、テキストの設定タブを閉じます。
これでidの設定は完了です。
⑤ アンカーリンクの設定
次に、先ほど作成したグローバルナビゲーションに、アンカーリンクを設定していきます。
まずは、レイヤーパネルから1番上の＜a＞タグの「Contact」を選択します。
そして、テキストボックの右上に表示されている「about」の文字をクリックして、テキストの設定タブを開きます。
そして、「リンク」に設定されている「about」のバツボタンを押して削除します。
すると検索ボックスが表示されるので、検索ボックスの上でクリックをして、「♯contact2」を選択しましょう。
検索ボックスで先ほど設定した「♯contact2」を選択することで、グローバルナビゲーションの「Contact」を押すと、「♯contact2」を設定した場所まで遷移するようになります。
次に上から2つ目の＜a＞タグの「Access」を選択します。
そして、idに「♯access2」を選択します。
上から3つ目の＜a＞タグの「News」も選択し、
「♯news2」を選択します。
最後に、上から4つ目の＜a＞タグの「About」を選択し、
「♯about2」を選択しましょう。
これでアンカーリンクの設定は完了です。
テキストの設定タブとレイヤーパネルは閉じて、「ライフプレビュー」で確認します。
URLをクリックしましょう。
そして、「About」を押すと「About」まで遷移し、
「News」を押すと「News」まで遷移し、
「Access」を押すと「Access」まで遷移し、
「Contact」を押すと「Contact」まで遷移します。
これで、アンカーリンクを設定することができました。
まとめ
今回は、アンカーリンクを設定する方法を以下の5STEPで解説しました。
① 管理画面にアクセス
② テンプレートのサイトの確認
③ グローバルナビゲーションの編集
④ IDの設定
⑤ アンカーリンクの設定
アンカーリンクは、今回のようにグローバルナビゲーションに設定することで、サイトの滞在率が伸びますので、ぜひ積極的に利用していきましょう。
他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。
