【STUDIO】リンクを設定する方法

STUDIOでリンクを設定する方法 STUDIO

コーディングをせずとも、おしゃれで本格的なWebサイト制作が可能なSTUDIO。

ページ公開後の作業では、直感的なマウス操作と基本的なキーボード操作でページの修正を行うことができます。

画像やテキストの入れ替えといった軽微な修正なら、とにかく簡単な所がSTUDIOの大きな特徴です。

しかし、リンク(URL)を設定する作業になると、「リンク設定をする場所が見つからない!」という人も多いようです。

そこで今回の記事では、STUDIOでリンクの設定方法を画像付きで紹介します。

【記事で紹介していること】

・基本的なリンクの設定方法

・リンクの差し替え方法

リンクの差し替え方法も最後の方に紹介しているので、ぜひご参考ください!

基本的なリンクの設定方法

パーツへのリンク設定

STUDIOリンク設定

画像やリンクボタンなど、リンク設定を行う方法は、ほとんどのパーツで同じ手順で行います。

今回はアイコン画像を例に、リンク設定の手順を紹介します▼

① リンクを設定したいパーツを選択

② 右上の「▷」のようなマークをクリック

③「URL」のタブを選択

④ 設定したいURLを入力しエンター

⑤ 別タブ表示のON/OFFを設定

まずは、①リンクを設定したいパーツを選択します。

パーツを選択すると、パーツの右上に「▷」のようなマークが表示されるので、②「▷」をクリック。

STUDIOリンク設定

以下のように、右側にリンク設定などを行うための黒いパネルが出現します。

パネルの中の、③URLのタブを選択し、④URLを入力した後エンターキーを押します。

STUDIOリンク設定

URLを入力し、エンターキーを押すと、URLの下に「New Tab」のON/OFF設定のスイッチが出現します。

任意で、⑤ 別タブ表示のON/OFFを設定します。

STUDIOリンク設定

「New tab」設定後の、リンククリック時の動作は以下の通り▼

ON→別タブでページを開く

OFF→同じタブ内でページを開く

上記キャプチャのように、リンク設定ができたら、選択したパーツの右上に青枠のURLが出現します。

ハイパーリンク

今回は「Instagram」というテキストにハイパーリンクを設定します。

ハイパーリンクは、文字に下線が引かれている場合が多いため、この章では下線の引き方までを紹介します。

ちなみに、リンクを設定する手順は、前述した「パーツへのリンク設定」と同じです。

ハイパーリンクの設定手順は以下の通り▼

① ハイパーリンクを設定したいテキスト(< p >)を選択

② 右上の「▷」のようなマークをクリック

③「URL」のタブを選択

④ 設定したいURLを入力しエンター

⑤ 別タブ表示のON/OFFを設定

⑥ ページ上部の「ボックス」タブを選択

⑦ ボックスの下線を1pxで設定

まずは、① ハイパーリンクを設定したいテキスト(< p >)を選択します。

選択したテキストのブロックの右上に「▷」が表示されるので ②「▷」クリック

STUDIOリンク設定

すると、以下のように右側にリンク設定などを行うための黒いパネルが出現します。

パネルの中の、③URLのタブを選択し、④URLを入力した後エンターキーを押します。

STUDIOリンク設定

URLを入力し、エンターキーを押すと、URLの下に「New Tab」のON/OFF設定のスイッチが出現します。

任意で、⑤別タブ表示のON/OFFを設定を行います。

STUDIOリンク設定

「New tab」設定後、リンククリック時の動作は以下の通り▼

ON→別タブでページを開く

OFF→同じタブ内でページを開く

リンクの設定が完了したら、テキストに下線を引きます。

リンク設定を行なったパーツを選択した状態で、ページ上部の⑥「ボックス」タブを選択

ボックスの設定が表示されるため、「枠線」を選択し、⑦下線を1pxで設定します。

STUDIOリンク設定

上記の設定方法で「Instagram」というテキストに下線が表示されました。

これでハイパーリンクのようになりました。

メニューボタン(ページ内リンク)

STUDIOリンク設定

メニューボタンへのリンク設定も、パーツへのリンク設定とほとんど同じ手順を踏みます。

① ハイパーリンクを設定したいテキスト(< p >)を選択

② 右上の「▷」のようなマークをクリック

③「ページを検索」の枠内にカーソルを当てる

④ 任意のページ内アンカーを選択

まずは、① ハイパーリンクを設定したいテキスト(< p >)を選択します。

選択した< p >のブロックの右上に「▷」が表示されるので ②「▷」をクリック

以下のように、右側にリンク設定などを行うための黒いパネルが出現します。

パネルの中の、「ページ」のタブを選択した状態で、④「ページを検索」の枠内をクリックしてカーソルを当てます。

ページ内に設置されているアンカー(id)が表示されるので、④設定したいページ内アンカーを選択します。

これでページ内リンクの設定ができました。

メニューボタンに外部リンクを設定する場合は、「パーツへのリンク設定」と同じ手順で外部リンクを設定してみましょう。

リンクの差し替え方法

STUDIOリンク設定

リンクの差し替えもシンプルな操作で行うことができます。

今回はinstagramのURL差し替えを例に、リンク差し替えの手順を紹介します▼

① リンクを差し替えたいパーツ(T< a >)を選択

② 右上の青枠のURLをクリック

③「URL」のタブを選択

④ 設定したいURLを入力しエンター

⑤ 別タブ表示のON/OFFを設定

まずは、①リンクを差し替えたいパーツ(T< a >)を選択します。

すでにリンクが設定されているため、パーツの右上に青枠のURLが表示されるはずです。

続いて ②青枠のURLをクリックします。

STUDIOリンク設定

以下のように、右側にリンク設定などを行うための黒いパネルが出現します。

パネルの中の、③URLのタブを選択し、「リンク」の枠内に表示されているURLを削除します。

④差し替え後のURLを入力した後、エンターキーを押します。

STUDIOリンク設定

URLを入力し、エンターキーを押すと、URLの下に「New Tab」のON/OFF設定のスイッチが出現します。

STUDIOリンク設定

必要があれば、⑤リンクをクリックした際の別タブ表示のON/OFFを設定します。

「New tab」設定後、リンククリック時の動作は以下の通り▼

ON→別タブでページを開く

OFF→同じタブ内でページを開く

参考にしたチュートリアル

本記事では以下のチュートリアルを参考にしました。

本家のSTUDIOでは動画のチュートリアルも豊富に公開されています。

ぜひ、参考にしてみてください。

タイトルとURLをコピーしました