マルチアレルギーの息子と過ごす幸せな日々

薬剤師で、マルチアレルギーの息子を育てる1児の母です。アレルギー治療のため、肌にいいことや、食生活を徹底的に改善しています。また、海外旅行や新しいもの、美味しいものが好きなので、興味があるものを発信していきます。

ページ内ジャンプを使ってブログを見やすくしよう!初心者向け

スポンサードリンク

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

携帯をみて困っている人
ページ内ジャンプがわからない

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




牛の顔をした人 悩み
解説を知りたい人

ページ内ジャンプとは?




1.今日食べたもの(←こちらをクリックしてみてください)





















お寿司(←こちらへ飛びます)





作り方は簡単です。

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



<a href="#○○">見出しの文字</a>
見出しの文字は上でいうと
1.今日食べたもの
のことです。







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



<h2 id="○○"> 飛ばした先の文字</h2>
飛ばした先の文字は上でいうと
お寿司
のことです。



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




SEOで重要なh1からh6タグとは?



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

最近食べたケーキたち

都内で食べたショートケーキランキング

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




h2以降の使い方は?

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

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

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

h1→タイトル(これは1ブログ1つです)

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

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

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

それぞれのつけ方は



<h2> ここに見出しを書く</h2>
このような形でコードを使いましょう。





HTMLコードをそのまま表示させる方法とは




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

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



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

スポンサードリンク

--->