【超簡単】STUDIOでページ内リンクを設定する方法

STUDIOでページ内リンクを設定する方法

どうも、仙台でWeb制作フリーランスとして活動しているキクチウェブのキクチです。
本日も毎度お馴染みノーコードツールSTUDIOについて解説していきます。

縦長のシングルページだとページ内リンクをよく使います。
今日はこのページ内リンクをSTUDIOで実装する方法を解説していきます。

ちなみにページ内リンクとはこういったものです。


とんでもなく簡単にできるのでサクッと見ていきましょう。

結論から言うと

・リンク先にID名をつける
・リンク元にリンク先のID名を設定する

これだけです。
言葉だけだとちょっと分かりづらいかもしれないので、画像付きで解説していきます。

ではやっていきましょう。

目次

リンク先にID名をつける

今回はSTUDIOで用意している無料テンプレートから始めていきたいと思います。
使用するテンプレートは「Small Company」です。

皆さんはご自身のサイトで設定して頂ければと思います。

なんとこの「Small Company」テンプレートはデフォルトでページ内リンクの設定がされています。
つまりこの設定の真似をすれば簡単にページ内リンクを実装できるというわけです。

リンク先のどの要素に対してID名が設定されているのか確認しましょう。

この画像を見て分かる通り、ご挨拶という項目の全体を囲っているボックス(div)に対して「#message」というID名が指定されているのが分かります。

他の箇所を見ても、会社情報という項目の全体を囲っているボックス(div)に対して「#company」というID名を指定しています。

このようにID名は項目の全体を囲んでいるボックスに対して指定します。

ちなみにID名の指定方法は、項目の全体を囲っているボックスを選択した状態で
画面中央の右側の「三本線」から

IDの部分に分かりやすいID名を設定します。

リンク元にリンク先のID名を設定する

リンク元になるボタンのリンクに、リンク先のID名を設定します。

赤枠で囲った部分がリンク元のボタンになります。

試しに「ご挨拶」を選択してみましょう。

その状態で画面中央の右側の「三本線」から

「リンク」の部分には「トップページでID名が#message」と設定されています。

このようにリンクの部分には先ほど設定しておいたリンク先のID名を選択して紐付けます。

はい。これで完成です。
あまりにも簡単すぎて拍子抜けしちゃいますよね。

このように同じページ内で移動ができることが確認できればページ内リンクの設定完了です。

注意点

ページ内リンクのボタンを押した時に、画面が遷移する時間を調整することはできません。

現状のページ内リンクによるページ遷移が早いから遅くしたいといったようなことはできないので、その辺は頭に入れておきましょう。

まとめ

ご覧の通り、ノーコードツールSTUDIOではとても簡単にページ内リンクを設定することが可能です。

下層ページを作るほどでもないシンプルな縦長のシングルページの場合、ページ内リンクはよく使うと思うのでぜひご活用ください。

今回ページ内リンクはとても簡単に実装できたのですが、STUDIOでは現状できないこともあります。
こちらの記事でできないこと一覧を紹介しているので、サイトをSTUDIOで構築するか迷われている方は一度ご覧いただければと思います。

今日は大谷選手が36号の弾丸ライナーホームランを打ってくれたので、上機嫌なキクチでした。
暑くなってきたので、皆さまお身体にはお気をつけくださいませ。ではでは。

仕事のご依頼や当サイトについての質問などは下記のお問い合わせフォームからご連絡ください。

場合によっては回答にお時間をいただくことがあります。ご了承ください。

    This site is protected by reCAPTCHA and the GooglePrivacy Policy and Terms of Service apply.

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!
    目次