情報保管庫 ~R-kunのブログ~

Youは何しに情報保管庫へ? そこにR-kunが私を待っている

【便利!!】Webサイトで特定の部分に飛べるリンクを作ってみよう~!

https://cdn-ak.f.st-hatena.com/images/fotolife/R/R-kun/20220913/20220913110736.jpg

Webサイト内の特定の部分に飛べるようなリンク(URL)を作ってみよう。ChromeもしくはEdgeなら簡単にできるよ!

目 次

 

Webサイトの特定の部分に飛びたい

Webサイトを見ていると「この部分に直接アクセスできるURLが欲しいな」と思ったことはありませんか? 私はあります。

 

WebサイトのページIRLを共有して、「この部分を見てね」と注釈を添えれば良いのかもしれませんが、それはちょいと面倒です。同じフレーズが何度も登場するWebサイトなら注目してほしいポイントが分からず、自分と相手が見ている場所が異なるなんてこともあるでしょう。

 

そんなとき、ブラウザの“ある”標準機能を使えば、特定の部分に飛べるようなURLを簡単に作ることができます。

 

では、実践してみましょう~!

 

 

 

直接とべるURLを作る!

今回は弊サイトである「情報保管庫」で試してみましょう。ブラウザはChrome(最新版)を使います。

ページにアクセスしたら、直接飛びたい場所を探しましょう。

今回は「個性的な形状のティッシュケース」という部分に直接飛べるようにしましょう。この部分を選択した状態で右クリックして、「選択箇所へのリンクをコピー」をクリックしましょう。

コピーしましたら、別タブを開いて貼り付けてみましょう。

で、エンターキーを押すと……Webサイトの特定の場所に飛ぶことができました!

ここで注目してほしいのはURLと飛んだ部分。

サイトURLと飛びたい部分のフレーズの間に「#:~:text=」と半角英字が加わることで、特定の部分に飛べるようなURLを作成することができる。「#:~:text=」が加わっただけだが、手作業で加えると不具合が生じる可能性がある。そのため、必ず「選択箇所へのリンクをコピー」をクリックしてください。

 

 

 

ぜひ、お試しあれ!

ちなみに、ChromeとEdgeで使える技である。

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

他のブラウザで同じことをしたい場合は、ブラウザ拡張機能を使う必要がある。その方法は「窓の杜」に掲載されている。あわせて、そちらをご覧ください。

 

Reference:窓の杜
Report:R-kun
Photo:情報保管庫