WIX

最後:自動スクロールページの設定

1. ナビゲーションボタンを押した時に、各メニューページへ自動スクロールするように設定していきます。まずは、「アンカー1」と書かれたパーツをナビゲーションの近くまで持ってきましょう。

2. 「アンカー」をメニュー項目の分だけ作りましょう。この時、「homeメニュー」はトップ画面にあたるので追加しなくて大丈夫です。下の例の場合、ナビゲーションボタンが5つ(ABOUT, SERVICES, WORK, CONTACT, ACCESS)あるので5つアンカーを作ります。左側のツールバーからアンカーを持ってくるか、既にある「アンカー1」をコピーして作りましょう。

3. アンカーを追加するとアンカー1、2、3・・・と表示されるはずです。しかし、このままだとどのアンカーがどのナビゲーションボタンと結びついているのか非常に分かりにくくなります。そこで、追加したアンカーを選択して「名前を変更」をクリックし、メニューの名前に変更します。

4. アンカーの名前が変更できたら、ナビゲーションとアンカーを結びつける為、ナビゲーションの「メニューを管理」ボタンを押して、下の図のサイトメニューを表示させます。右側の○ボタンをクリックすると「リンクを変更」と書かれた項目が表示されるのでそちらを選択します。

5. 「リンクを選択」画面が表示されます。左側にあるメニューバーの「アンカー」にチェックがついている事を確認し、「ページの位置(アンカー)」を選択すると、3の作業を行った時に名前変更したアンカーの名前が表示されます。下の図の場合、現在サイトメニューで「ABOUT」を選択しているので、「ページの位置(アンカー)」も「ABOUT」を選択します。こうする事で、ナビゲーションのメニューボタンと3の時に設定したアンカーのパーツが紐づいた状態になります。

6. アンカーを各メニューの上まで移動させましょう。ナビゲーションボタンを押すと、アンカーを置いた位置にまでページがスクロールするようになります。下の図では、「Services」と「About」の距離が近いので、テキストボックスを選択し、黄緑色の枠で囲った「ドラッグハンドル」で上下に余白を与えてます。

以上で「自動スクロールページのアンカー設定」が終了となります。うまく自動スクロールできているかどうか、プレビューを使って確認してみましょう。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です