うえのブログ

気になったこと、思い立ったこと、調べてみたことなどを書き留める場として使っています。

別の記事ページ内にある狙った所にリンクを飛ばしたい…やり方を紹介

f:id:uenoyou111:20190312052725j:plain

記事を書いている時、他に読ませたい記事があるとします。

 

でも冒頭やここは要らないんだよな…という時、説明したい箇所に狙ってリンクを飛ばせるとしたら、すごく便利ですよね?

 

そのやり方についてご紹介します( ˘ω˘)

 

 

別記事の狙った場所を指定する

 

まずは実際に設置する流れを説明し、あとのまとめで実践する場合について触れていきたいと思います。

 

最初に飛ばしたい場所を指定する必要があります。自分が実践したいとする場合。

 

以前書いた記事内リンクを飛ばす方法の記事を開き、冒頭も大見出しも必要ないから次。

 

実際にやり方を説明している中見出しのタグに、そのまま飛ばしたいとします。

 

<h4 id="yarikata1">やり方1~飛ばしたいところを指定する</h4>

 

このコードを使います。idはテキトーにyarikata1で。これをコピーして、リンク先の記事をHTML編集モードで開きます。

 

f:id:uenoyou111:20190311141105j:plain

 

ここに飛ばしたい…!ということで、先程コピーしたコードを貼り付けます。

 

f:id:uenoyou111:20190311141316j:plain

 

これで指定は完了です。

 

指定した箇所に他のページから飛ばす

 

やり方としては、aタグでURLの後に#をつけて先ほど指定したidをくっつけるだけです。

 

<a href="https://www.uenoyou.net/entry/Link-in-page#yarikata1">記事内リンクのやり方はこちら</a>

 

あとはこのままここに、HTML編集モードで貼り付けるだけです。

 

するとタグの中に入っているURLへ飛ぶ→URL後に書いてあるidへ自動的にジャンプ…という流れです。

 

あ、記事内リンクのやり方はこちらにてご確認ください。

 

という流れで自然にサッと導入しつつ、実際に知りたい部分をピンポイントで紹介できるわけですね。

 

別タブで開くコードもあるよ

 

先ほど使用したコードですと、そのままのページで開かれるようになります。

 

内部リンクだと直帰率とかは考えなくても良いですが、前画面が残らないので別のタブで開いてもらうコードもあります。

 

<a href="https://www.uenoyou.net/entry/Link-in-page#yarikata1" target="_blank" >別タブで開く</a>

 

このコードをHTML編集でそのまま貼り付けると、別タブで開くことができます。

 

別記事の狙った箇所にリンクのおさらい

 

参照したいページの飛ばしたいタグにidを指定します。

 

id指定のやり方はこちらを参考に。

 

別記事の飛ばしたいところにidを指定したら、以下のコードを使います。

 

<a href="https://www.uenoyou.net/entry/Link-in-page#yarikata1">文字は変更可能</a>

 

httpsから#の直前までは、飛ばしたい自分の記事のURLに変更します。#以降は指定したタグ。あとは変更可能な文字を使いやすいように変更します。

 

そしたらHTML編集モードで貼り付けるだけです。

 

 

まとめ:ピンポイントで別記事を参照してもらう時は非常に便利

 

こちらを参照してください、とリンクを飛ばして冒頭も参考になるなら良いのですが…。

 

既に記事内である程度の内容を説明しちゃってる場合、ピンポイントにやり方だけ参照してもらいたい時にこのやり方は非常に役立ちます。

 

うまく活用して、扱いやすさを追求したいところです。

 

 

ではでは(`・ω・´)ゞ