Blogger目次を見出しと連動させて自動生成する方法
ネットを閲覧している最中に、「次ページへ」が７つもある長いサイトに訪問したりします。欲しい情報がどこにあるのかもわからないし、各ページごとの検索になるのでcommand＋Fも何度もやらないといけない。
そこで目次を見出しと連動させて自動生成する方法をご紹介致します。
参考にさせて頂いたサイト
Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法 / 人気のあるBloggerブログの作り方※こちらでご紹介しているソースは、目次の連番と本文の「1.見出し」及び準見出し等が番号と連動しております。
例
目次
1.見出し
準見出し
に対して、以下が本文の表示です。
1.見出し
ー本文ー
↑
見出し
ー本文ー
上記のようなスタイルを希望していたので、カスタマイズ致しました。
本ブログのような目次スタイルになります。
特に重要なカスタマイズ箇所
下記の箇所のchapNo削除したところ、本文「見出し」になったので変更。
変更前
toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
$(this).html(chapNo + $(this).html());
});変更後
toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
$(this).html($(this).html());
});実際挿入するタグは下記になります。（上記ソース変更済み）
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log("call func");
$('a[name="more"]').after("<div id='toc' />");
var idcount = 1;
var h2cnt = 0;
var toc = '';
var currentlevel = 0;
$(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
var chapid = "chapter-" + idcount;
$(this).before("<div class='chapter-no' id='" + chapid + "' />");
idcount++;
var level = 0;
var chapNo;
if (this.nodeName.toLowerCase() == "h2") {
level = 1;
h2cnt++;
h3cnt = "";
h4cnt = "";
chapNo = h2cnt + ".";
} else if (this.nodeName.toLowerCase() == "h3") {
level = 2;
h4cnt = "";
chapNo = h3cnt
} else if (this.nodeName.toLowerCase() == "h4") {
level = 3;
chapNo = h4cnt
}
if (currentlevel == level) {
toc += "</li><li>";
}
while (currentlevel < level) {
toc += '<ul class="chapter"><li>';
currentlevel++;
}
while (currentlevel > level) {
toc += "</li></ul><li>";
currentlevel--;
}
toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
$(this).html($(this).html());
});
while (currentlevel > 0) {
toc += "</li></ul>";
currentlevel--;
}
if ($(".post-body h2")[0]) {
$("#toc").html(toc);
} else {
$('#toc').attr('class', 'no-toc');
}
});
//]]>
</script>
<style><!--
/* 目次のデザイン */
#toc:before{
content:"目次";/*目次のタイトル*/
padding-left:1em;
font-weight:800;
}
#toc{
background-color:#f6f6f6; /*目次の背景色*/
padding:1em;
display:block;
margin:1em 0;
border:1px solid #ebe5e5;/*目次の枠線*/
}
#toc li{list-style:none; margin-bottom:0.2em;}
#toc ul{margin-bottom:0;}
#toc:before{display:block;text-align:center;}
.chapter-no{position: relative;top:-4.5em;
}
--></style>挿入の仕方
Bloggerの各ブログ管理画面＞テンプレート＞HTMLの編集に進んで下さい。command＋Fで右上に検索窓から</head>を検索します。
</head>の直前に上記ソースを挿入します。
本文記事への導入
HTML編集でブログ作成時、記事内の目次を表示させたい箇所に下記を挿入するだけです。
<div id="toc"></div>
小見出しや準見出しからブログ記事作成すると表示されません。
<div id="toc"></div>
注意点
必ず見出しを冒頭に立てる様にして下さい。小見出しや準見出しからブログ記事作成すると表示されません。
