記事内でリンクして、クリックしたらその場所にジャンプするようにしたい時があります。
ページ内リンク（アンカーリンク）と言いますが今回はその紹介です(^^)
HTMLで直接記述して実現はできますが、HTMLを知らない人（わたし）だととっつきづらいじゃないですか。そんな人のためのプラグイン TinyMCE Advanced で実現してみます(^^)
アンカーの勝手なイメージ
僕の勝手なイメージですが、アンカーというと船の錨（いかり）をイメージします。
いかりは船を流さないように、海底に打つものですが、ロープを引っ張れば船はいかりの位置にたどりつけます。
ページ内リンク（アンカーリンク）も考えは同じで、ジャンプ先（=いかりを打った場所）にロープ（=id）をたどって、辿り着く、ような感じです(^^)
実際の動作
「詳細は”ここ”をクリック」の「”ここ”」が青字になっており、リンクが貼ってあります。
「”ここ”」をクリックすると「！！詳細！！」にジャンプします。
詳細は“ここ”をクリック
↓
↓
↓
↓
TinyMCE Advancedの導入
プラグイン → 新規追加 をクリック
検索窓に TinyMCE Advanced と入力し、「今すぐインストール」をクリック
「有効化」をクリックして有効化する
「設定項目」をクリック
「Block Editor(Gutenberg)」タブが選択し、下にスクロール（デフォルトで選択されています）
「アンカー」をつまんでポイします。
アンカーがポイされました。下にスクロールします。
「変更を保存」を押して終わり！
リンクの貼り方
注意点
段落
ではなくてClassic Paragraph
を選択しないと先程のアンカーメニューが出てこないので注意して下さい(^^)
アンカー発見
段落で記述したブロックも以下のように変換できますので、書き直す必要はないです。ご安心を。
ジャンプ先の設定 「！！詳細！！」
先程の例でリンクを貼ってみます。
リンクを見る時と逆の手順になりますが、リンクを貼るときは、先にジャンプ先を設定してからジャンプ元を設定します。
まず、ジャンプ先である「！！詳細！！」にアンカーを打ち込みます。
Classic Paragraphにしてから、「！！詳細！！」を選択し、「アンカー」をクリックします
アンカーのIDを入力する画面が現れますので、ここで好きな文字列を入力します。ここでは syousai とします。
すると、アンカーが設定されたことを示す いかり⚓マーク が小さく表示されます。
ジャンプ先の設定はこれで終わり
ジャンプ元の設定 ”ここ”
ジャンプ元はClassic Paragraphではなく、段落のままで良いです。
「”ここ”」を選択し、「リンク」をクリックします
リンクを入力する窓が出ますので、先程のアンカーIDであるsyousaiを、先頭に#をつけて #syousai と入力し、エンターボタンをクリックします
正しくリンクが貼れると、青色になります
これでおわり。プレビュー等でジャンプするか確認してみて下さい(^^)
その他
ただ、上記のアンカー設定だけだと、クリックしたらジャンプ先に急に変わってしまいます。
急にジャンプすると、どこまでジャンプしたかわからないですね。
そこでジャンプ先までスクロールして移動するように設定します（ヌルヌルスクロール）
これで動きがわかりやすくなります。
記事が長くなりますので、それは別記事で紹介させていただきます(^^)
参考
参考サイトさん、ありがとうございます！
コメント