超簡単！FC2ブログの記事に自動で目次を挿入する方法

FC2ブログの記事内の見出し構成を読み取って自動で目次(Table of Contents)を挿入させる方法について覚書。

無料で配布されているJavaScript(JS)ファイルとFC2ブログのテンプレート、CSSをちょっと変更するだけで誰でも超簡単に記事の目次が自動で挿入できるようになります。

テンプレートとCSSの変更は、基本的にはこの記事に記載のコードをコピペすれば大丈夫です。

この記事の目次

1 ブログの記事に目次を設置するメリット/デメリット
- 1.1 メリット
- 1.2 デメリット
2 FC2のブログ記事に目次を自動で挿入する方法の概要
3 ブログのカスタマイズ方法
- 3.1 JQueryファイルのダウンロードとFC2ブログへのアップロード
- 3.2 FC2ブログテンプレートの変更(追記)方法
4 目次をカスタマイズする
5 サイドバーのタイトル等に”h”タグを使用している場合の注意点
6 目次が表示されないなどうまく動作しない場合
7 FC2ブログの記事に目次を自動で挿入する方法のまとめ

ブログの記事に目次を設置するメリット/デメリット

ブログに目次を設置するメリットとデメリットについてです。

メリット

ユーザビリティの向上

記事の冒頭に目次を設置することで、ブログの訪問者がその記事の概要を一目で把握することができるようになります。

また、訪問者が記事をスクロールしなくても必要な見出し(章)にすぐたどり着けるようになるためユーザビリティが向上します。

SEO対策

ユーザビリティはGoogleやYhaooなど検索エンジンが記事を評価する指標の一つとなっているため、ユーザビリティの向上はSEO対策として有効です。

検索結果に見出しリンク

必ずというわけではないですが、Google、Yahooの検索結果に見出しのリンクが表示されるようになります。

自然と記事の質が上がる

記事を書いた後の確認の際に目次を見ると「あれ、ちょっと内容とずれた見出しになっているな」と思ったりする場合があります。

内容と見出しが今ひとつマッチしていないような感じだったり、目次としてみるとわかりづらい見出しになっていたりすることに気づくことがあります。

そういったことに気づけると記事をアップする前の自己チェックの質が高くなり、結果的に記事の質が良くなることにつながります。

まぁ、最初から質の高い記事を書ける方にはあまり意味が無いかもしれませんが…

なんかカッコいい！

単純に目次がついてるとなんかカッコいいですし、訪問者側もちゃんと書かれている記事なんだなという印象を持ってもらえる気がします。

デメリット

記事を最後まで見てもらえなくなる場合がある

目次があることで記事を読まなくても記事の概要がわかるため、目次だけ見て探している情報と違うという判断をされてしまう場合があります。

本当は訪問者の求める情報が書かれているにもかかわらず、目次に使われている見出し次第でそいった判断をされてしまう恐れがあります。

見出しが多いと目次が目立ちすぎてしまう

見出しが多いと当然目次の長さも長くなるため、スクロールしないと本文にたどり着けなかったり最初の画面で目次だけしか見えなかったり等、目次が目立ちすぎる場合があります。

見出しが少ない短い記事だとカッコ悪い

見出しが1つとか2つの記事だと目次がしょぼくなりますし、あってもあまり意味をなさないのでちょっとかっこ悪いかもしれません。

見出しの文言だけで記事を評価されてしまう可能性がある

デメリットの1番目と関係しますが、目次だけで訪問者にとって見る価値のある記事かそうでないか判断されるてしまう可能性があります。

特にアドセンスやアフィリエイトなどの営利目的のブログの場合、記事を最後まで読んでもらえないと記事下の広告や最終的な目的であるアフィリエイトリンクへの誘導ができなくなってしまいます。

FC2のブログ記事に目次を自動で挿入する方法の概要

ブログ記事に自動で目次を挿入するカスタマイズに必要な作業の概要を以下に記載します。

JQuetyファイルのダウンロードとブログへのアップロード目次を自動で生成するJavaScriptのダウンロードとダウンロードしたファイルを自分のブログにアップロードします。
ブログのhtmlテンプレートの編集目次を生成するためのJavaScriptコードと目次を表示するためのhtmlタグをテンプレートに追加します。
ブログのcssテンプレートの編集目次の体裁を整えるためのCSSをテンプレートに追加します。

ブログのカスタマイズ方法

ブログに目次を自動で挿入するためのカスタマイズ方法について、実際の手順を以下に記載します。

