Blogger Bloggerカスタマイズ WordPress WordPressカスタマイズ ページ内リンク

ページ内リンクで目次を設置する方法

目次やページトップへの誘導などに役立つ、ページ内リンクの設定方法です。

設定は至って簡単です。今回は目次の作り方を例に進めます。


サンプル1　サンプル2
上記2つは、このブログで実際にページ内リンクを使って目次を作っている記事です。

基本コード

サンプル1の1～3を見出しa、見出しb、見出しcとするとこうなります。
<a href="#mokuji1">見出しa</a>
<a href="#mokuji2">見出しb</a>
<a href="#mokuji3">見出しc</a>
これをリンク元とします。

次はリンク先です。
<a name="mokuji1"></a>
<a name="mokuji2"></a>
<a name="mokuji3"></a>
mokuji1,2,3の部分は、半角英数字で任意のアンカー名をつけられます。

これが基本となります。

設置例

実際に設置してみると

目次

  1. 見出しa
  2. 見出しb
  3. 見出しc

見出しaです

見出しaの文章…
見出しaの文章…

見出しbです

見出しbの文章…
見出しbの文章…

見出しcです

見出しcの文章…
見出しcの文章…

目次へ戻る

設置例のコード

設置例の「目次」から「目次へ戻る」までのコードです。
<h3 id="mokuji">目次</h3>
<ol>
<li><a href="#mokuji1">見出しa</a></li>
<li><a href="#mokuji2">見出しb</a></li>
<li><a href="#mokuji3">見出しc</a></li>
</ol>

<h2 id="mokuji1">
見出しaです</h2>
<p>見出しaの文章…</p>
<p>見出しaの文章…</p>

<h2 id="mokuji2">
見出しbです</h2>
<p>見出しbの文章…</p>
<p>見出しbの文章…</p>

<h2 id="mokuji3">
見出しcです</h2>
<p>見出しcの文章…</p>
<p>見出しcの文章…</p>

<a href="#mokuji">目次へ戻る</a>
このコードを使う場合、Bloggerなら「HTML」モード、WordPressなら「テキスト」モードを選択してください。

自動目次作成プラグイン

WordPressには自動で目次を作成してくれる便利なプラグインがあります。
「Table of Contents Plus」を使うと簡単に目次が設置できます。

サイト内の別ページの特定の場所にリンク

自サイト内の、他ページの特定の場所にジャンプさせる方法
アンカー（ジャンプの着地点）側を 
<div id="a01">ジャンプ</div>
とします。divやa01の部分は変更可能です。
ジャンプのスタート地点は 
<a href="ページのURL#a01">ジャンプ</a>
となります。
このとき、別タブで開かせたいときは 
<a href="ページのURL#a01" target="_blank">ジャンプ</a>
とします。ページのURLは着地点のページURLを入力します。
スポンサーリンク
関連記事
スポンサーリンク