SWELLでページ内リンクを作成！アンカーポイントでグローバルメニューを活用する方法

今回は、WordPressのテーマ「SWELL」で、トップページの画像や特定のセクションにグローバルメニューから飛ばす方法をご紹介します。アンカーポイントを設定してスムーズにスクロールさせるやり方です。

そんな方はぜひ続きを読んでみてください。

※私がホームページを作っているWebサイト「虎眞トラマサ｜ひげ蛙商店 」を事例に説明していきます！

アンカーポイントとは？

アンカーポイントとは、ウェブページ内の特定の場所に設定する目印のようなものです。
この目印を使って、ページ内の特定の位置に直接ジャンプできるリンクを作成することができます。

アンカーポイントのメリット

アンカーポイントの設定方法

では、SWELLでアンカーポイントを使って、グローバルメニューを活用する設定方法をお伝えしますね！

STEP 1: アンカーポイント（ID)を設定する

まず、アンカーポイントを設定したいページの編集画面を開きます。

アンカーポイントをつけるブロックを選択します。
左側の「ブロック」設定のところの一番下に、【高度な設定 】をクリックします。

【HTMLアンカー】とでてくるので、そこにアンカーポイントのID（英語がGOOD）を書きます。
例では、「NEWS」の項目なので「nesw」と入れています。

※画面キャプチャで、私が作成中のサイトはこちら 「虎眞トラマサ｜ひげ蛙商店 」→ https://tyn-c.com/toramasa

同じようにして、アンカーポイントを入れたいページ内の他の部分にもIDを設定します。

STEP2: グローバルメニューを設定する

次に、グローバルメニューにアンカーポイントを追加します。

WordPress管理画面の左メニューから【外観】→【メニュー】を選択します。

メニューを初めて作る場合は【メニューを作成】をクリックしてメニューを作ります。

【メニュー項目を追加】のエリアに【カスタムリンク】を選びます。

「URL」フィールドに、「#（先ほど設定したID）」を入力します。
※「#news」は、先ほど設定したID名です。URLに「#」をつけることで、ページ内の指定の位置に飛ぶようになります。

※このホームページは、１ページだけなので「#news」でだけでアンカーポイントに飛ぶようになっています。
　ただ、複数ページあるホームページやブログでは、[http://ページのURL/#news」のように、ページURLを入れて設定しましょう。
　この「虎眞トラマサ｜ひげ蛙商店 」なら「 https://tyn-c.com/toramasa/#news」です。

「リンクテキスト」には、メニューに表示したい名前（例：「NEWS」など）を入力し、「メニューに追加」をクリックします。

すべて登録したら「メニューを保存」をクリックします。

メニューの位置を確認する

グローバルメニューが表示されていることを確認し、設定が正しく反映されているかを確認します。
トップページにアクセスし、グローバルメニューから先ほど設定した項目をクリックしてみてください。

※画面キャプチャで、私が作成したサイトはこちら 「虎眞トラマサ｜ひげ蛙商店 」→ https://tyn-c.com/toramasa

まとめ

これで、SWELLでグローバルメニューにアンカーポイントを設定し、トップページの特定の画像やセクションに飛ばす方法が完了です。アンカーポイントをうまく活用することで、ユーザーの利便性を向上させ、サイト全体の回遊性を高めることができます。

いかがでしたか？今回の内容が、ファビコンデザインの参考になれば幸いです。
次回も、SWELLを使ったサイト運営のコツをお届けしますので、ぜひお楽しみに！

＼ 本当に使いやすいテーマなら／