先ずは記事に目次を付け、記事構成を分かりやすくし、読者を増やしましょう。
外部テンプレートの導入
使用中のテンプレートのバックアップを取る
ダッシュボードの「テーマ」をクリック ➡ 「バックアップ/復元」をクリック
更新する「外部テンプレート」を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編集でブログ作成時、記事内の目次を表示させたい箇所に下記を挿入するだけです。
<div id="toc"></div>
詳細記事
▲
【超簡単】Bloggerに目次を付ける方法
▲
0 件のコメント:
コメントを投稿