今回は特定の文字や画像やボタンやアイコンなどをクリックすると、同一のページや指定したページの指定した場所へ移動してくれるアンカーの設定方法について解説します。
今回はホームページを２つ用意して解説します。
Sample Page１
仮にURLをhttps://www.weluka.me/blog/anchorsample1と設定
Sample Page２
仮にURLをhttps://www.weluka.me/blog/anchorsample2と設定
同じページにアンカーを設定する場合
例としてSample Page１の上部にある「アンカーセクション１はこちら」のボタンをクリックすると、同じSample Page１の下部にあるアンカーセクション１まで一気に移動するアンカーの設定方法を解説します。
※アンカーへ移動する際、スムーススクロールしますが、これはwelukaの仕様となっております。
①Sample Page１の、移動したい場所にあるアンカーセクション１にアンカーを設定します。
②sectionの中の一般設定にあるアンカーの項目に、アルファベットで始まるアンカー名を、好きなアルファベットと数字の組み合わせで記入します。
※今回は仮に「anchor1」と設定しています。
③アンカーリンクを設定したいボタンの編集を開きます。
④ボタン設定の中にある一般設定の項目のリンクURLを設定ます。
⑤リンクURLに#anchor1と入力します。
⑥設定を保存してください。
別ページにアンカーを設定する場合
例としてSample Page１の上部にある「アンカーセクション２はこちら」のボタンをクリックすると、Sample Page２の下部にあるアンカーセクション２まで一気に移動するアンカーの設定方法を解説します。
※アンカーへ移動する際、スムーススクロールしますが、これはwelukaの仕様となっております。
①Sample Page２の、移動したい場所にあるアンカーセクション２にアンカーを設定します。
②sectionの中の一般設定にあるアンカーの項目に、アルファベットで始まるアンカー名を、好きなアルファベットと数字の組み合わせで記入します。
※今回は仮に「anchor2」と設定しています。
③アンカーリンクを設定したいボタンの編集を開きます。
④Sample Page１のボタン設定の中にある一般設定の項目のリンクURLを設定ます。
⑤リンクURLにはリンク先のSample Page２のURLの末尾に#anchor2と付け加えたURL入力します。
※Sample Page２のURLはhttps://www.weluka.me/blog/anchorsample2なのでhttps://www.weluka.me/blog/anchorsample2#anchor2と入力。
⑥設定を保存してください。
