どうも、仙台でWeb制作フリーランスとして活動しているキクチウェブのキクチです。
本日も毎度お馴染みノーコードツールSTUDIOについて解説していきます。
縦長のシングルページだとページ内リンクをよく使います。
今日はこのページ内リンクをSTUDIOで実装する方法を解説していきます。
ちなみにページ内リンクとはこういったものです。
とんでもなく簡単にできるのでサクッと見ていきましょう。
結論から言うと
これだけです。
言葉だけだとちょっと分かりづらいかもしれないので、画像付きで解説していきます。
ではやっていきましょう。
リンク先に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号の弾丸ライナーホームランを打ってくれたので、上機嫌なキクチでした。
暑くなってきたので、皆さまお身体にはお気をつけくださいませ。ではでは。
