ホーム / リンク /

Bloggerブログ|目次を複数設置する|jQuery

もくじ リンク

投稿2019年5月2日 更新

　目次はページ内リンクとして機能するので記事の最後にも目次があれば、見出しに戻って読み返すのが容易になります。
　複数の目次が設置されているウェブサイトはなかなか見かけませんが、複数設置することも可能なので、ここでその方法について触れておきます。
　なお複数の目次のデザインを同一にする場合と、目次ごとにデザインを使い分ける場合では、変更する箇所が若干違うので2つのパターン取り上げます。



目次そのものの導入方法は以下で詳しく取り上げています。
記事中のh2を利用して目次を自動生成する（ページ内リンク）

もくじ


複数の目次のデザインを同じにする場合（クラスで指定）


変更する流れを把握していただくために先に簡潔な手順を挙げておきます。

  1. jQueryセレクターの頭に付いている「#」（id指定）を「.」（class指定）に変更する
  2. それに合わせて目次に関するCSSのセレクタを「#」（id指定）から「.」（class指定）に変更する
  3. 記事ページの「目次を生成するコード」を変更して追加する

では一つ一つ確認していきます。

１　jQueryのコードを変更



　コードの最後の方に書かれている$('#toc').html(toc);を$('.toc').html(toc);に変更します。

変更前
$('#toc').html(toc);
変更後
$('.toc').html(toc);

コードの意味

　左の変更前のコードは、
「「id="toc"」という属性値をもつタグに、jQuery内で記述したコードが代入されている「toc」をhtml形式で表示する」ということを表しています。

　一つのもくじを表示するだけならこれで問題ありませんが、idの名前は同一ページ内で重複してはいけないというHTMLのルールがあるので、このままのコードでは目次を複数設置することができません。

　そこでidで指定しているところ（#）をクラスで指定（.）して、 「「class="toc"」という属性値をもつタグに表示する」という意味になるようにします。それが右側の変更後のコードです。

　クラスはidと違い、同じ名前のものが複数存在していても問題が生じないのでこれで目次を複数表示できます。

　ただしjQueryセレクター
$('　')
内で指定するセレクターは「.」（class指定）よりも「#」（id指定）の方が処理が速いので、目次を複数設置するためにセレクターを変更すると、ページの読み込み速度が遅くなってしまいます。
　idを使用して複数の目次を表示するには、次項の「複数の目次のデザインを使い分ける場合（idで指定）」を参考にしてください。

変更済みのコード　olの場合
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">目次</div><ol>';
var count = 0;
$('.post-body h2').each(function (){
count++;
this.id = 'chapter-' + count;
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';
});
toc += '</ol>';
$('.toc').html(toc);
});
//]]>
</script>

変更済みのコード　ulの場合
<script>
//<![CDATA[
$(function(){
var toc = '<div class="toctitle">目次</div><ul>';
var count = 0;
$('.post-body h2').each(function (){
count++;
this.id = 'chapter-' + count;
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a></li>';
});
toc += '</ul>';
$('.toc').html(toc);
});
//]]>
</script>


２　CSSを変更



jQueryのコードを#から.に変更したことに合わせて、目次に関するCSSのセレクターも#から.に変更します。

変更前
#toc{
}
#toc ol, #toc ul{
}
#toc ol li, #toc ul li{
}
#toc a{
}
変更後
.toc{
}
.toc ol, .toc ul{
}
.toc ol li, .toc ul li{
}
.toc a{
}


３　記事ページの「目次を生成するコード」を変更して追加



<div class="toc"></div>
と記述したところに目次が表示されます。



変更前
<div id="toc"></div>
変更後
<div class="toc"></div>


　これで完了です。
しかしこの方法は目次の生成をクラスで一括管理しているため、表示される目次ごとに幅を変えるといったことができません。
　トップに表示する目次と記事の最後に表示する目次でデザインを変えたいという場合には次項を参考にしてください。

複数の目次のデザインを使い分ける場合（idで指定）



簡単な手順
  1. jQueryのコードに目次を生成するコードを追加する
  2. CSSに目次のデザインを追加する
  3. 記事ページのHTMLに目次を生成するコードを追加する

では一つ一つ確認していきます。

１　jQueryのコードに目次を生成するコードを追加



コードの最後の方に書かれている$('#toc').html(toc);の後に、増やしたい目次の数だけ以下のようにコードを付け加えます。

変更前
$('#toc').html(toc);
変更後
$('#toc').html(toc);
$('#toc-futatumenomokuji').html(toc);
$('#toc-bottom').html(toc);

　$('#　')内の文字列は、CSSのセレクタと記事ページのHTMLで目次を生成する際に使用するので、ご自身が覚えやすいものにしてください。

　目次を生成するために毎回コードを記述するのは面倒という場合はコードをテンプレート化しておくと便利です。

２　増やした目次の分をCSSに追加



　上の変更後のところで増やした「#○○」をCSSのセレクタに記述します。
　元々あった目次と同じデザインの目次を複数生成する場合は中身をコピペします。

変更前
#toc{
}
#toc ol, #toc ul{
}
#toc ol li, #toc ul li{
}
#toc a{
}
変更後の例
#toc{
}
#toc ol, #toc ul{
}
#toc ol li, #toc ul li{
}
#toc a{
}
#toc-futatumenomokuji{
}
#toc-futatumenomokuji ol, #toc-futatumenomokuji ul{
}
#toc-futatumenomokuji ol li, #toc-futatumenomokuji ul li{
}
#toc-futatumenomokuji a{
}
#toc-bottom{
}
#toc-bottom ol, #toc-bottom ul{
}
#toc-bottom ol li, #toc-bottom ul li{
}
#toc-bottom a{
}


３　記事ページに「目次を生成するコード」を追加




変更前
<div id="toc"></div>
変更後
<div id="toc"></div>
<div id="toc-futatumenomokuji"></div>
<div id="toc-bottom"></div>


これですべて完了です。

QooQ