ブログ書くなら知っとくと便利な目次の作り方

はじめに

ブログを書いているとついつい興が乗ってしまって、
1000文字くらいでまとめるつもりが気づいたら2000字とか3000字とかになってしまった…なんて経験ございませんか?

私は、しょっちゅうです(笑

そうなると、読み手にとっては、お目当ての情報や興味のある内容になかなかたどり着けない、めんどくさい記事になってしまっているかもしれません。
そんなとき、ひとつページ内リンクの張り方を覚えておくととても便利。

ページ内リンクとは、分かりやすくいうとその記事の目次のこと。目次があることで、読者は興味のある箇所へとダイレクトに移動することができ、ストレスなく読み進めてもらえ、利便性が高まります。

ちなみに、今回の記事でページ内リンクを張るとこんな感じに。

この記事の目次

この記事では、初心者でも分かりやすいようページ内リンクの設定法について、ステップバイステップでお伝えしようと思います。何を隠そう私自身がこの記事を書きながら勉強し始めた初心者ですので、分かりやすさは折り紙付き(笑

それでは、さっそく初めて参りましょう。

ページ内リンクの張り方

ここからは具体的な手順の説明へと入ります。ステップは全部で2つ。最初は少し戸惑う部分もあるかもしれませんが、慣れてしまえばすごく簡単なのでぜひマスターして使いこなしてみてください。

・ステップ1:アンカー(目印)を作る

まず、最初にリンク先となる部分から作っていきます。
今回は、この記事の目次の中で「はじめに」の部分の作成過程を例にみていくことにしましょう。

ここでは

<a name="アンカー名" >内容</a>

というhtmlテンプレを使用します。
これを次のように変換。

<a name="a1" >はじめに</a>

ちなみに、アンカー名はなんでも構いませんが、半角英数字での入力が必要な点だけご注意ください。

・ステップ2:ページ内のアンカーへリンクを張る

つぎに、1で作成したアンカーから冒頭の目次へとリンクを張ります。
具体的には、

<a href="#アンカー名">文字・画像</a>

というhtmlコードを使用します。
今回は、これを

<a href="#a1">はじめに</a>

のように変換します。
これで無事、目次とリンク先をつなげることができました。

まとめ

以上をまとめると、

リンクしたい場所にアンカー(目印)を置いて、

<a href="#アンカー名">

でリンクするとページ内ジャンプが出来る。

ということになります。

なお、今回の記事を作成するにあたって、htmlをそのまま入力すると、自動的に命令が実行されてしまいコードが表示されないという問題が生じたのですが、
blogtool ソースを「そのまま表示する為のHTMLソース」に変換
という素晴らしいサイト様のおかげで無事解決できました。あらためて感謝申し上げます。

以上、ご覧いただきありがとうございました。