QooQで自動目次を挿入する場合のコードを別途記事でまとめておきます。CSS等はご自身で変更されてください。テーマの画面で、[カスタマイズ]
-> [HTMLの編集] をクリックし、HTMLを表示します
</head>の直前に、以下のコードを追加します。
古いコード
<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<script>
//以下のオプションを好みに合わせて変更して下さい
//オプションの詳しい説明は、https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.htmlを参照
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
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] 目次作成プラグイン-->
こちらを引用 .b-toc-container ul li aの中のalign-items:flex-start;をcenter;にするとjetthemeでの目次での数字と行のずれが無くなるかもしれません。.toc-list-item { display: flex; align-items: center; }も検討してください。
var toc_options = {
target: ["h2"], // h2 のみ対象
autoNumber: false, // 番号を振らない
}; オリジナルでこんな感じもありでしょう。
function m(p){return p.innerText}をfunction m(p){return p.innerText.replace(/\r?\n/g, '').trim()}に変えてあげると、見出しに含まれる余計な空白や改行を強制排除できます。
QooQ2026年コード
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: false,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
showToc: true,
width: "auto",
marginTop: "20px",
marginBottom: "20px",
indent: "0px",
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));});}}
/* ★ 最終確定版：履歴を1つに固定し、連打を防ぐ設定 */
function smoothScroll(a) {
a.addEventListener('click', (e)=> {
const href = a.getAttribute('href');
const targetElement = document.getElementById(href.replace('#', ''));
if (targetElement) {
e.preventDefault();
// すでに一度目次で飛んでいる（ハッシュがある）場合は、履歴を増やさず「上書き」
if (window.location.hash) {
history.replaceState({ top: window.pageYOffset }, null, href);
} else {
// 最初の一回目だけ、今の場所を保存して新しい履歴を一つ作る
history.replaceState({ top: window.pageYOffset }, null);
history.pushState({ isJump: true }, null, href);
}
const rect = targetElement.getBoundingClientRect().top;
const offset = window.pageYOffset;
window.scrollTo({ top: rect + offset, behavior: 'auto' });
}
});
}
/* 戻るボタンが押された時に、保存した目次の高さへ一瞬で戻す */
window.addEventListener('popstate', function (e) {
if (e.state && typeof e.state.top !== 'undefined') {
window.scrollTo({ top: e.state.top, behavior: 'auto' });
}
});
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.replace(/\r?\n/g, '').trim();}
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: none; border: 1px solid #aaa; padding: 10px; margin: 20px auto !important; width: auto; display: table; font-size: 95%; }
.b-toc-container p { text-align: center; margin: 10px 0 !important; padding: 0; font-weight: normal; }
.b-toc-container ul { list-style: none !important; margin: 0 !important; padding: 0 0 0 10px !important; }
.b-toc-container > ul > li.toc-list-item {
margin: 0;
padding: 10px 5px !important;
border-bottom: 1px solid #aaa;
}
.b-toc-container > ul > li.toc-list-item:last-child { border-bottom: none; }
.b-toc-container ul.toc-sub-list { padding-left: 1.2em; margin-top: 5px !important; }
.b-toc-container ul.toc-sub-list li.toc-list-item { border-bottom: none !important; padding: 4px 0 !important; }
.b-toc-container ul li a { text-decoration: none; color: #008db7; display: flex; align-items: flex-start; line-height: 1.5; }
.b-toc-container ul li a:hover .toc-text { text-decoration: underline; }
.b-toc-container.hide > ul { display: none; }
</style>
</b:if>
Jettheme2026年コード
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: false,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
showToc: true,
width: "auto",
marginTop: "20px",
marginBottom: "20px",
indent: "0px",
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));});}}
/* ★ JetTheme 最終攻略：スクロールアニメーションを一時停止して一瞬で飛ばす */
function smoothScroll(a) {
a.addEventListener('click', (e)=> {
const href = a.getAttribute('href');
const targetId = href.replace('#', '');
const targetElement = document.getElementById(targetId);
if (targetElement) {
e.preventDefault();
// 1. 履歴の制御（1回だけ戻るロジックを維持）
if (window.location.hash) {
history.replaceState({ top: window.pageYOffset }, null, href);
} else {
history.replaceState({ top: window.pageYOffset }, null);
history.pushState({ isJump: true }, null, href);
}
// 2. ★ 最終手段：html要素のスクロール挙動を「一瞬だけ」強制 auto に変える
const htmlEl = document.documentElement;
const originalStyle = htmlEl.style.scrollBehavior;
htmlEl.style.scrollBehavior = 'auto'; // アニメーションを殺す
const rect = targetElement.getBoundingClientRect().top;
const offset = window.pageYOffset;
window.scrollTo(0, rect + offset); // ジャンプ！
// 3. 0.05秒後に元の設定に戻す（「上に戻る」などの邪魔をしないため）
setTimeout(function() {
htmlEl.style.scrollBehavior = originalStyle;
}, 50);
}
});
}
/* 戻るボタンの時も同様にアニメーションを封じて戻す */
window.addEventListener('popstate', function (e) {
if (e.state && typeof e.state.top !== 'undefined') {
const htmlEl = document.documentElement;
const originalStyle = htmlEl.style.scrollBehavior;
htmlEl.style.scrollBehavior = 'auto';
window.scrollTo(0, e.state.top);
setTimeout(function() {
htmlEl.style.scrollBehavior = originalStyle;
}, 50);
}
});
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.replace(/\r?\n/g, '').trim();}
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: none; border: 1px solid #aaa; padding: 10px; margin: 20px auto !important; width: auto; display: table; font-size: 95%; }
.b-toc-container p { text-align: center; margin: 10px 0 !important; padding: 0; font-weight: normal; }
.b-toc-container ul { list-style: none !important; margin: 0 !important; padding: 0 0 0 10px !important; }
.b-toc-container > ul > li.toc-list-item {
margin: 0;
padding: 10px 5px !important;
border-bottom: 1px solid #aaa;
}
.b-toc-container > ul > li.toc-list-item:last-child { border-bottom: none; }
.b-toc-container ul.toc-sub-list { padding-left: 1.2em; margin-top: 5px !important; }
.b-toc-container ul.toc-sub-list li.toc-list-item { border-bottom: none !important; padding: 4px 0 !important; }
.b-toc-container ul li a { text-decoration: none; display: flex; align-items: flex-start; line-height: 1.5; }
.b-toc-container ul li a:hover .toc-text { text-decoration: underline; }
.b-toc-container.hide > ul { display: none; }
</style>
</b:if>
0 件のコメント:
コメントを投稿