テキストフラグメント（scroll-to-text-fragment）を生成するツールです。
リンク先ページのURLと対象テキストを入力するだけで、テキストフラグメント付きのリンク（またはURL）を簡単に作成することができます。ご自分でテキストフラグメントを設定したい場合にご利用ください。
- この機能を利用すると、リンク先ページ内の特定テキストの位置にスクロールして、そのテキストをハイライト表示することができます。
テキストフラグメントの設定
入力必須
- URLの入力
- 開始テキスト
任意設定
- 終了テキスト
- 直前テキスト
- 直後テキスト
- フォールバック用ID
- コード出力
- テスト用リンク
-
【ここにテスト用のリンクが表示されます】
※リンク先テキストを特定できない場合は、入力項目を再確認してください（項目違いや消し忘れなど）。
※このテスト用のリンクには、target="_blank" と rel="noreferrer noopener" が指定されています。
使い方
リンク先ページのURLとリンク先テキストを設定するだけで、テキストフラグメントに対応したリンクを簡単に作成することができます。
- 入力欄に情報を入力して更新するボタンを押すと、リンクのコード（またはURL）がコード出力欄に表示されます。同時に、テスト用のリンクも表示されるので、それをクリックして目的の位置（リンク先テキスト）が表示されることをご確認ください。
- URLの入力欄には、リンク先ページのURLを入力してください。開始テキスト欄には、リンク先ページ内の到達点となるテキスト（リンク先テキスト）を入力してください。（例えば、リンク先ページ内の「タグインデックス」と書かれた部分にスクロールさせたい場合は、そのテキストを開始テキスト欄に入力します）
- リンク先テキストが長い場合（段落の文章をまるごと、あるいは段落をまたいで指定したい場合など）は、文章の開始部分を開始テキスト欄に入力し、終了部分を終了テキスト欄に入力することで、その範囲をまとめてリンク先テキストに指定することができます。
- 上記の設定だけではリンク先テキストを特定できない場合は、リンク先テキストの直前にあるテキストを直前テキスト欄に入力するか、直後にあるテキストを直後テキスト欄に入力して絞り込んでください。（直前と直後を同時に入力することも可能）
- リンク先テキストのコンテナ等にIDが指定されている場合は、そのIDをフォールバック用ID欄に入力することができます。このIDの指定は、テキストフラグメントに対応していないブラウザ向けのフォールバックになります。
- このツールはJavaScriptで作成されています。JavaScriptを利用できない環境では動作しません。
テキストフラグメントの仕様
- テキストフラグメントを使用して別サイト（別オリジン）にリンクする場合は、a要素に rel="noopener" を指定しておく必要があります。
- 開始、終了、直前、直後の各テキストは、URLエンコードする必要があります（このツールでは自動的にエンコードされます）。日本語だけでなく、ハイフン（ - ）、カンマ（ , ）、アンパサンド（ & ）もエンコードしておきます（これらの記号はテキストフラグメントの構文で使用されるため）。
- リンク先テキスト全体はブロック要素をまたぐことができますが、開始、終了、直前、直後に指定される各テキストは、それぞれが同一のブロック要素内にある必要があります。
- 仕様上は、アンパサンド（ & ）で区切って複数のテキストフラグメントを設定することができます（このツールでは未対応）。例えば次のように指定します。
#:~:text=フラグメントA&text=フラグメントB - 全体の構文は次のようになります。各テキストはカンマ（ , ）で区切られ、直前テキストの末尾と直後テキストの先頭にハイフン（ - ）が付きます。開始テキスト以外のテキストは省略が可能です。
https://example.com/abc.html#:~:text=直前テキスト-,開始テキスト,終了テキスト,-直後テキスト - 2024年7月現在、Chrome、Edge、Safariがテキストフラグメントに対応しています。
※ChromeやEdgeでは、テキストフラグメント付きのURLを自動で作成する機能が備わっています（テキストの選択範囲を右クリック → リンクをコピー）。ただし、細かい設定は行えないようです。
参考リンク（外部サイト）
テキストフラグメント付きURLの作成で参考になるサイトです。（別ウィンドウで開きます）