JQueryファイルのダウンロードとFC2ブログへのアップロード

まず必要なJQueryのファイルをダウンロードし、ファイル名を変更する必要があるのでいかに手順を記載します。

JQueryファイルを配布している以下のサイトをブラウザ開きます。

jQueryで目次を自動生成する「tocプラグイン」

jQueryでヘッダ要素から目次を作る「displayTOCプラグイン」を公開します。

www.koikikukan.com

配布サイトの”jquery.toc_0.0.2.js”を右クリックして対象をファイルに保存します。

“jquery.toc_0.0.2.js”ファイルがダウンロードされたことを確認してください。

ダウンロードした”jquery.toc_0.0.2.js”ファイルのファイル名を”jquery-toc.js”に変更します。

※FC2ではファイル名の途中に”.”を含むファイルをアップロードすることができないためファイル名を変更する必要があります。

ファイル名を変更した”jquery-toc.js”ファイルをFC2ブログにアップロードします。

アップロードの手順については、以下の記事を参考にしてください。

FC2ブログカスタマイズ:無料版のFC2ブログで画像ファイル以外のファイル(jsファイル等)をアップロードする方法

無料版のFC2ブログでグログ内でjqueryなどのjsファイル等、画像ファイル以外のファイルをアップロードする方法について覚書。 FC...

selifelog.com

2018-08-16 10:08

アップロードしたファイルのURLをメモ帳などに控えておいてください。

FC2ブログテンプレートの変更(追記)方法

JQueryファイルをブログへアップロードしたら次にブログのhtmlテンプレートとcssテンプレートに変更を加えます。

以下の変更手順について記載しますが、テンプレートの変更をする前にかならず現在使用しているテンプレートの複製を作成し、バックアップを取っておきましょう。

テンプレートの複製によるバックアップ方法については、以下の記事を参照してください。

FC2ブログのテンプレートを編集する前にテンプレートの複製をしてバックアップする方法 | FC2ブログカスタマイズ

FC2ブログをカスタマイズする際にテンプレートを編集する前に複製をしてバックアップを取る手順について覚書。 FC2ブログをカスタマイズ...

selifelog.com

2018-08-16 14:04

複製作成後は、編集対象のテンプレートが現在適用されているテンプレートになっていることを確認してください。

htmlテンプレートの変更(追記)方法

htmlテンプレートの<head> ～ </head>の任意の場所に以下のhtmlを追記します。

追記する場所がよくわからなければ、</head>の上で良いです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://アップロードしたファイルのURL" type="text/javascript"></script>
<script>
$(function(){
    $("body").toc({
        startLevel: 'h1',
        listType: 'ol',
        target: 'toc'
    });
});
</script>

$(function(){

$("body").toc({

startLevel: 'h1',

listType: 'ol',

target: 'toc'

});

</script>

1行目の”jquery.min.js”の参照について気をつけて欲しいのですが、すでに何か別のカスタマイズで”jquery.min.js”を参照している場合は1行目は追記せず、2行目以降を追記してください。

2行目の”src=”以降のURLはファイルをアップロードした際に控えておいたアップロードしたファイルの参照URLを記載してください。

次にhtmlテンプレートの<%topentry_more>の直前に以下のhtmlを追記します。

<div id="toc"></div>

1	<div id="toc"></div>

上記のhtmlは目次を表示するhtmlになります。

<%topentry_more>の直前に追記した場合、”続きを読む”をクリックした時に始まる記事の文章の直前(リード文の直後)に目次が表示されます。

目次を表示するhtml追記する箇所は、目次を表示したい任意の場所に追記して構いませんが、目次を設置しているほとんどのブログはリード文の直後に設置しています。

このブログの目次位置もそうなっています。

cssテンプレートの変更(追記)方法

適用されているブログテンプレートのcssに以下のcssコードを追記します。

#toc:before {
  content: "目次";
  padding-left: 5px;
  color:#FFF;
}
#toc {
  background:#89BDDE;
  border: 1px solid #aaa;
  font-size: 80%;
  display: table;
  margin-bottom: 15px;
  padding: 5px;
  width: auto;
}
#toc ol,
#toc ol li {
  margin: 0px 5px 0px 12px;
  padding: 0;
  line-height: 25px;
  color:#FFF;
}
#toc a:hover {
  text-decoration: underline;
}
#toc a {
  text-decoration: underline;
  color:#FFF;
}

#toc:before {

content: "目次";

padding-left: 5px;

