はてなブログで見出しをクリックするとリンクをコピーできるスクリプトを作った

2022年の7月に、はてなブログのアップデートで全ての見出しにid属性が付与されるようになりました。

staff.hatenablog.com

もともとは、見出しのid属性は目次をつけたときしか付与されていませんでしたが今回全てに付与されるようになったことでどの記事でも特定の見出しに直接行けるURLを作成することができるようになりました。

ですが、見出しのリンクを取得するには開発者ツールを開いて、id属性をコピーしてURLを組み立てる必要があります。これは、ぶっちゃけ面倒くさいので今回、「見出しをクリックしただけでリンクがコピーできるスクリプト」を作ってみました!

使用例は以下です。

このブログでも有効にしているので↓以下の見出しで試してみてください!

ここを押すとリンクがコピーされるよ!

使い方

ものすごく簡単で、Proプランでなくても使用可能です。

  1. 管理ページに移動します。
  2. 設定 > 詳細設定に移動します。
  3. <head>要素にメタデータを追加に以下のスクリプトを追加します。
<script src="https://cateiru.github.io/hatena-blog-scripts/bin/scripts.min.js" defer></script>

イメージとしては、こんな感じです。

イメージ

これで、見出しをクリックしたときにリンクがコピーできるようになるはずです。

技術的な話

ソースコードは以下のGitHubに上げています。

github.com

実装は難しいことはしていなくて、addEventListenerで見出しをクリックしたときにURLをクリップボードにコピーしているだけです。

(バグとか見つけたらissueとかPRとか投げてもらえると嬉しいです)