引用元の紹介に便利 ー ブラウザで特定の文字列をリンク先に設定する方法

前回の記事では、マークダウン形式で執筆した原稿中のハイパーテキストリンクを新しいタブで開くための、WordPress上の設定方法を紹介しました。

参考記事

【WordPress】リンク先ページを新しいタブで開く【Typora】

ブログ記事のライティングにはもっぱらTyporaを使うようになりました。 マークダウン記法でちゃちゃっと記事を作成して、WordPressの編集画面にコピー＆ペーストすればほとんど装飾が終わり（見出し ...

続きを見る

 

 

実は、ブログ記事中で他のページを参照するとき困っている点がもうひとつあります。

それはリンク先をWebページ単位でしか設定できないということ。

この弱点を（ある程度）解消する小技を紹介します。

 

ブログ記事からのリンクは文書単位

ブログ記事中で情報ソースを紹介するために外部リンクを設置することはよくあります。

 

ところが、ふつうのハイパーテキストリンクで指定できるのはページ単位なので、ページ内の途中にリンクさせることができません。

 

 

これが自分のサイトを作成するんだったら、HTMLソースで指定されているID要素を利用してリンクを設定すればいいんですが、他の人が作ったサイトではどこにどんなIDタグが埋め込まれているか調べるのはたいへんです。

そもそも自分がリンクしたい箇所にID要素が指定されているとは限りません。

 

ブラウザの進歩で補う

しかし、最近になってWebブラウザの機能が向上したことにより、これをある程度は補えることになりました。

 

目的のページ上のテキストをコピーするだけで、その場所をピンポイントで指定するリンクを作成してくれるので、ページのどこでも自由に呼び出せます。

 

 

ページにアクセスするだけで指定したテキストのところまで自動でスクロールしてくれるので、自分で探す必要がありません。

しかも、その箇所テキストはハイライト表示され、より判りやすくなっています。

 

FireFoxでは未サポート

ただしこの機能、弱点がひとつあります。

それはWebブラウザによってはこの機能に対応していないものがあるという点です。

 

主要なブラウザでは、Google ChromeとMicrosoft Edgeは対応していますが、Mozilla FireFoxでは利用できません。

 

一方、ChromeとEdgeでは互換性があり、Chromeで作成したリンクをEdgeにコピー＆ペーストしたり、逆にEdgeで作成したリンクをChromeにペーストしてもちゃんと動作してくれます。

厳密にいうとハイライト表示の色が異なりますが、実用上は問題ないでしょう。

 

実際に使ってみよう

では、Google Chromeと当サイトの記事を例に使い方を紹介します。

 

リンク先の文字列を選択する

Webページでリンクしたい文字列があったら、それを選択して右クリックでコンテクストメニューを開きます。

すると［選択箇所へのリンクをコピー］というコマンドがあるのでこれを実行。

 

 

 

 

Webブラウザにリンクをペーストする

コピーしたリンクを、Webブラウザに貼り付けてみましょう。

 

Google ChromeとMicrosof Edgeの互換性を確認するため、ここではEdgeのアドレスバーにペーストしてみます。

 

【Enter】キーを押すとページへアクセスし、文字列のところまで自動スクロールしました。

選択した文字列は、背景が黄色で強調表示されています。

 

ただし、そこからページ上をクリックしたりスクロールすると、残念ながら強調表示は消えてしまいます。

 

FireFoxにペーストしたばあい

同じリンクを、FireFoxにもペーストしてみました。

すると、ページのURL部分は有効なのでアクセスはできますが、文字列までのスクロールやハイライト表示はできません。

 

リンクの内容を確認してみる

コピーしたリンクの中身を確認するためテキストエディタにペーストしてみました。

 

各記事を表す数字部分までが通常のURLで、そこから先の”#:”から先が独自のパラメーターになっています。

 

text=Chrome～の部分で、このリンクがChrome上で作成されたことがわかりますが、Microsoft EdgeもChromeと共通のオープンソースソフトをベースに制作されているため、互換性があるようです。

ということは、やはり同じソフトをベースにしているブラウザであれば、同様に動作する可能性は高そうです。

 

ブログ記事作成に使うばあい

以上が、テキストにリンク先を設定する方法ですが、これをブログ記事の作成にも使ってみましょう。

 

といっても単にリンクを張るだけなので特別難しいところはありません。

 

Typoraのばあい、テキスト中に[リンク先を示すアンカーテキスト](リンク先URL)の形で文字を入力すれば、その部分が自動的にハイパーテキストリンクになります。

つまり”リンク先URL”のところにキャレットがある状態で、あらかじめコピーしておいたリンクをペーストするだけです。

 

標準仕様化が待たれる

この選択箇所へのリンク、個人でコピーして個人でペーストするぶんにはあまり意味があるように見えませんが、ブックマークへの登録では威力を発揮しそうです。

 

なにしろ、目的の場所までスクロールしなくていいのは楽ちんですね。

 

もちろん、ソーシャルブックマークで共有したり、メール／メッセンジャーで送るのにも便利でしょう。

 

ブログ記事作成にとっても、リンク先を具体的なテキストまで指定できるのは助かります。

 

いまのところFireFoxに対応していないのは残念ですが、その場合もページ単位でのリンクとしては有効なので実害はありません。

できるだけ早く業界標準仕様として採用してほしいものです。

 

選択テキストのリンク－まとめ