項目からタイトルへ飛ばしたい（ページ内リンク）

• コピーしました

ページ内リンクのやり方を、実際に試してまとめました。

ページ内リンクのやり方が調べても調べても分からなくて、

最終的にチャットGPT君に聞いてみた話。

実践したらできました。

やりたかったこと

記事内に「項目一覧」を作って、

そこからページ内の見出しへジャンプさせたいと思いました。

いわゆるこんな動きです。

・項目をタップ

→ 該当の見出しへ移動

スマホだとスクロールが長くなるので、

これができるとかなり便利です。

“項目をタップしたら

該当の見出しまで一気に移動する”

これをやりたかった。

でも、全然わからん…

「ページ内リンク」で調べても、

専門用語多い

説明がふわっとしてる

結局どうすればいいのか分からない

で、完全に詰まりました。

そこでチャットGPT君に聞いてみた

正直、最初は半信半疑だったけど、

手順をそのままやってみたら…

👉 普通にできた

実際にやった方法

やることはたった2つ。

① 飛び先（見出し）に目印をつける

飛ばしたい見出しの直前に

カスタムHTMLブロックを追加して、これ(下記↓)を入力

❇編集ページのコード側に入力

👇

<a id="mokuji"></a>

※ mokuji 部分は好きな名前でOK（半角英数字）

写真(例)

写真内では　<a id="af"></a>　としています。

② 項目一覧からリンクを貼る

項目一覧(ビジュアル側)のテキストを選択して、

リンク設定(ビジュアル側)でこれを入力します。

👇

#mokuji

※　#(シャープ)を必ずつける

---

入力すると↓の状態になります。

---

---

これでOK。

 

更新して保存して下さい。

 

 

「目印（id）」＋「#リンク」でつなぐ

完成イメージ

■ 項目一覧

・見出し①

・見出し② ← ②をタップ

・見出し③

＿＿＿＿＿

↓

<a id="mokuji"></a>

見出し②

＿＿＿＿＿＿

👉 これで、タップするとその見出しまで移動します。

私がつまずいたポイント

実際にハマったのはこのあたりです。

・目印（id）を置いていなかった

・「#」をつけていなかった

・全角で入力していた

・保存せずに確認していた

・飛び先(id)とリンクの配置を逆にしそうになった

👉 特に「目印を置く」のが一番重要でした。

■確認するときの注意

編集画面では動かない場合があります。

必ず「公開ページ」で確認してください。

まとめ

・項目一覧から見出しへジャンプできる

・やることは2つだけ

・「目印（id）」＋「#リンク」でつなぐ

・名前は完全一致させる

仕組みを一言で

リンク元（押す文字）と、リンク先（目印）を

同じ名前でつなぐだけ。

やることはこの2つだけ

1️⃣ リンク先に「目印（アンカー）id」を置く

2️⃣ リンク元から「#目印名」で飛ばす

• コピーしました