ブログは読者が読みやすいものにする事が大事です。目次が有れば良いなと思ったことは有りませんか。
Bloggerに目次を付けたい人は簡単に導入できるので是非やってみてください。
『目次と文字の関係』
参考にさせて頂いたサイト ➡見出し
特に重要なカスタマイズ箇所 ➡小見出し
実際挿入するタグは下記になります。 ➡見出し
挿入のしかた ➡見出し
本文記事への導入 ➡見出し
注意点 ➡小見出し
挿入のしかた ➡見出し
本文記事への導入 ➡見出し
注意点 ➡小見出し
Bloggerに目次を見出しと連動させて自動生成する方法の手順解説です。
参考にさせて頂いたサイト
特に重要なカスタマイズ箇所
実際挿入するタグは下記になります
<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の編集」に進んで下さい。
ctrl＋F（command＋F）で検索窓が表示されます。その検索窓から</head>を検索し、 </head>の直前に上記ソースを挿入します。
ctrl＋F（command＋F）で検索窓が表示されます。その検索窓から</head>を検索し、 </head>の直前に上記ソースを挿入します。
挿入後HTML
本文記事への導入
HTML編集でブログ作成時、記事内の目次を表示させたい箇所に下記を挿入するだけです。
<div id="toc"></div>
注意点
必ず見出しを冒頭に立てる。
0 件のコメント:
コメントを投稿