「WordPressサイト制作を簡単にする国産サイトビルダー weluka:ウェルカ」テクニカルブログ

アンカーリンクを設定する

今回は特定の文字や画像やボタンやアイコンなどをクリックすると、同一のページや指定したページの指定した場所へ移動してくれるアンカーの設定方法について解説します。

今回はホームページを2つ用意して解説します。

Sample Page1

仮にURLをhttps://www.weluka.me/blog/anchorsample1と設定

Sample Page2

仮にURLをhttps://www.weluka.me/blog/anchorsample2と設定

同じページにアンカーを設定する場合

例としてSample Page1の上部にある「アンカーセクション1はこちらのボタンをクリックすると、同じSample Page1の下部にあるアンカーセクション1まで一気に移動するアンカーの設定方法を解説します。

※アンカーへ移動する際、スムーススクロールしますが、これはwelukaの仕様となっております。

Sample Page1の、移動したい場所にあるアンカーセクション1アンカーを設定します。

sectionの中の一般設定にあるアンカーの項目に、アルファベットで始まるアンカー名を、好きなアルファベットと数字の組み合わせで記入します。

 ※今回は仮に「anchor1」と設定しています。

アンカーリンクを設定したいボタン編集を開きます。

 

ボタン設定の中にある一般設定の項目のリンクURLを設定ます。

 

⑤リンクURLに#anchor1と入力します。

 

⑥設定を保存してください。

別ページにアンカーを設定する場合

例としてSample Page1の上部にある「アンカーセクション2はこちらのボタンをクリックすると、Sample Page2の下部にあるアンカーセクション2まで一気に移動するアンカーの設定方法を解説します。

※アンカーへ移動する際、スムーススクロールしますが、これはwelukaの仕様となっております。

Sample Page2の、移動したい場所にあるアンカーセクション2アンカーを設定します。

sectionの中の一般設定にあるアンカーの項目に、アルファベットで始まるアンカー名を、好きなアルファベットと数字の組み合わせで記入します。

 ※今回は仮に「anchor2」と設定しています。

アンカーリンクを設定したいボタン編集を開きます。

Sample Page1ボタン設定の中にある一般設定の項目のリンクURLを設定ます。

 

⑤リンクURLにはリンク先のSample Page2のURLの末尾に#anchor2と付け加えたURL入力します。

 ※Sample Page2のURLはhttps://www.weluka.me/blog/anchorsample2なのでhttps://www.weluka.me/blog/anchorsample2#anchor2と入力。

 

⑥設定を保存してください。

完成したサンプルページで動きを確認できます