ページ内リンクを設定して記事内に目次を作る

Seesaaブログでは、HTMLソースコードを用いてページ内リンクを設定することで、記事内に目次を作ることができます。

通常、リンクは現在表示されているページとは別のページに移動するために設定するものですが、ページ内リンクを設定することで、同じページ内の特定の文言に移動することができます。

今回は、このページ内リンクの設定を応用して、記事内の目次を作成する方法をご紹介します。

今回の目次

リンク先の設定

移動させたい文言(リンク先)に対し、以下のように目印を付け、リンク先の設定を行います。

<要素 id="リンク先">リンク先の文言</要素>
  • [リンク先] はページ内リンク先の目印となる文言を設定します。
    こちらは、英語以外に、一応日本語や全角文字も設定可能です。
    今回は日本語や全角文字でも動作可能ということを紹介するため、日本語および全角文字で設定します。
  • [要素] には <p> <div> <span> などを用います。
    なお、こちらのHTML要素については、HMTLの知識が必要となります。また、サポート対象外となりますので、あらかじめご了承ください。

リンク元の設定

リンク先の設定が終わったら、次にリンク元の設定を行います。

<a href="#リンク先">リンク元の文言</a>
  • [#リンク先] にはリンク先で設定した文言と同じ文言を設定します。
    なお、文頭の # (半角シャープ)は必須です。

実用例

これまでのご案内を踏まえて、ページ内リンクを設定しました。
以下の [リンク元1] をクリックすると [リンク先1] に移動しますので、クリックして確認してみてください。

リンク元1

リンク先1

また、本記事内にある目次については、以下のようなソースコードを用いていますので、併せてご紹介します。

リンク先

<h3 id="リンク先の設定">リンク先の設定</h3>
<h3 id="リンク元の設定">リンク元の設定</h3>
<h3 id="実用例">実用例</h3>

リンク元

<a href="#リンク先の設定">リンク先の設定</a>
<a href="#リンク元の設定">リンク元の設定</a>
<a href="#実用例">実用例</a>

いかがでしたか?
この設定を行うことでお使いのブログ記事の幅も広がると思うのでぜひお試しください。

※本記事でご紹介した内容はあくまで一例となります。
また、HTMLソースコードに関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりません。
お問い合わせいただいてもご案内できませんので、あらかじめご了承ください。