color:#FFF;

}

#toc {

background:#89BDDE;

border: 1px solid #aaa;

font-size: 80%;

display: table;

margin-bottom: 15px;

padding: 5px;

width: auto;

}

#toc ol,

#toc ol li {

margin: 0px 5px 0px 12px;

padding: 0;

line-height: 25px;

color:#FFF;

}

#toc a:hover {

text-decoration: underline;

}

#toc a {

text-decoration: underline;

color:#FFF;

}

htmlとcssの変更が終了したら[更新]をクリックし、テンプレートの設定変更を保存してください。

見出しが設定されている記事を表示し、目次がきちんと表示されているか確認してください。

目次をカスタマイズする

今回使用している目次を自動で作成するJavaScriptはある程度のカスタマイズが可能です。

カスタマイズ方法について以下に説明します。

目次に含める見出しタグのトップレベルを変更する

手順でhtmlテンプレートに追記したコードは、目次に含めるトップレベルの見出しタグの指定が<h1>タグになっています。

記事のタイトルが<h1>タグになっていて、記事中で使われている見出しのトップレベルが<h2>タグとなっているようなブログテンプレートの場合、目次に含める見出しタグのトップレベルを<h1>から<h2>に変更する必要があります。

その際は、htmlテンプレートに追加したコードを以下のように変更します。

変更前

<script>
$(function(){
    $("body").toc({
        startLevel: 'h1',
        listType: 'ol',
        target: 'toc'
    });
});
<script>

