ブロガーさん、引用で「選択箇所へのリンクをコピー」使ってる？ガチ便利！
この記事では、「Google Chrome」ブラウザなどに標準搭載されている「選択箇所へのリンクをコピー」機能について書きます。
僕と同じブロガーさんに超おすすめしたい機能です。便利です。
具体的にいつ実装されたかは忘れましたが、2021年頃くらいから「Google Chrome」に「選択箇所へのリンクをコピー」という機能が実装されています。
本機能を使うことで専用のリンクを生成できます。正式名称は「テキストフラグメント（Scroll to Text Fragment）」です。
生成したリンクをクリックすると、そのサイトに飛ぶだけでなく、指定した文章にスクロール（ジャンプ）してくれます。ハイライト表示されているので見つけやすいです。
僕（ブロガー）のように誰かの文章を引用させていただく時や、「詳しくは公式サイトのこの部分を参考にして～」みたいな感じで書く時にちょー便利です。
「選択箇所へのリンクをコピー」機能の利用手順
注目させたい文章があるサイトを開きます。試しに僕のプロフィールを開いてみます。
https://www.naporitansushi.com/diary/飛ばしたい文章をマウスで範囲選択します。一行だけでなく複数行に対応しています。
長い文章でもOKです。僕は極端に長い文章をハイライトしたい機会に出会っていないので、具体的な上限は分かりません。べらぼうな範囲じゃなければいけると思います。
範囲選択できたら右クリック→「選択箇所へのリンクをコピー」項目をクリックします。何かを範囲選択している時じゃないと表示されない点に注意です。
クリップボードに専用のリンク（テキストフラグメント）がコピーされます。
メモ帳に貼り付けてみました。
通常の「https://www.naporitansushi.com/diary/」URLのあとに「#:~:text=」から始まる文字列が付与されています。
アドレスバーに貼り付けて実際に開いてみます。該当する文章がハイライトされて、その場所までスクロール（ジャンプ）した状態で開かれます。
ブログで利用したい場合はこのURLをリンクに設定します。
ブロガーが引用する時に使う場合
僕みたいなブロガーが引用する時に使う方法を書きます。
引用したい文章をコピーする
引用したい文章を範囲選択して、右クリック→「コピー」をクリックします。まずは引用する文章を自身のブログに貼り付けるので、「選択箇所へのリンクをコピー」ではなく通常のコピーです。
引用ブロックに貼り付ける
WordPressの記事編集画面（僕の場合ブロックエディター）を開いて、引用ブロックを追加します。
引用ブロックにコピーした文章（こちら）を貼り付けます。改行とかフォントサイズ等の装飾は各自でします。
記事タイトルを取得して貼り付ける
右下の引用元情報に記事タイトルを貼り付けます。
記事タイトルの確認方法は、ウィンドウのタイトルをそのまま見てタイピングする方法、ツールを使って取得する方法、開発者ツールを開いて確認する方法…と色々あります。
誰でも手っ取り早くできるのがツールを使う方法かなと思います。ウェブサイト上にはURLを貼り付けることで記事タイトルを自動的に抽出してくれるツールがあります。
記事タイトルを取得したいURLをコピーします。
今回の場合「https://www.naporitansushi.com/diary/」です。ツールによっては通常URLではなく、「選択箇所へのリンクをコピー」で取得したURLでもOKな場合があります。
記事タイトルを取得するツールは複数公開されていますが、本記事では「ページタイトル取得」サイト様を利用してみます。
https://tshinobu.com/lab/get-page-title/サイトにアクセスしてコピーしたURLを貼り付けます。「取得」ボタンを押します。下部にページタイトルが表示されます。範囲選択してコピーします。
記事編集画面に戻って引用元情報の部分に貼り付けます。「プロフィール | ナポリタン寿司のPC日記」といった感じです。
「選択箇所へのリンクをコピー」をリンクに設定する
こちらで書いているように「選択箇所へのリンクをコピー」機能を利用してテキストフラグメントのURLを取得します。
引用元サイトを開いて、引用した文章を範囲選択→右クリック→「選択箇所へのリンクをコピー」をクリックです。
WordPressの引用ブロック内に貼り付けた引用元情報の記事タイトルを範囲選択します。ツールバー内にあるリンクボタンをクリックします。
先ほど「選択箇所へのリンクをコピー」で取得したURLを貼り付けます。「新しいタブで開く」などは各自お好みで設定します。
引用ブロックの完成です。ただの引用ではなく、引用元情報をクリックした時、その引用した文章をハイライトした状態で開いてくれます。便利です。
実際にテストで引用したブロックを貼っておきます。右下のリンクをクリックするとその場所に飛びます。
生き物や自然がとにかく大好きです。青空と入道雲と緑豊かな木々・草原、心地よい風とそれに流されて香ってくる土と森の匂い。たまりません！
自然が好きになった原体験？みたいなのがパッと出てきたらかっこついたのかもしれませんが、残念ながらありません。両親が田舎好きとか自然関連の仕事していて小さい時から携わっていた…みたいなのもありません。
プロフィール | ナポリタン寿司のPC日記
【ちょっと高度】僕の効率化メモ
クリップボード履歴ソフト（Clibor）
僕はクリップボード履歴ソフト「Clibor」を利用しています。
通常右クリックやCtrl+Vの貼り付けは、直前にコピー（Ctrl+C）したものしか呼び出せません。
クリップボード履歴ソフトを使うことで一つ前、二つ前、なんなら何十件も前にコピーしたテキストを再び呼び出せます。過去コピーした情報を保存します。
Windows11標準のクリップボード履歴機能（Windows+V）でもOKです。僕は「Clibor」のほうが使いやすいので標準は使っていません。
引用する際に便利です。「最初に引用文をコピーして貼り付けてそのあと記事タイトルをコピーして～～」という順番の意識から解放されます。
最初から引用文、記事URL、記事タイトル、「選択箇所へのリンクをコピー」のURLをまとめてコピーして、クリップボードを呼び出して一気に貼り付ける…と効率化できます。
ページのいったりきたりが減ります。
ブックマークレット（僕の場合Vivaldiのコマンドチェイン）
毎回ツールを利用するのがめんどくさいので、もっと素早く実行できるブックマークレットを活用しています。
僕の場合、メインで利用している「Vivaldi」ブラウザのコマンドチェインに組み込んでいます。
本記事ではあんまり詳しく書きませんが、「現在開いている記事のURLとタイトルを取得する」といったコマンドを登録しておいて、任意のショートカットキーで発動させるようにしています。
気になる方は僕が書いた以下の記事らへんを見ると分かるかもしれません。
引用したいサイトにアクセス→ショートカットキーを押す→勝手に記事タイトルを取得する…と、いちいち取得ツールサイトにアクセスしなくても済みます。
記事タイトルを効率的に取得する系はブックマークレットに限ったことではなく、拡張機能なども一つの手だと思います。「CopyTabTitleUrl」などです。
「選択箇所へのリンクをコピー」が押せない時のメモ
コピーしたいテキストの間に改行やらリンクやらがある場合、右クリックしても「選択箇所へのリンクをコピー」がグレーアウトしていて押せないことがあります。
「akiGAMEBOY」さんが公開されている「リンク先の指定した文章を強調表示するURLの生成ツール」を使うことで、作成できることがあります。上記画像の時は無事に作成できました。
「選択箇所へのリンクをコピー」の気になるかも？な点
URLが長ったらしくなる
通常のURLに加えて、該当する部分の文字がそのまま（長文だと最初と最後の一部分）URLに組み込まれるので、単純にURLが長くなります。
人によっては長いURLを見ると「なんだこれ、怪しいなぁ。押さないでおこう」って心理になるかもしれません。
場合によってはそのまま日本語で表示されますが、エンコードされる時もあります。エンコードとは機械が処理しやすいように日本語などをパーセントや英数字に置き換えることです。
僕は素人なので詳しくは分かりませんが、エンコード/デコードという工程がインターネットにあり、エンコードされた場合、ただでさえ長い日本語URLがもっと長くなります。
引用元が文章を改変した時うまく飛ばなくなる
「選択箇所へのリンクをコピー」で取得した文章のリンク元が何らかの理由で文章を削除したり、修正した場合、正常に飛ばなくなります。
例えば、僕のサイトにある「おはようございます。」という文章を別のブロガーさんが「選択箇所へのリンクをコピー」で取得したとします。
ある日僕がその文章を削除すると、「おはようございます。」で「選択箇所へのリンクをコピー」していたリンクが機能しなくなります。
ただし、この点はあんまり気にしなくていいかなと思います。理由はジャンプリンクが機能しなくなるだけで、そのサイト自体にはちゃんと飛ぶからです。
「https://www.naporitansushi.com/diary/#:~:text=おはようございます（例）」というリンクをクリックした時、「あれ？おはようございますって文章が引用元サイトから削除されている！どこにジャンプすればいいか分からないよ！とりあえずhttps://www.naporitansushi.com/diary/には飛ぶね～」ってなります。
「引用元をクリックした時、文章にジャンプリンクしてくれるのが一番だけど、まぁジャンプしなくても最低限引用した記事に飛んでくれたらいいよね。」って話です。
やらないよりやってあげてたほうが親切かなと思います。
サイトの構造によっては機能しない場合がある
文章が改変されていなくてもHTMLの構造的に元々うまくジャンプしてくれないサイトもあります。
例えば、よくある質問ページで使われることが多い階層（アコーディオン）ブロックなどは飛ばない時があります。質問をクリックしたら回答が展開するタイプです。
何らかのアクション（マウスクリックなど）をした時に表示される文章は、「選択箇所へのリンクをコピー」が機能しないことが多いです。
【余談】これまで僕がやっていたこと
本当は冒頭に書いていましたが、ちょっと長くなったのでここ（最後らへん）に移動させました。
「選択箇所へのリンクをコピー」を使う前は、下記画像のようにWordPressのブロックエディターで、引用ブロックを挿入→引用文をコピペ→右下に記事タイトルとリンクを設定していました。この点は、「選択箇所へのリンクをコピー」を使う方法と一緒です。
上記画像の状態でも、十分引用としての役割は果たしているんですが、いざ引用元（本家）を見ようとクリックした時、ちょっと不便なことがありました。
ただ単にリンクに飛ぶだけなので、僕が引用した文章がどこにあるか分からない点です。ページをスクロールして探すか、ページ内検索（Ctrl+F）を利用して見つける必要があります。
不便でした。短めの記事ならすぐに見つけられますが、長めの記事になると探すのも一苦労です。
これまで自分の同一記事内でのページ内リンク（アンカーリンク）は、HTMLアンカーというのでできていました。
他人の記事でページ内リンクさせようと思ったら、相手が設定しているHTMLアンカーを調べる必要がありちょっと手間でした。そもそも設定されていない場合もあります。
「選択箇所へのリンクをコピー」機能を使えば、HTMLアンカーとか難しいこと分からなくても飛ばせたい文章を範囲選択→右クリックからコピーすることですぐに飛べます。
結構便利で僕はかなり頻繁に使っています。本記事は「Google Chrome」での方法を書きますが、「Vivaldi」や「Microsoft Edge」などでも同様にできます。
初心者なので分からないんですが、「Chrome」の技術っていうよりは、ブラウザ業界全体が対応したって感じなんですかね？さっぱりです。英語だと「Copy link to highlight」です。
感想
以上、「Google Chrome」ブラウザ等に標準搭載されている「選択箇所へのリンクをコピー」を使って引用する方法でした。
「選択箇所へのリンクをコピー」は「ここにも書いてあるとおり、ナポリタン寿司の由来は適当です…」みたいな説明時にも便利です。
「ここ」という文章に該当箇所に飛ぶリンクを設定しています。基本は引用時に活躍するかなと思います。