ひらいても小箱

BBHF, BUMP OF CHICKEN, People In The Boxなどが好きです。アイドルも好きです。さっぽろ

【はてなブログ】自分の別記事の特定の場所にリンクを飛ばす方法

私がブログの中でたまに使っている、

 

こちらと書いているところを押すと

自分の別記事の途中の行にリンクが飛ぶやつのやり方です。

 

(上のリンクは私の大好きなバンドBBHFの最高のライブの好きな曲のシーンに飛びます)

 

■リンク先の設定

リンク先の記事の編集画面で、HTML編集タブに切り替える

f:id:white_mocco:20201120143038p:plain

まずはリンクで飛んだ先で、どの行を表示したいかを設定します。

 

該当する行を探して、リンクさせたい行に任意の名前(ID)を付ける

●before

f:id:white_mocco:20201120143804p:plain

●after

f:id:white_mocco:20201120143707p:plain

今回はh4でくくられた見出しの行に"namidanokaidan"という名前を付けました。

<p>でくくられた普通の行にリンクさせたい場合でも書き方は同じです。

※後からリンク元の設定をするときはidの前に「#」をつけるけど、ここではつけないので注意!

 

記事の更新とリンクのコピー

いつも通り右下の青いボタンから記事を更新(公開)したら

 

f:id:white_mocco:20201120145104p:plain

「記事を見る」から、今編集した記事へ飛んで、その記事のURLをコピーしておきましょう。

 

 

リンク元の設定

今度はリンク元となる記事。

今回はこの記事からさっきのライブレポ記事に飛ばしたいので、
リンク元はこの解説記事のことです。

 

「見たまま編集」でまずはリンクを貼る

①リンクを貼りたい文字列を選択して

②リンクボタンを押す

f:id:white_mocco:20201120145523p:plain



③URLウィンドウにコピーしたURLをペースト

④プレビューを押す

⑤「選択範囲」を選んで「選択した形式でリンクを挿入」

f:id:white_mocco:20201120145753p:plain

これで、「こちら」の文字をクリックすると、リンク先の記事の先頭にジャンプします。(↑このリンクは記事の先頭に飛ぶ状態のもの)

 

HTML編集でリンクURLにIDを付加する

f:id:white_mocco:20201120144459p:plain

 

 リンク元の記事で、先ほどと同様にHTML編集画面へ。

 

f:id:white_mocco:20201120150420p:plain

「こちら」の前後が<a>でくくられて、記事へのリンクが設定されています。

 

このURLの最後に「#」と自分で決めたIDをつければ完成!

 

f:id:white_mocco:20201120150647p:plain

今回は「#namidanokaidan」と書き加えました。