$(function(){

$("body").toc({

startLevel: 'h1',

listType: 'ol',

target: 'toc'

});

変更後

<script>
$(function(){
    $("body").toc({
        startLevel: 'h2',
        listType: 'ol',
        target: 'toc'
    });
});
</script>

$(function(){

$("body").toc({

startLevel: 'h2',

listType: 'ol',

target: 'toc'

});

</script>

目次に表示する見出しタグの範囲を変更する

デフォルトでは目次を生成する際に<h1>～<h6>までの見出しを使うようになっています。

例えば目次に表示する見出しタグ範囲を<h2>～<h3>までにしたい場合、ブログにアップロードした”jquery-toc.js”ファイルの中のコードを以下のように変更します。

変更前

;(function($){
    jQuery.fn.toc = function(options) {
        var defaults = {
            startLevel: 'h3',
            listType: 'ul',
            target: 'toc'
        };
        var setting = jQuery.extend(defaults, options);
        var startLevel = setting.startLevel.substr(1, 1);
        var data = '';
        var currentLevel = 0;
        var counter = 1;
        var header = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];
        var tmpArray = new Array;
        for (i=startLevel-1; i<6; i++) {
            tmpArray.push( header[i] );
        }

;(function($){

jQuery.fn.toc = function(options) {

var defaults = {

startLevel: 'h3',

listType: 'ul',

target: 'toc'

};

var setting = jQuery.extend(defaults, options);

var startLevel = setting.startLevel.substr(1, 1);

var data = '';

var currentLevel = 0;

var counter = 1;

var header = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];

var tmpArray = new Array;

for (i=startLevel-1; i<6; i++) {

tmpArray.push( header[i] );

}

変更後

;(function($){
    jQuery.fn.toc = function(options) {
        var defaults = {
            startLevel: 'h3',
            listType: 'ul',
            target: 'toc'
        };
        var setting = jQuery.extend(defaults, options);
        var startLevel = setting.startLevel.substr(1, 1);
        var data = '';
        var currentLevel = 0;
        var counter = 1;
        var header = [ 'h1', 'h2', 'h3'];
        var tmpArray = new Array;
        for (i=startLevel-1; i<3; i++) {
            tmpArray.push( header[i] );
        }

;(function($){

jQuery.fn.toc = function(options) {

var defaults = {

startLevel: 'h3',

listType: 'ul',

target: 'toc'

};

var setting = jQuery.extend(defaults, options);

var startLevel = setting.startLevel.substr(1, 1);

var data = '';

var currentLevel = 0;

var counter = 1;

var header = [ 'h1', 'h2', 'h3'];

var tmpArray = new Array;

for (i=startLevel-1; i<3; i++) {

tmpArray.push( header[i] );

}

“jquery-toc.js”ファイルの中身を変更したらブログに再度同じファイル名でアップロードしてください。

目次の項目の先頭を”・”もしくは数字にする

目次の各見出しの先頭を”数字”から”・”に変更することができます。

その際は、htmlテンプレートに追加したコードを以下のように変更します。

変更前

<script>
$(function(){
    $("body").toc({
        startLevel: 'h1',
        listType: 'ol',
        target: 'toc'
    });
});
</script>

$(function(){

$("body").toc({

startLevel: 'h1',

listType: 'ol',

target: 'toc'

});

</script>

変更後

<script>
$(function(){
    $("body").toc({
        startLevel: 'h2',
        listType: 'ul',
        target: 'toc'
    });
});
</script>

$(function(){

$("body").toc({

startLevel: 'h2',

listType: 'ul',

target: 'toc'

});

</script>

4行目の”listType”に”ol”を指定すると数字に、”ul”を指定すると”・”になります。

目次の見た目(デザイン)を変更する

目次のデザインはcssを変更することで可能です。

コメントで補足したcssを以下に記載しておきます。

/*目次文字部分のcss*/
#toc:before {
  content: "目次";
  padding-left: 5px;
  color:#FFF;
}
/*目次ボックス内のcss*/
#toc {
  background:#89BDDE;
  border: 1px solid #aaa;
  font-size: 80%;
  display: table;
  margin-bottom: 15px;
  padding: 5px;
  width: auto;
}
/*目次のリスト表示部分のcss*/
#toc ol,
#toc ol li {
  margin: 0px 5px 0px 12px;
  padding: 0;
  line-height: 25px;
  color:#FFF;
}
/*目次の各見出しにマウスが置かれた時のcss*/
#toc a:hover {
  text-decoration: underline;
}
/*目次内の見出しリンクのcss*/
#toc a {
  text-decoration: underline;
  color:#FFF;
}

/*目次文字部分のcss*/

#toc:before {

content: "目次";

padding-left: 5px;

color:#FFF;

}

/*目次ボックス内のcss*/

#toc {

background:#89BDDE;

border: 1px solid #aaa;

font-size: 80%;

display: table;

margin-bottom: 15px;

padding: 5px;

width: auto;

}

/*目次のリスト表示部分のcss*/

#toc ol,

#toc ol li {

margin: 0px 5px 0px 12px;

padding: 0;

line-height: 25px;

color:#FFF;

}

/*目次の各見出しにマウスが置かれた時のcss*/

#toc a:hover {

text-decoration: underline;

}

/*目次内の見出しリンクのcss*/

#toc a {

text-decoration: underline;

color:#FFF;

}

サイドバーのタイトル等に”h”タグを使用している場合の注意点

コメントで指摘されて気づいたのですが、記事本文以外の場所、例えばサイドバーなどのタイトルに”h”タグを使用していると、サイドバーのタイトルまで目次に含まれてしまいます。

使用しているFC2ブログのテンプレートが記事本文以外の場所で”h”タグを使用してる場合はスクリプトの記述を変更する必要があります。

ほとんどのブログテンプレートは、記事タイトルを含む記事本文部分を”div”タグを使用したブロックで囲んでいるはずですので、まず自分の使用しているブログテンプレートで記事本文を囲んでいるブロック要素を探してください。

chromeブラウザの”タグを検証”機能を使用して自分のブログをデバック表示させると簡単に見つけられます。

例えばこのブログで使用しているテンプレートでは、記事タイトルを含む記事本文部分は、<div class=”article2″>という指定をして、記事をブロックで囲んでいます。

この記事を囲っているブロック要素部分の記述を使用してスクリプトの”body”部分の記述を以下のように変更します。

<script>
$(function(){
    $("div.article2").toc({
        startLevel: 'h2',
        listType: 'ol',
        target: 'toc'
    });
});
</script>

$(function(){

$("div.article2").toc({

startLevel: 'h2',

listType: 'ol',

target: 'toc'

});

</script>

これで記事本文部分の”h”タグのみを拾って自動的に目次が作成されるようになります。

目次が表示されないなどうまく動作しない場合

<head>～</head>間に目次のスクリプトを記載しても目次が表示されず、</body>の直前にもっていったら目次が表示されたとのコメントをいただいたので、もしうまく行かなかったら</body>直前にスクリプトを移動して試してみてください。

FC2で使っているテンプレートの作りによって変わってくるかもしれないです。

私が使っていたテンプレートでは、</head>の直前にスクリプトを記載して問題なく動作しています。

FC2ブログの記事に目次を自動で挿入する方法のまとめ

私のブログでは、目次の見出し範囲を<h2>～<h3>までとしています。

あまり細かい見出しまで目次に含めると目次部分が長くなってしまうからです。

目次ボックス内の背景色や文字色、リスト表示の行間なども私のブログに合った形に変更してありますので、必要に応じて自分のブログに合ったcss内容に変更してください。

テデスコより:
2016年5月9日 9:58 AM
はじめまして。billyboyさんの記事を参考に目次を作れせていただきました。ありがとうございます。ひとつお伺いしたいのですが、目次に記事本文以外にもサイドバーの項目やコメント欄なども含まれてしまうのですが、こちらはどういった方法で解決するのがよいのでしょうか？ブログを始めたばかりで知識が浅く困っております。厚かましいとは分かっておりますがブログの記事が親切なので甘えて質問させていただきました。よろしくお願いします。
返信
- るーとより:
  2016年5月10日 1:45 PM
  デデスコさん、コメントありがとうございます。
  記事本文部分以外に”h”タグを使用している場合、スクリプトを修正しないと目次に含まれてしまいます。
  記事本文部分を囲んでいるブロック要素部分の記述を使用してスクリプトを変更すれば解決できます。
  スクリプトの変更方法を新たに記載して記事を改版しましたので参考にしてください。
  返信
かめ太郎より:
2016年10月25日 11:43 AM
当記事はとても分かりやすく書かれているためブログ初心者の私にも、とても参考になりました。
悪戦苦闘しましたが、なんとか目次を表示することができました。ありがとうございます。
大変恐縮ですが、もしお分かりでしたら教えて頂きたいのですが
小生のブログではリンクにembedlyを使っているのですが、<h4>タグを使用しているため目次を作るとリンク先の記事名まで含まれてしまいます。
そのためh4タグだけ目次対象外にしたいのですが、可能でしょうか？
分からないなりに以下のことはやってみました。
jquery-toc.js"ファイルの中のコードの var header = [ ‘h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’ ];
の’h4’を削除。
結果は変わらず、h4タグも目次化されてしまいました。
お手数をお掛けして申し訳ないのですがもしお分かりでしたら教えて頂けないでしょうか?
返信
- るーとより:
  2016年10月25日 4:13 PM
  h4だけ削除したとのことですが、h5、h6はそのまま残して目次に含めるということでしょうか？
  単純にh4だけ抜きたいのかh4以降抜きたいのかどちらでしょう？
  返信
かめ太郎より:
2016年10月25日 6:17 PM
お返事ありがとうございます。
h4タグだけ対象外にしたいので、h4だけ削除しました。他は削除せずにそのままにしています。
返信
- るーとより:
  2016年10月26日 9:30 PM
  了解しました。
  平日は仕事が忙しいので土日にでも調べて見ますね。
  返信
かめ太郎より:
2016年10月27日 9:19 AM
忙しい中お手数お掛けして申し訳ないです。かなりいじらないと出来ない様であれば諦めますので仰ってください。
返信
- るーとより:
  2016年11月3日 5:28 PM
  まず、16行目の”h4″部分を削除、以下のようになります。
  var header = [ ‘h1’, ‘h2’, ‘h3’, ‘h5’, ‘h6’ ];
  次に18行目のforループ文を以下のように変更します。
  for (i=startLevel-1; i<5; i++) {
  変更後はすぐにブログに反映されない場合があるので、[Shift]+[F5]でスーパーリロードさせてみてください。
  私のローカルの環境ではうまくいきました。
  返信
かめ太郎より:
2016年11月4日 2:12 PM
billyboy様
教えて頂いた通りに修正したところうまくいきました！
お忙しい中、お手数お掛けしました。
とても感謝しております。
返信
- るーとより:
  2016年11月5日 11:40 AM
  かめ太郎さん
  希望通りになってよかったですね！
  この記事が役に立って私も嬉しいです！
  返信
まっちゃんより:
2018年8月10日 6:35 PM
こんにちは
こちらの記事を参考に、目次を作成してうまくいきました。
途中いろいろと試行錯誤しましたが、Head内に配置すると書かれてある部分をHead内に書くと、うまくいかず、Bodyの最後に（の直前に）配置するとうまくいきました。
でも、どうもありがとうございました。
返信
- るーとより:
  2018年8月10日 10:44 PM
  まっちゃんさん、コメントありがとうございます。
  私がFC2で使ってたテンプレートでは、</head>の直前に記載して問題なく表示されています。
  まっちゃんさんのコメントを参考に、うまくいかなかったらの直前に記載して試すことを記事に追記しました。
  返信