ページ内ジャンプを使ってブログを見やすくしよう！初心者向け - マルチアレルギーの息子と過ごす幸せな日々

紹介したいものが多い場合などブログが長くなってしまい、読んでくださる方が読みにくくなる傾向にあります。せっかく開いてくださったのに読みにくいのは申し訳ないですよね。

そんなときは目次を作り、ブログ内ジャンプを使うことで読者が必要なところだけをピックアップして読むことができるのでかなり楽になります。

ページ内ジャンプとは？

作り方は簡単です。

目次の方には以下をコピペして使用してください。
○○には飛ばした先と同じ文字を入れてください。



<a href="#○○">見出しの文字</a>

見出しの文字は上でいうと
1.今日食べたもの
のことです。

飛ばした先には以下をコピペしてください。
○○には目次の方と同じ文字を入れてください。



<h2 id="○○"> 飛ばした先の文字</h2>

飛ばした先の文字は上でいうと
お寿司
のことです。

たったこれだけでページ内ジャンプが作れます！ここで使ったh2タグについて次に説明します。

h1は1番大きい見出しのことです。はてなブログではタイトルがh1見出しとなっています。これがSEO的には重要なので、やはりタイトルはしっかり考えてつけるべきですね。

最近食べたケーキたち
↓
都内で食べたショートケーキランキング

のような形の方が、検索要素であるランキングやショートケーキなども入る上に読みたくなる記事タイトルになりますね。

そして、興味深い記事がありはてなブログではなぜかh2が抜けて大見出しがh3になってしまうというのです。

本来はh1.h2.h3...と順番通りが好ましいとされているので、手動でつけていくのもありかもしれません。

順番があっていればいいので、

h1→タイトル（これは1ブログ１つです）

h2→中見出し
h3→小見出し

といった感じで使うのは可能です！

それぞれのつけ方は



<h2> ここに見出しを書く</h2>

このような形でコードを使いましょう。

このブログを作るのに意外と苦労したのがコピペのためのコードを表示させる方法です。
HTMLコードをそのまま表示させたくても、コードをすぐに認識されてしまいうまくできなかったのですが…

ソースコード変換 < & " > br改行 WEB用に自動エスケープ
こちらを使うと翻訳機のように一発変換で、
それをコピペするだけで済むのでかなり便利でした！

何かのコード説明をブログでされたいときは重宝すると思います‼️