この記事では、Bloggerで目次を自動生成する方法を、紹介します。
jQueryを使用しない方法を用いるため、サイトが重くならず軽快に表示されます。
特徴
- 見出しタグ(h2,h3,h4…)を自動的に検出して、目次を自動生成
- 目次の表示/非表示のリンクボタン付き
- 階層的にhタグ(h2,h3,h4)を組んで目次化が可能
- 段落番号を自動付与
- Google検索結果のスニペットに目次リンクを表示
プラグインの導入
Bloggerの、テーマ→カスタマイズ→HTMLを編集
を選択してください。
windowsなら「Ctrl + F」、Macなら「command＋F」を押すと、左上に、「search: 」とでるので、そこに「</head>」を入れて「Enter」を押します。
</head>の直前に下記ソースを挿入します。
<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<script>
//以下のオプションを好みに合わせて変更
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "top",
showToc: true,
width: "auto",
marginTop: "20px",
marginBottom: "20px",
indent: "20px",
postBodySelector: ".widget.Blog"
};
//これ以降のソースは編集しないでください
;(function (window) { var id_seq= 0; document.addEventListener('DOMContentLoaded', function () { var rootElement= document.querySelector(toc_options.postBodySelector); if (rootElement== null || typeof rootElement=== "undefined") { return;} if (toc_options.target.length== 0) return; rootContent= searchHeadLine(toc_options, rootElement); if (rootContent.children.length >= toc_options.condTargetCount) { var wrap= createElement(rootContent); appendElement(wrap);}}); function searchHeadLine(toc_options, rootElement) { var count= toc_options.target.length; var fn= function (index, element, parentContent) { var currentTarget= toc_options.target[index]; var nextTarget= index < count - 1 ? toc_options.target[index + 1] : ""; var id= "toc_headline_" + (++id_seq); var content= createItem(currentTarget, text(element), index + 1, id); parentContent.children.push(content); element.id= id; var el= next(element); if (nextTarget== "") { return;} var prevTarget= ""; for(var i= index; i >= 0; i--) { prevTarget += (toc_options.target[i] + ",");} while (true) { if (el== null || typeof el=== "undefined") break; if (tagName(el)== currentTarget) break; if (tagName(el)== nextTarget) { fn(index + 1, el, content);} else { var nextElements= el.querySelectorAll(prevTarget + nextTarget); var breakFlg= false; for (var i= 0; i < nextElements.length; i++) { if (tagName(nextElements[i]) != nextTarget) { exitFlg= true; break;} fn(index + 1, nextElements[i], content);} if (breakFlg) break;} var el= next(el);}}; var rootContent= createItem("ROOT", "", 0); var elements= rootElement.getElementsByTagName(toc_options.target[0]); for (var i= 0; i < elements.length; i++) { fn(0, elements[i], rootContent, "");} return rootContent;} function createElement(rootContent) { var wrap= document.createElement("div"); wrap.classList.add("b-toc-container"); wrap.style.marginTop= toc_options.marginTop; wrap.style.marginBottom= toc_options.marginTop; if (toc_options.width== "100%") { wrap.style.display= "block";} else { wrap.style.width= toc_options.width;} var p= document.createElement("p"); var span1= document.createElement("span"); var span2= document.createElement("span"); var span3= document.createElement("span"); span2.classList.add("b-toc-show-wrap"); span3.classList.add("b-toc-show-wrap"); var a= document.createElement("a"); span1.innerText= "目次"; span2.innerText= "["; span3.innerText= "]"; a.href= "javascript:void(0);"; p.appendChild(span1); p.appendChild(span2); p.appendChild(a); p.appendChild(span3); var toggleToc= function (state) { var s= typeof state=== "boolean" ? state : hasClass(wrap, "hide"); if (s) { a.innerText= "非表示"; wrap.classList.remove("hide");} else { a.innerText= "表示"; wrap.classList.add("hide");}}; a.addEventListener('click', toggleToc); toggleToc(toc_options.showToc); var ul= document.createElement("ul"); ul.classList.add("toc-root-list"); rootContent.children.forEach(function (content, index) { createContentItemElement(ul, content, (index + 1) + "");}); wrap.appendChild(p); wrap.appendChild(ul); return wrap;} function createContentItemElement(ul, content, no) { var li= document.createElement("li"); li.classList.add("toc-list-item"); var a= document.createElement("a"); li.style.paddingLeft= toc_options.indent; ul.style.paddingLeft= 0; a.href= "#" + content.id; smoothScroll(a); if (toc_options.autoNumber) { var spanNm= document.createElement("span"); spanNm.classList.add("toc-number"); spanNm.innerText= no + ".";} var spanText= document.createElement("span"); spanText.classList.add("toc-text"); spanText.innerText= content.text; if (toc_options.autoNumber) a.appendChild(spanNm); a.appendChild(spanText); li.appendChild(a); ul.appendChild(li); if (content.children.length > 0) { var childUl= document.createElement("ul"); childUl.classList.add("toc-sub-list"); li.appendChild(childUl); content.children.forEach(function (childContent, index) { createContentItemElement(childUl, childContent, no + "." + (index + 1));});}} function smoothScroll(a) { a.addEventListener('click', (e)=> { e.preventDefault(); let href= a.getAttribute('href'); let targetElement= document.getElementById(href.replace('#', '')); const rect= targetElement.getBoundingClientRect().top; const offset= window.pageYOffset; const target= rect + offset - 0; window.scrollTo({ top: target, behavior: 'smooth', });});} function appendElement(element) { var el= null; var rootElement= document.querySelector(toc_options.postBodySelector); if (toc_options.insertPosition== "firstHeadBefore" || toc_options.insertPosition== "firstHeadAfter") { el= rootElement.querySelector(toc_options.target[0]);} else if (toc_options.insertPosition== "top") { el= rootElement;} if (el== null) return; if (toc_options.insertPosition== "firstHeadBefore") { before(el, element);} else if (toc_options.insertPosition== "firstHeadAfter") { after(el, element);} else if (toc_options.insertPosition== "top") { before(el, element);}} function createItem(tagName, text, nestLevel, id) { return { tagName: tagName, text: text, children: [], nestLevel: nestLevel, id: id
};} function text(element) { return element.innerText;} function next(element) { return element.nextElementSibling;} function prev(element) { return element.previousElementSibling;} function tagName(element) { return element.tagName.toLowerCase();} function hasClass(element, className) { return element.classList.contains(className);} function parentElement(element) { return element.parentNode;} function after(element, insertElement) { var parent= parentElement(element); var nextEl= next(element); if (parent != null && nextEl != null) { parent.insertBefore(insertElement, nextEl);}} function before(element, insertElement) { var parent= parentElement(element); if (parent != null) { parent.insertBefore(insertElement, element);}} })(window);
</script>
<style type="text/css">
.b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>
</b:if>
<!-- [END] 目次作成プラグイン-->
コードを貼り付けたら、画面上の [テーマを保存] をクリックして、内容を保存します。
以上で、プラグインの導入は完了です。
オプションの設定方法
コピーしたコードに、toc_options = {…} と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更できます。
target
目次の作成。見出しタグを h1〜h6の 範囲で指定。
この機能とｈタグの関係は以下になります。
- 主見出し：ｈ１タグ
- 見出し ：ｈ２タグ
- 小見出し：ｈ３タグ
- 準見出し：ｈ４タグ
投稿記事内の章ごとの題名となる文字列にｈタグを設定し、あらかじめ文章を階層化することが必要です。難しいことをいってそうですが、目次にしたい文字列を選択して、下記の写真の丸で囲ったところを変更するだけで、Bloggerの目次を自動生成してくれます。
