2022年の7月に、はてなブログのアップデートで全ての見出しにid属性が付与されるようになりました。
もともとは、見出しのid属性は目次をつけたときしか付与されていませんでしたが今回全てに付与されるようになったことでどの記事でも特定の見出しに直接行けるURLを作成することができるようになりました。
ですが、見出しのリンクを取得するには開発者ツールを開いて、id属性をコピーしてURLを組み立てる必要があります。これは、ぶっちゃけ面倒くさいので今回、「見出しをクリックしただけでリンクがコピーできるスクリプト」を作ってみました!
使用例は以下です。
このブログでも有効にしているので↓以下の見出しで試してみてください!
ここを押すとリンクがコピーされるよ!
使い方
ものすごく簡単で、Proプランでなくても使用可能です。
- 管理ページに移動します。
- 設定 > 詳細設定に移動します。
<head>要素にメタデータを追加
に以下のスクリプトを追加します。
<script src="https://cateiru.github.io/hatena-blog-scripts/bin/scripts.min.js" defer></script>
イメージとしては、こんな感じです。
これで、見出しをクリックしたときにリンクがコピーできるようになるはずです。
技術的な話
実装は難しいことはしていなくて、addEventListener
で見出しをクリックしたときにURLをクリップボードにコピーしているだけです。
(バグとか見つけたらissueとかPRとか投げてもらえると嬉しいです)