Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方

特定のテキストへのリンクを生成できる「Text Fragment」仕様

　最近、リンクをクリックするとWebページへ移動するだけでなく、特定のテキスト部分へスクロールし、蛍光ペンで線を引いたかのようにハイライトするものを見かけることが増えてきた。探していた情報へドンピシャでたどり着けて大変便利で、なかには自分のブログ記事やSNSで活用したいと思った人もいるのではないだろうか。

　この機能は「Text Fragment」というWeb標準仕様に基づいており、「Chrome 80」以降でサポートされている。以下のような形式でリンクを作成すると、Webページ上の任意テキストをURLの一部（フラグメント）として利用できる。

（https://.../）#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

　最近の「Edge」や「Chrome」には選択テキストの右クリックメニューに以下のようなコマンドが追加されており、当該テキストへのリンクを生成して、クリップボードへコピーする処理が簡単に行える。

• Edge：［強調表示するリンクをコピー］
• Chrome：［選択箇所へのリンクをコピー］

　「Firefox」や「Safari」における「Text Fragment」への対応はまだ完了しておらず、「Edge」や「Chrome」のような右クリックメニューも用意されていないようだ。しかし、「Link to Text Fragment」という拡張機能をインストールすれば、Text Fragmentを使ったリンクは作成できる。

テキストを選択して右クリックし［Copy Link to Selected Text］メニューを選択

当該テキストをハイライトするリンクを作成

各ブラウザーの「Text Fragment」関連機能のサポート状況

　「Link to Text Fragment」は、選択テキストへのリンクを作成してクリップボードへコピーできるWebブラウザー拡張機能。「GitHub」でホストされているオープンソースプロジェクトで、ライセンスは「Apache-2.0」。「Chrome」、「Edge」、「Firefox」、「Safari」に対応しており、それぞれの拡張機能ストアから無償でダウンロードできる。

　ちなみに、この拡張機能の作者は「Chrome」の開発チームのメンバーだ。

　「Edge」や「Chrome」で「Link to Text Fragment」拡張機能は不要だが、リッチテキスト形式でリンクをコピーする機能が備わっているので、そこに興味を覚えるなら利用してみてもよいだろう。リッチテキストにURLの絵文字を追加したスタイルでリンクを生成することもできる。

リッチテキスト（Rich Text）形式でリンクをコピーする機能が備わっている。不要な場合は生テキスト（Raw Text）でのコピーも可能

上から順にText Fragmentで作成したリンク、初期設定の拡張機能（リッチテキスト）で作成したリンク、URLの絵文字を追加したスタイルで作成したリンク

　また、拡張機能にショートカットを割り当てられるのも魅力。リンクをコピーしたときに「Text Fragment」になったテキスト部分がハイライトされるのも、標準機能より動作がわかりやいのもよい。