ãƒšãƒ¼ã‚¸å†…ãƒªãƒ³ã‚¯ãŒå‹•ä½œã—ãªã„å ´åˆã®å¯¾å‡¦æ–¹æ³•ï¼ˆã‚¹ãƒšãƒ¼ã‚¹ã‚„ãƒ”ãƒªã‚ªãƒ‰ã€Œ.ã€ãªã©ã‚’å«ã‚€å ´åˆï¼‰

ブログでページ内リンク（アンカーリンク）を設定したのに、うまく飛べなかった経験はありませんか？

はてなブログだけでなく、Markdownを使用している場合、アンカーリンクは使用した文字（スペースやピリオドなど）によって自動的に変換されることがあります。

今回は、そのような時の簡単な対策を見つけたので、記事にしていきます！

はじめに

アンカーリンクについて、この機会に少し調べてみました。

あるサイトでは、アンカーリンクは、ページ内リンクのことで、別のページにジャンプするのはハイパーリンクである、と書かれていました。なるほど、納得できます。

一方、他のサイトでは、アンカーリンクは、ページ内リンクと別のページにジャンプするリンクの両方のこと、と書かれていました。ほんと？と思いました。

そこで、非常に詳しいサイトがありました。全部読めなかったです（笑）

qiita.com

これを見て、ページ内リンクが飛べない問題は、はてなブログだけじゃないことを知りました。

この記事では、あまり深入りせず、はてなブログで記事を書いてるときに、リンクで飛べなくて困ることがないことを目標に書いていこうと思います！

では、本題に進みます。

ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.

この見出しの最後に、意図的に、スペースとピリオドを入れておきました。

まず、ページ内リンクが正常に動作する場合から示します。

入力内容

[はじめに](#はじめに)

実際のリンク

はじめに

正しく、ジャンプできました。

次に、ここ見出しにジャンプするページ内リンクを書いてみます。

入力内容

[ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.](#ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.)

実際のリンク

ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.

やはり、ジャンプできませんでした。

この例は、見出しにスペースとピリオドを含んでいるため、ページ内リンクが動作しませんでした。

早速、次で対処方法を紹介します！

ページ内リンクが動作しない場合の対処方法

はてなブログの自動で目次を作ってくれる機能を使います！

プレビューを開くと、目次を自動で作ってくれています。そのリンクを使えば、正しく動作するアンカーリンクを記述することが出来ます。

目次のアンカーリンク

このスクショでは、マウスのポインタは映ってないですが、「ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.」の見出しの上にマウスを置いています。

Chromeの場合、マウスを置いたリンク先を一番下に表示してくれています。それを見ると、スペースはハイフン（-）に変換され、ピリオドは削除されていました。

最初見たときは、なんてことするんだと思いましたが、上の詳しいサイトを見ると、イジワルされたわけじゃないことが分かりました（笑）

では、正しいページ内リンクを書いてみます。

入力内容

[ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.](#ペ-ー-ジ-内-リ-ン-ク-が-動-作-し-な-い-ケ-ー-ス)

実際のリンク

ペ ー ジ 内 リ ン ク が 動 作 し な い ケ ー ス.

無事に、ジャンプできました。スペースを入れ過ぎました（笑）

というわけで、ページ内リンクが動作しないときの最も簡単な対処方法は、「プレビューの目次をコピーして貼る」でした。お疲れさまでした。

次からは余談になります。

いろいろなケースで試してみる

別のページの見出しに飛ぶ場合も同じ対処方法でいける？

[Google ColaboratoryのファイルをGist貼り付けする方法](https://daisuke20240310.hatenablog.com/entry/2024/03/14/210416#Google ColaboratoryのファイルをGist貼り付けする方法)

Google ColaboratoryのファイルをGist貼り付けする方法

同じ対処方法でリンクが正しく動作しました。

もしかして、ページ内リンクが飛べない現象ってMarkdownだけで起こる？

見たまま編集モードでやってみましたが、ページ内リンクの書き方が分かりませんでした。

HTML編集モードのページ内リンクは、自分でidを指定します。ダブルクォーテーション（"のこと）で囲うので問題ない気がしますね。実施にやってみると、スペースやピリオドを含んでいても、特に問題なく飛べました。

他の記事へのハイパーリンクでも対処方法は同じ？

テスト用のブログで実験してみました。

スペースとピリオドを含めたカスタムURL（t est.）にして、投稿します。すると、スペースはハイフンではなくアンダーバーに変換され、ピリオドはそのままでした（t_est.）。

別ページからハイパーリンクを貼ると、変換前のURL（t est.）では飛べず、変換後のURL（t_est.）のハイパーリンクにするとジャンプすることが出来ました。同じでした。

おわりに

今回は、Markdown記法で書く場合のページ内リンクに飛べないときの対処方法について説明しました。

実際に「Google Colaboratory」を私が見出しに使ったときに起こった問題で、最初はエスケープするとか、ダブルクォーテーションで囲うとか、いろいろ試したのですが解決しませんでした。

ふと目次が目に入って、解決できたことが嬉しかったので記事にしました。

この記事が、どなたかの助けになれば幸いです！