ゲームとペットと、時々エーフィ

エーフィの人と呼ばれたい人がゲームやらペットやらの話をします。またブログに関する記事も初心者に分かりやすいように書いています。

はてなブログで内部リンク(ページ内リンク)を貼って記事を読みやすくする方法

f:id:tuntyo:20200311150004j:plain

今回は内部リンク、ページ内リンク、ページ内ジャンプ的なことをまとめていきます。

(リンクだから画像がジャンプなんです)

 

ブログの記事が長くなったりするとどうしても読んでほしい部分や追記した部分などわかりにくくなってしまいます。

 

f:id:tuntyo:20200311143732p:plain

いろんなサイトで見る便利なこれ

そのため、こんな感じで情報などすぐ見たい方のために飛べるようにしてあげるとよいと思います。

実際の動きはこちらの記事で確認できます↓

【ポケダンDX攻略】ふしぎなメール貴重なアイテムがもらえるパスワードまとめ - ゲームとペットと、時々エーフィ

 

でははてなブログでの内部リンクの貼り方をまとめます。

 

目次

 

内部リンクはHTML編集で作る

やり方は簡単で

 

<a href="#a">リンク元</a>

<a id ="a">リンク先</a>

 

とするだけです。

 

ちょっとやってみます。

 

ここをクリックすると

 

ここを飛ばして見ることができる

 

上のリンクをクリックするとここは飛ばされるようにできています。

 

 

これは個人的な宣伝です。飛ばす用に書いています。(読んでほしいのも本当)

tuntyo.hatenablog.com

 

 

ここではブログの記事の宣伝をしていますが、このページが読みたい人は内部リンクについて知りたいだけのはずです。

なのでここは読まなくてもいいですよね?

 

ここに飛ぶようにできている

 

このように、さっきのリンクを踏んだので一個上にあるブログの宣伝を見なくて済んだわけです。 

(ほんとは見てほしい)

 

これをHTML編集では

<a href="#a">ここをクリックすると</a>

~~

<h3 id="a">ここに飛ぶようにできている</h3>

と書いています。

 

普通の文字でも見出しでも使えるので<a><h2><h3>などにつけることができます。

 

また"#a"の部分はどこからどこに飛ぶかを決めているものなのでリンク元とリンク先で同じであれば何でもいいです。

 

ただ先頭がアルファベットじゃないと動かないので注意が必要です。

OK:aaa,a123,e-fiなど

NG:123aなど

 

外部リンクははてなブログの仕様のものを使えばOK

外部リンクに関しては記事編集画面のツールバーでリンクを選んでURLを挿入するだけなので簡単だと思います。

 

見やすい記事作りを

 

内部リンクを上手く使って記事を書けば読みやすく、自分でも意図した順番で記事を読んでもらえるようになるのでとても便利です。

 

この記事を参考に上手く応用してみてください。

 

 

どのページからでも違う記事に飛べるようにするならグローバルメニューがおすすめ↓

tuntyo.hatenablog.com

 

他の記事を見やすくする方法はこちら↓

 

tuntyo.hatenablog.com