「Webページの特定テキストへ直接ジャンプしてハイライトするリンクの作り方」
おお！
こんな便利な機能がブラウザに装備されていたとは知りませんでした。Chrome や Edge ではすでに標準装備されているようですが、Firefox や Safari では「Link to Text Fragment」という拡張機能を導入する必要があるようです。
先の記事によると、
この機能は「Text Fragments」というWeb標準仕様に基づいており、「Chrome 80」以降でサポートされている。
だそうです。現時点の Chrome の最新バージョンは 105 なので、けっこう前から使えるようになっていたのですね。
↓こんな感じの形式なURLで実現されるとのこと。
（https://.../）#:~:text=[prefix-,]textStart[,textEnd][,-suffix] ということで、
Windows の Chrome でやってみました。どこかのWebページを開いて、適当な場所のテキストを選択し、それを右クリックすると現れるメニューから「選択箇所へのリンクのコピー」を選ぶだけ。するとクリップボードにコピーされるので、それをペーストすればOK! 簡単ですね！！
なお、
先の記事の画像では、黒色文字＋黄色背景で強調されるようになってますが、実際にやって見たところでは、黒色文字＋淡紫色背景となってました。黄色な背景の方が良いように思えますね。
色を変えるにはどうしたら良いのか？
調べてみた所、こちらを発見。::target-text な疑似要素を使って例えば以下のようなCSSを書けば良いそうです。
::target-text {
background-color: yellow;
color: black;
} ただ、
変更可能なのは background-color と color のみのようです。試しに font-weight: bold; とやってみたけど、反映されずダメでした(^_^;) 無視されるようです。
ということで、
ここをクリックすると、このページのタイトルへジャンブしてその一部が強調表示されます。ちなみに、中身は↓こんなURLになっています。
http://katwat.s1005.xrea.com/wp/9689#:~:text=Webページの-,テキストへジャンプするリンク,-の作り方