目次を自動生成してくれるプラグインを導入

ホーム > ブログカスタマイズ > プラグイン > 目次を自動生成してくれるプラグインを導入

目次を自動生成してくれるプラグインを導入

2014.09.26

ページ中の見出し(<h>タグ）を読み取って、自動で目次を作ってくれるプラグインを導入してみた

目次があると、その記事の内容がパッと見で分かり易いし、目的の内容がある位置まで移動出来たりするので便利。
そんな便利な目次を “jQueryで自動生成” してくれるプラグインが結構色々あったので、いくつか試してみた結果、自分の思い通りの表示になって、導入やカスタマイズも簡単な下記のプラグインを導入♪

今回導入したプラグイン。（プラグインの概要や詳しい導入方法は下記のページをご確認下さい。）
「jQueryで目次を自動生成する「tocプラグイン」 / 小粋空間 」

【「tocプラグイン」をFC2ブログで利用する方法】

1.ファイル名を変更する

上記のページで、プラグインをダウンロードすると「jquery.toc_0.0.2.js」と言うファイル名になっており、ページ内の説明では「jquery.toc.js」にリネームしてください。と記載されてるが、FC2ブログではファイル名に「.(ドット)」が入ってるとアップロード出来ないので、「.(ドット)」の部分を「_(アンダーバー)」や「-(ハイフン)」にして、ファイルアップロードを行う。
例：「jquery-toc.js」

また、head要素（<head> ～ </head>の間）への記述は以下のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="http://～省略～/jquery-toc.js"></script>
<script>
$(function(){
    $("body").toc();
});
</script>

※「"http://～省略～/jquery-toc.js"」の部分はFC2ブログにアップロードしたファイル名をコピペする。

※「$("body").toc();」の部分は、目次を自動生成する為の見出し(<h>タグ)を抽出する範囲で、デフォルトの"body"だと、ページ全体の見出し(<h>タグ)を抽出する事になるので、記事内の見出し(<h>タグ)だけを抽出したい場合は、id属性もしくはclass属性で範囲を指定すればOK 　
例：「$('div.entry-body').toc();」
その他オプション設定も可能なので、詳細は上記ページ内でご確認下さい。

このページのトップへ

2.目次の表示場所について

自動で作成された目次は「<div id="toc"></div>」を記述した場所に表示されるので、記事ページ上部に表示したい場合は、各記事の内容に「<div id="toc"></div>」と記述すればOK

毎回記事の内容に記述するのが面倒な場合は、テンプレートのHTMLソース内もしくは、右の画像のようにFC2ブログの「プラグインの設定」から「公式プラグイン追加」で「フリーエリア」を追加して、その中に記述すれば毎回自動で目次をサイドメニューに表示してくれます。

このブログでは、この方法でサイドメニューにも目次を表示してます♪

このページのトップへ

3.CSSをテンプレートにコピペする

CSSはサンプルで用意されてる下記の内容を、FC2ブログの「テンプレートの設定」から、スタイルシート編集内の任意の場所もしくは、末尾にでもコピペすればOK

#toc:before {
  content: "目次";
  padding-left: 8px;
}
#toc {
  backgound:#f9f9f9;
  border: 1px solid #aaa;
  font-size: 95%;
  display: table;
  margin-bottom: 10px;
  padding: 15px;
  width: auto;
}
#toc ol,
#toc ol li {
  margin: 5px 5px 5px 15px;
  padding: 0;
}
#toc a:hover {
  text-decoration: underline;
}

※この内容を元に、自分のブログに合わせて調整すれば手っ取り早いです♪

以上、簡単でしたが「tocプラグイン」をFC2ブログで利用する方法でした

ブログランキングに参加中♪
良かったらポチっとお願いします