Bloggerでhタグへのページ内リンクが上手く飛ばなかった際の対処備忘録-社会人N年目の趣味記録

ブログを書く際にhタグへのページ内リンクを作成しようとしたところ、うまく機能しませんでした。大した内容ではないのですが、備忘録として対処法を残しておきます。

そもそもページ内リンクとは

簡単に言うとブログ内でページ内で別の場所にジャンプさせるための方法です。

例えば下記のリンクを押下すると「まとめ」のところにジャンプします。

詳細は下記リンク先を参照お願いします。

私の場合はHTML5の記述法をでリンク元のhタグにid属性を付与し、aタグのhref属性で指定したidに#を付けてページ内の別の場所へジャンプしようとしたのですがうまくいきませんでした。

私のブログでは下記目次の自動生成を使用しているのですが、その機能がidの上書きを実施していました。

この機能はhタグに対して上から順番にidを振っていき、ページ内リンクをできるようにしています。(idの名前は「toc_headline_xx」となっており、xxの場所には数字が入ります。)

例えば下記の記事の目次(hタグ)に対してそれぞれ以下のidが振られます。

このidを使ってページ内リンクを作成したら問題なくページ内リンクを作成することができました。

今回は自動で目次を生成している場合にページ内リンクをする方法についてまとめました。

idを割り振ってもうまくジャンプできない場合は他の機能がidの上書きをしていないかを疑った方がいいという事が分かりました。