ブログなどの開発メモ

ブログ開発などソフト開発で気付いたことを記録

はてなブログのリンクと目次の構成

はてなブログのリンクについて,HTMLで説明します。
他にも方法はあると思いますが、私が調べた範囲です。
リンクは目次を作る時の基本です。すなわち、目次をリンクで構成すれば、
目次ができるということです。ページ内のリンクは例えば以下のようにします。

リンク元:<a href="#tobisaki">リンク元の文字</a>
リンク先:<h3 id="tobisaki"></h3>

ただし、これで飛べるのはトップページの記事数の範囲内です。

トップページの記事数は無料ブログの場合、最大値は15(始め7)ですから、
投稿記事が多くなると古い記事にはリンクで飛べなくなります。その場合は
飛先の記事を投稿した時に、URLを指定しておきます。
そのURLに飛ぶようにします。
その場合
リンク元: <a href="リンク先の記事のURL"></a>
リンク先: 記事を投稿したときのURL
   例えば:https://xx.hateblo.jp/entry/yy1

これで記事の先頭にジャンプできます。
しかし、記事の途中にジャンプさせたい場合は
その記事の特定の場所に以下のコードを書いておきます。例えば
<h3 id="tobisaki"></h3>
この場合はリンク元を以下のように指定します。
<a href="https://xx.hateblo.jp/entry/yy1#tobisaki">リンク元の文字</a>

リンク元に戻る場合も同じように構成できますが、
ブラウザーの戻るで十分であると思います。

以下の図は目次の例です。

f:id:Kurokawa_Tomio:20190207170845j:plain

図 二段目次