はてなブログで見出しへのリンクを表示する

つい最近、はてなブログの見出し(h1からh6までのタグ)にid属性が付与されるようになった。

staff.hatenablog.com

ということは、見出しへのリンクを作って共有できる。ただ普通に暮らしていると、このリンクを生成するためにDeveloper Toolsを表示して見出しのidを入手してURLにhash fragmentを設定して… という手順になってしまいやや煩雑。GitHubのMarkdownのように、hoverしたらリンクアイコンが表示されて見出しのリンクに飛べる、となっていたい。

hoverすると見出しの横にリンクアイコンが出て見出しに飛べる

ということで、自分のブログで同じことができるようにしてみた。以下の記事で試せる。

masawada.hatenablog.jp

見出しにカーソルをあわせるとリンクアイコンが表示される

以下のコードを 設定 > 詳細設定 > headに要素を追加 に貼って保存することで利用できる。テーマによってデザインなどは変える必要があるかもしれない。各々の環境にあったようにカスタムされたい。あとレスポンシブ環境では試していない。

gist.github.com

リンクアイコンはFont Awesomeから持ってきていて、アイコンSVGのライセンスはCC BY 4.0なので留意されたい。

fontawesome.com

他の部分はMITライセンスとした。

過去(おそらく8月中旬より前?)の記事については再度保存しないとidが挿入されないようなのでこちらも注意されたい。新しく書く記事については問題なく挿入されている。

---

長い記事を書いて見出しをつけたときに便利です。よければご利用ください。