この記事では、Bloggerで目次を自動生成する方法を、紹介します。
Bloggerは、無料なのに「広告表示なし」「カスタムドメイン可」「アドセンスも可」など、非常に素晴らしいブログサービスです。
しかし、WordPressの様に、プラグインをインストール出来ない為、Bloggerで用意されている標準ウェジットの機能だけでは機能不足を感じる事があります。
その内の一つに、Bloggerには目次を自動生成する機能がありません。
※ WordPressの場合、Table of Contents Plus (TOC+)
というプラグインをインストールすれば、目次が自動生成できます。
今回、Bloggerで目次を自動生成するブラグインを作成しました。
このプラグインを導入する事で、WordPressの「TOC+」プラグインの様に、簡単に目次を自動生成させる事が出来る様になります。
実際、この記事でも下 ↓に表示されている目次は、今回紹介するプラグインで自動生成させています。
スポンサーリンク
特徴
- 見出しタグ(h2,h3,h4…)を自動的に検出して、目次を自動生成
- jQuery不使用 (プレーンな JavaScirpt)
- 目次の表示/非表示のリンクボタン付き
- 階層的にヘッダタグ(h2,h3,h4)を組んでも目次化が可能
- 軽量で圧縮された CSS, JavaScript
- オプションで目次の表示内容が制御可能
- 段落番号を自動付与
- Google検索結果のスニペットに目次リンクを表示
プラグインの導入
テーマをバックアップ
念の為、現在のテーマをバックアップしましょう。
バックアップの方法は以下の通りです。
- Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
- [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます
HTMLを編集
- テーマの画面で、[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(i){var j=0;document.addEventListener("DOMContentLoaded",function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p==="undefined"){return}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length>=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E<u-1?q.target[E+1]:"";var y="toc_headline_"+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==""){return}while(true){if(A==null||typeof A==="undefined"){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C<B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g("ROOT","",0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s<v.length;s++){t(0,v[s],r,"")}return r}function c(s){var r=document.createElement("div");r.classList.add("b-toc-container");r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginTop;if(toc_options.width=="100%"){r.style.display="block"}else{r.style.width=toc_options.width}var q=document.createElement("p");var w=document.createElement("span");var v=document.createElement("span");var u=document.createElement("span");v.classList.add("b-toc-show-wrap");u.classList.add("b-toc-show-wrap");var y=document.createElement("a");w.innerText="目次";v.innerText="[";u.innerText="]";y.href="javascript:void(0);";q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z==="boolean"?z:e(r,"hide");if(p){y.innerText="非表示";r.classList.remove("hide")}else{y.innerText="表示";r.classList.add("hide")}};y.addEventListener("click",t);t(toc_options.showToc);var x=document.createElement("ul");x.classList.add("toc-root-list");s.children.forEach(function(z,p){n(x,z,(p+1)+"")});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement("li");p.classList.add("toc-list-item");var q=document.createElement("a");p.style.paddingLeft=toc_options.indent;s.style.paddingLeft=0;q.href="#"+u.id;if(toc_options.autoNumber){var t=document.createElement("span");t.classList.add("toc-number");t.innerText=w+"."}var v=document.createElement("span");v.classList.add("toc-text");v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length>0){var r=document.createElement("ul");r.classList.add("toc-sub-list");p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+"."+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition=="firstHeadBefore"||toc_options.insertPosition=="firstHeadAfter"){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition=="top"){r=p}}if(r==null){return}if(toc_options.insertPosition=="firstHeadBefore"){k(r,q)}else{if(toc_options.insertPosition=="firstHeadAfter"){a(r,q)}else{if(toc_options.insertPosition=="top"){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&&p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(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] 目次作成プラグイン-->
- コードを貼り付けたら、画面上の [テーマを保存] をクリックして、内容を保存します。
以上で、プラグインの導入は完了です。
保存が終わったら、自分のブログを見て下さい。
↓のようなイメージで、目次が表示されていると思います。
オプション
今回紹介した、目次自動生成プラグインは、WordPressの「TOC+ 」同様、オプションで、目次の表示条件を制御する事ができます。
ここでは、オプションの設定方法と、各オプションの説明を行います。
オプションの設定方法
コピーしたコードに、toc_options = {…}
と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更します。
オプションの設定内容は、後述する「各オプションの説明」を参照して下さい。
//以下のオプションを好みに合わせて変更して下さい
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"
};
各オプションの説明
target
目次を作成する、見出しタグを h1〜h6の 範囲で指定します。
autoNumber
目次に、自動的に連番を付けるか指定します。
true を指定した場合、1 → 1.1 → 1.1.1の順に、階層化された連番を自動的に付与します。
false 連番を表示しません。
condTargetCount
目次を表示する、見出の数を指定します。
例えば 2
を指定した場合、target
オプションで指定した、トップレベルの見出しが、2つ以上あるとき、目次が表示されます。
insertPosition
目次の表示位置を、以下の3つから指定します。
値 | 目次の表示位置 |
---|---|
firstHeadBefore | 最初の見出しの前 |
firstHeadAfter | 最初の見出しの後 |
top | 記事の最上部 |
showToc
初期の目次表示状態を指定します。
true を指定した場合、初期状態で目次を表示します。
false を指定した場合、目次は閉じた状態になります。
width
目次の横幅を指定します。
auto 目次の文字数に合わせて、横幅を自動調節
○○% 横幅をパーセンテージで指定 (100%で横幅一杯に目次を表示)
○○px 横幅をピクセル単位で指定
marginTop
目次上部の余白を指定します。
marginBottom
目次下部の余白を指定します。
indent
目次のインデント幅を指定します。
※以前コメントで、インデントを設定したいと要望貰った為、オプションを追加してみました。
postBodySelector
※ このオプションはCSSセレクタやJavaScriptに詳しい方だけが、変更する事をお勧めします。
目次の作成範囲となる、記事本文のタグをCSSセレクタで指定します。
記事本文以外に、見出しタグ(h2〜h4)が使われている場合、このオプションを設定する事で、記事本文内にある見出しタグだけで、目次を作成できます。
目次のデザインを変更する
直接CSSを編集すれば、デザインを変更する事ができますが、コピペで簡単に使えるデザインを、いくつか用意しました。
使い方は、<style type="text/css">…</style>
となっている部分を、各デザインのCSSに置き換えて下さい。
鮮やかなドット枠の目次
CSS
<style type="text/css">
.b-toc-container{background:#f1f8ff;border:dashed 2px #668ad8;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:#668ad8!important;font-weight:700;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>
上下のみボーダーの目次
<style type="text/css">
.b-toc-container{border-top:solid #1e366a 1px;border-bottom:solid #1e366a 1px;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;font-weight:700;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:#1e366a!important;font-weight:700;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>
スティチ風の目次
<style type="text/css">
.b-toc-container{padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%;background:#58be89;line-height:1.3em;border:2px dashed #fff;border-radius:10px;box-shadow:0 0 0 4px #58be89,2px 1px 6px 4px rgba(10,10,0,.5);text-shadow:-1px -1px #238452}.b-toc-container p{text-align:center;font-weight:400;color:#fff;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:#fff!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>
付箋風な目次
<style type="text/css">
.b-toc-container{padding:0;margin-bottom:1em;width:auto;display:table;font-size:95%;position:relative;border:1px solid #333;background:#333}.b-toc-container p{position:absolute;top:46%;left:5px;text-align:center;margin:0;padding:0;width:1rem;color:#fff}.b-toc-container p .b-toc-show-wrap,.b-toc-container p a{display:none}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:0 0 0 1.5rem;padding:10px;border-left:1px solid #333;background:#fff}.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:#1e366a!important;font-weight:700;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>
最後に
自分の周りでも、WordPress を使っている人が多いですが、今回のような便利なプラグインで、Blogger を使う人が、1人でも増えれくれると、嬉しいです。
Blogger でこんな機能も欲しいよーー! という方がいれば、コメント欄で教えてください。
関連記事
■ BloggerのHTMLを徹底紹介!テーマをフルカスタマイズしてオリジナルブログを作る!)
Blogger のテーマを自分好みにフルカスタマイズしたい人に、オススメの記事です。
テーマの編集方法、Blogger 固有タグの紹介、簡単なデザインのサンプルを、紹介していきます。
■ Bloggerで「このブログの自分のビューを追跡しない」が効かない(チェックが外れる)時の対処方法)
Bloggerで、 [このブログの自分のビューを追跡しない]をチェックにしたにも関わらず、自分のアクセスがカウントされていたので、その問題の解決方法です。
最後に
自分の周りでも、WordPress を使っている人が多いですが、今回のような便利なプラグインで、Blogger を使う人が、1人でも増えれくれると、嬉しいです。
Blogger でこんな機能も欲しいよーー! という方がいれば、コメント欄で教えてください。
(追記)
Bloggerで、「アドセンス広告を記事中の好きな場所に挿入するスクリプト」という物を最近作りました。
こちにで使い方等について紹介していますので、よかったら見ていって下さい。
(2020/05/18 追記)
目次のテキストを折り返し位置が、自動連番の左位置とかぶっていたため、かぶらないように修正しました。
もし良かったら、この記事をリンクと共に紹介してくれると嬉しいです。
はじめまして。
返信削除目次表示に使わせていただいてます。ありがとうございます。
字下げを一文字少なくしたいのですが、どこを変更すれば良いか教えていただけないでしょうか。
よろしくお願いいたします。
使って頂き、ありがとうございます。
削除字下げですが、CSSを以下の通り変更すれば、対応が可能だと思います。
まず、"<style type="text/css">....</style>"の間に書いてあるCSSを見てもらうと、以下の記述が行われている箇所があります。
.b-toc-container ul li{margin:0;padding:0 0 0 20px}
この"20px"となっている部分を、"10px"程度にしてもらえれば、1字少なくなると思います。
教えていただいた値を小さくすることで左に詰めることができ、見やすくなりました。
削除ありがとうございました。
このコメントは投稿者によって削除されました。
返信削除はじめまして。
返信削除大変便利な機能をご紹介いただきありがとうございます。
細かいことですが、目次のテキストの前に「・>」というマークが付与されますが、これを削除する場合、どこを変更すると良いでしょうか。
なお、該当のページは以下となります。
https://katakuna-blog-realestate.blogspot.com/2018/12/vs.html
プラグインを使って頂き、ありがとうございます。
削除「頑 ーKATAKUNAー」さんのサイトを見させて貰った所、
使用しているBloggerテーマのCSSと、この目次プラグインで使っている
CSSが競合しており、「・>」のような表示がされていました。
具体的には、以下の部分が競合してました。
ul li { list-style-type: disc; }
ul li:before { content: "\f105"; }
競合しないように、プラグインのCSSを見直しました。
もう一度、手順の通りコードを貼り付けし直して貰えれば、
「・>」が消えると思います。
ありがとうございます!
削除目次がキレイに収まりまって見やすくなりました。
WordPressじゃなくてもここまでできるということを見せられるブログにしたかったので、心から感謝致します。
いつか記事数もそれなりになった時に、こちらのサイトを紹介したいと思います。
お役に立てて良かったです。
削除いつでもいいので、紹介して頂けると嬉しいです!
このコメントは投稿者によって削除されました。
返信削除はじめまして!!
返信削除当初は「jQueryを使わないで、本当に動くの??」と思っていたのですが、動くどころの話ではなく、jQueryを利用したものよりも遥かに軽快に表示されたので驚いてしまいました。
この目次挿入スクリプトは、多くのBloggerユーザーに多大な利便性をもたらすと思います。
ありがとうございました!!
お褒めの言葉、ありがとうございます。
削除お役に立てて嬉しいです。
はじめまして!
返信削除とても便利な目次機能のシェアありがとうございます!
コードをお借りいたします。
Bloggerの情報は貴重なのでとても助かります(;´∀`)
使って頂き有難うございます!!
削除お役に立てて嬉しいです!!!
始めまして。目次機能の追加方法をよび解説をしてくださりありがとうございます。
返信削除私の使っているテーマ(SORA TASTY)では、目次機能のコードを追加すると最後の2つに空欄の目次が追加されてしまいます。空欄をクリックするとコメント欄の部分にジャンプします(SORA TASTYはSEOを強化したテーマらしく、おそらく、SEOの関係で最後のコメント欄の部分がH2と認識されるようになっているのではないかと考えております。)
目次機能を表示させたい時、最後の2つを表示させない、またはcondTargetCountで2つ以上の時目次を表示させると指定しているように、5つ以下の数までなら目次を表示させるといったような目次数の制限をすることは可能でしょうか?もし、そういったことが可能でしたら教えて頂けないでしょうか。
目次作成機能を使って頂き、ありがとうございます。
削除pikyさんのブロクを確認させて頂きました。
確かにコメント欄に"h2"にタグが使用されており、それにより空欄の目次が追加されていました。
対策として今回、目次作成に"postPodySelector"というオプションを追加しました。
pikyさんの場合は、このオプションに、".post-body"と指定して貰えれば、コメント欄を除いた記事本文のh2タグだけで、目次が作成出来ると思います。
上のオプションを追加した形で、記事の内容およびコードを更新していますので、再度テーマのHTMLを貼り付け直してみて貰えませんか。
てらさとさん、ありがとうございます!
削除テーマに貼り付け直したところ、無事に本文の目次のみ表示させることができました。本文だけ表示させるという方法があるんですね!魔法のようでした。
blogger始めたばかり&パソコンのこと詳しくないので困っておりましたが、とても助かりました。ありがとうございます!
はじめまして。目次作成コードの公開ありがとうございます。この機能を探していました。手作業で作成していた目次が自動作成になり大変たすかります。
返信削除目次作成機能を使っていただき、ありがとうございます。
削除お役に立てたようで、とても嬉しいです。
初めまして!
返信削除Bloggerで目次機能を探していてドンピシャでこちらの記事にたどり着きました。
貴重な情報ありがとうございます。
早速使わせてもらっています!
最近テンプレートを変えて、目次が不満点だったのですが解消できました。
前の目次がh3タグしか表示しておらず、今日1日、階層化を全てやり直した後に見つけました。。今日作業やる前に見てれば・・・
一点質問があります。
1. h2
1.1 h3
h4
と現状なっておりますが、h4タグにも数字を採番する事は可能でしょうか?
1. h2
1.1 h3
1.1.1 h4
以上、よろしくお願い致します。
目次機能を使って頂き、ありがとうございます。
削除お役に立てているようで嬉しいです。
h4が採番されない件についてですが、単純にバグってました。
(私がh4タグを使わない為、気づいてませんでした...)
h4も採番するように、記事で紹介しているコードを修正しました。
再度貼り付け直して貰えれば、大丈夫だと思います。
宜しくお願いします。
早速のご対応ありがとうございます!
削除立て続けの質問で大変恐縮ですが、、、
自分のページに適用して数ページ、インデックスが正しく取得されないケースがありますが、原因わかりますでしょうか?
例えば、下記のページが該当します。
https://www.lehman-miler.com/2018/12/flow.html
https://www.lehman-miler.com/2018/03/thipsamai.html
https://www.lehman-miler.com/2018/11/avani-riverside.html
もう少し、自分でもうまくいっている場合と言っていない場合の傾向を探したいと思います。
原因を確認してみましたが、私のブログページ側の<div>タグのずれによるものかもしれません。該当ページのインデックスが表示されていない部分で</div>が2つ続いている個所を見つけて、そのうちの一つの</div>を最後に持ってくると無事に表示されるようになりました。
削除となると、該当ページを見つけて地道に直していくしかないですかね。。。
なるほど、それが原因だったのですね。
削除タグがずれがあると、JavaScriptで h2,h3,h4などの見出しタグが認識できない為、こればっかりは、地道に直してもらうしかないですね。。。
返信ありがとうございます。400記事以上をチェックして修正しましたw
削除divタグが結構ずれているものもあって、手こずりましたが、無事に修正できました。
これから目次を活用されていただきます。
ありがとうございました!
初めまして!
返信削除Bloggerで目次機能を使いたく、その方法を探していたのですが、記事ごとに編集しなくても自動生成してくれるなんて、素晴らしいものを本当にありがとうございます!
現在「鮮やかなドット枠の目次」のデザインを利用させていただいているのですが、「上下のみボーダーの目次」も試したいと考えております。
ちなみに当記事中に「上下のみボーダーの目次」コードの記載がないのですが、追加していただくことは可能でしょうか。
自動生成だけでも大変ありがたいのに、わがままなお願いで恐縮ですが、ご検討よろしくお願いいたします。
目次機能を使って頂き、ありがとうございます。
削除すいません、「上下のみボーダーの目次」のCSSコードを貼り忘れておりました (--)
コードを記載しましたので、確認をお願いいたします。
早速のご対応、ありがとうございます!!
削除「上下のみボーダーの目次」へ変更したところ、私のブログではこちらのほうがしっくりきましたので、使わせていただきます。
目次自動生成のおかげで、私のブログの見出しがわかりづらいという欠点も見つかって、ほんと感謝感激です!
ありがとうございました!
初めまして!目次機能とてもありがたいです。
返信削除boggerで利用しています。目次の順番がバラバラなので相談です。
見出し2と3を使っています。
通常なら
1
2
3
3.1
3.2
4
となるはずのところが
1
2
3.1
3.2
4.1
4.2
3
4
という目次になってしまいます。
現在は下層を表示させないで対処していますが
長文記事だと、やはり不便です。
なにか解決方法はありますでしょうか・
目次機能を使って頂き、ありがとうございます。
削除Aliceさんのブログを確認させてもらいました。
HTMLのソース見たところ、以下のように3つ目の<H2>タグだけ、他のタグより下の階層に存在していました。
---------------------------------
<H2>大見出し</ H2>
<H2>大見出し</ H2>
< DIV >
<H2>大見出し</ H2>
</DIV>
<H3>中見出し</H3>
・・・
---------------------------------
この目次作成機能は、同じ種類の見出しタグは、同レベルのタグ階層にいることを前提にしているため、以下のようなるようHTMLを修正してもらえれば、うまくいくと思います。
---------------------------------
<H2>大見出し</ H2>
<H2>大見出し</ H2>
<H2>大見出し</ H2>
<H2>大見出し</ H2>
・・・
---------------------------------
こんにちは!
削除目次機能僕も使わさせていただいています!
僕も同じ現象が起きました。
すべての記事ではなく数記事だけです。
HTMLに特別手を加えるということはしていないのですがどうしたら直るでしょうか。
お時間があるときに返信いただければ幸いです。
目次に異常が起きた記事は↓です
https://kureyondesu.blogspot.com/2020/12/blog-post_18.html
https://kureyondesu.blogspot.com/2020/12/4.html
目次機能を使っていただきありがとうございます。
削除サイトを見させて頂きました。
以下のように、見出しタグの階層レベルがズレており、うまく目次が自動生成できていませんでした。
< DIV >
<H3>楽しみながらキレイになる【Bodies】</ H3>
<H4>特徴</H4>
</DIV>
< DIV >
<H4>おすすめの人</H4>
</DIV>
以下のように、HTMLを修正できると正しく目次が出るとおもわれますが、試していただけますでしょうか?
< DIV >
<H3>楽しみながらキレイになる【Bodies】</ H3>
<H4>特徴</H4>
<H4>おすすめの人</H4>
</DIV>
こんにちは
返信削除初心者にも簡単に使える目次をありがとうございます
ちなみに こちらはセンタリングできませんか?
目次機能を使って頂き、ありがとうございます。
削除「あいうえおにぎり」さんのブログを確認させてもらいました。
目次の文字を中央寄せにしたいと言う事であれば、以下2点の設定を行えば、うまく行くと思います。
1. 目次機能のCSSに以下のものにする
.b-toc-container{border-top:solid #1e366a 1px;border-bottom:solid #1e366a 1px;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;font-weight:700;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0;text-align:center}.b-toc-container>ul{margin:0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0;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:#1e366a!important;font-weight:700}.b-toc-container ul li .toc-number{margin:0 .5em 0 0}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
2. オプションのインデントを "0px"にする
目次機能の設定を行う Javascriptの部分があると思いますが、そこの「indent」オプションに"0px"を設定する
var toc_options = {
indent: "0px"
}
お返事ありがとうございます
削除試してみたのですが
目次内の文字ではなく目次自体をブログ記事の真ん中にする方法はありませんか?
はじめまして。
返信削除目次、ずっと使ってみたいと思っていました!
超初心者なので、分かりやすく、簡単に使えるものをありがとうございます。
あいうえおにぎりさん同様、ブログの記事の中で目次を使えるようにすることは可能でしょうか?
記事の枠外に目次が表示されてしまいます。
また、見出しの使い方が分かっておらず、以前の記事の設定がバラバラなのですが、希望する記事のみへの反映は可能ですか?
お手数ですが、教えていただけたら幸いです。
目次機能を使って頂きありがとうございます。
削除Paoさんのブログを見させてもらいました。
まず、記事の枠外に目次が表示される件ですが、
目次のオプションを以下のように設定してもらえれば、
記事の中のタイトル直下に目次が出ると思います。
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 .post-body"
};
次に、特定の記事のみに目次を表示する件については、
現状のその機能はありません。(全記事が目次の表示対象)
Paoさんのおっしゃる通り、
目次を出す/出さないを選べる機能があった方いいと思いますので、
先の話にはなりますが、実装を検討してみます。
迅速で丁寧な対応ありがとうございました。
削除これを機に、ブログの書き方も変えていきたいと思います。
はじめまして。
削除大変便利な目次機能、本日より使わせていただいてます。
さて、目次を出す/出さない、の件ですけど、当方では記事のHTMLに以下のスタイルコードを追記することで出したくない記事で非表示にしています。ご参考まで。
<style>.b-toc-container{display:none!important}</style>
ただ、やはり選択機能があれば便利だと思いますので、実装されるのを楽しみにしております。
はじめまして、ご紹介いただきありがとうございます。
返信削除日付も目次に反映されてしまうのですが、対処法はございますか?
目次機能を使って頂き、ありがとうございます。
削除i.mさんのブログを見させてもらいました。
HTMLを見る限り、オプションの「postBodySelector」を
以下のように設定すれば、日付を除いた目次ができると思います。
postBodySelector: ".widget.Blog .post-body"
一度、試してみて貰えますでしょうか。
ご回答いただきありがとうございます。
削除無事、日付を除いた目次ができました!
目次機能作っていただきありがとうございます。
返信削除毎回自分で記事のHTML 編集するのめんどくさいなと思っていたので、大変助かります。
そこで一つ質問があるのですが、
目次を冒頭文のあとに持ってくることは可能でしょうか?
私の場合は、記事の題のすぐ下に来てしまい、アイキャッチ画像や序文の上に来てしまっている状態です。
(このページのような感じです。https://morimafood.blogspot.com/2019/07/1.html)
私がイメージしているのは、まさにこの記事の冒頭のような感じで、
1.アイキャッチ画像
2.序文
3.目次
4.本文
のような感じにしたいです。
このようにも目次をアイキャッチ画像と序文の後に自動的にすることは可能でしょうか?
お手数をおかけしますがよろしくお願い致します。
目次機能を使って頂きありがとうございます。
削除目次を序文の後(最初の見出しの前)に挿入するには、目次のオプションのinsertPositionを以下の通り設定すれば、行けると思います。
insertPosition: "firstHeadBefore"
一度、ご確認いただけますか?
ご返事いただきありがとうございます。
削除質問させていただく前は出来なかったのに、今試すとできました。笑
大変お手数をおかけいたしました。
有難うございました。大変助かりました。
はじめまして、すごく素敵なものを使わせて頂いております。
返信削除Bloggerは、Googleで保存している写真が簡単にUpできるので、好きですが、
もっと好きになるには、目次とかあればいいのに、と思っていたところなので、
すごく便利に使っています。ありがとう御座います。
ところで、モバイル画面の方も同じように表示させることはできるのでしょうか?
お教えいただければ、嬉しいです。
よろしくお願いいたします。
目次機能を使っていただき、ありがとうございます。
削除質問の件ですが、おそらくモバイル独自のテンプレートが有効になっている為、スマホ等でアクセスした時に、目次のスクリプトが動いてないと思います。
モバイルでもPC用のテンプレートを使うように、設定を変えれば、おそらくうまく行くと思います。手順は、以下のサイトが参考になると思います。
http://toumaswitch.com/blogger-responsive/
一度、試してみてください。
ありがとうございます。
削除参考のサイトをもとに対応してみます。
本当に、ありがとうございました。
やってみたところ、はじめはうまく出来なかったのですが、
削除テーマの初期化を行って、再インストールをしたら、きちんと表示される様になりました。
ありがとうございました。
感謝です。
きれいなサイトができあがり、本当に嬉です。
ありがとうございました
このコメントは投稿者によって削除されました。
返信削除このコメントは投稿者によって削除されました。
返信削除目次機能を使って頂きありがとうございます。
削除てら です。
URLの記事を確認しましたが、一見すると正しく目次が表示されているようですが、どの部分がおかしいのでしょうか?
何度もお手数をかけてすみません。
返信削除目次の一番下に、
この記事の関連記事
と、出てしまいます。
タグ付けしていないのですが、
レイアウトとか、
設定で
修正することは出来る野でしょうか?
よろしくお願いいたします。
目次機能を使って頂きありがとうございます。
削除問題となっている箇所を確認したいため、宜しかったらURLを教えて頂けますでしょうか?
よろしくお願いいたします。
このコメントは投稿者によって削除されました。
返信削除はじめまして。いろいろ目次を生成するプラグインを探してこちらへ辿り着きました。ありがたく使わせて頂いております。
返信削除事後報告になりますがその顛末と目次幅を拡げるカスタマイズを施したので一部オプション部分のコードをカスタマイズした数値で転載させていただきました。何卒宜しくお願い致します。(もし問題ありましたらご連絡お願い致します。)
該当エントリ
https://tonbori.blogspot.com/2019/09/blog-post.html
ブログ初心者ですが、簡単に目次を作ることができました!
返信削除ありがとうございます。
ところで、インデント幅を狭くしたいのですが、数字を変えても反映されない場合、
どのような問題が考えられますでしょうか?
それと、h4の見出しが目次に反映されない点についてもお聞きしたいです。
該当のページは以下になります。
https://mocomaru.blogspot.com/2019/11/cosmedays.html
初心者の質問のため的外れでしたらご容赦ください。
お手数をおかけしますが、よろしくお願いします。
返信遅れてすいません。
削除目次機能を使って頂きありがとうございます。
インデント幅を狭くする件について、コードを修正しましたので、もう一度貼り直しをして頂けますでしょうか?(貼り直せばインデント幅が狭くなると思います)
h4の見出しが目次に反映されない件は、以下のように一部のH3タグが、DIVタグの中に入り込んでいるのを....
---------------------------------
<H3>中見出し</ H3>
< DIV >
<H3>重要!最大36%ポイントバックについて</ H3>
</DIV>
< DIV >
<H4>今からでも間に合う!PayPayの設定</ H2>
</DIV>
・・・
---------------------------------
次のように修正してもらえれば、うまくH4タグの目次も表示されると思います。
---------------------------------
<H3>中見出し</ H3>
<H3>重要!最大36%ポイントバックについて</ H3>
< DIV >
<H4>今からでも間に合う!PayPayの設定</ H2>
</DIV>
・・・
---------------------------------
お忙しいところ、ご回答ありがとうございます!
返信削除おかげさまで解決できました。
とても助かりました!
はじめまして、blogger初心者です!貴方様の自動目次作成を参考し作業を行ったのですが、うまく自動反映されません。何か解決策をご指導願えれば幸いです
返信削除こんにちは。
返信削除目次機能、活用させていただいてます。
質問なのですが、
現在↓
1. まず初めにし
たこと
2.次に行った対
策
3.結論
のように、かなり見えづらくなってしまっています。
それを、
1. まず初めにし
たこと
2.次に行った対
策
3.結論
のように出来ないでしょうか。
お教えいただければ幸いです。
目次機能を使っていただき、ありがとうございます。
削除確かに折り返すと見えづらくなっていますね。
ご指摘の通り、コードを修正しましたので、もう一度、貼り直して確認してもらえませんか?
よろしくお願いします。
初めまして。
返信削除blog初心者です。目次の表示方法を探していたところ
こちらのページにたどり着き、早速目次機能を活用しようと設定しましたが
うまく動作しません。
わからないなりにhtmlを触っているうちにおかしくなっているのかもしれません。
原因わかりますでしょうか?
該当のページは下記になります。
https://ayrcs.blogspot.com/
よろしくお願いします。
本日いろいろ試してみました。
返信削除新しいテンプレート(QooQ)をダウンロードし
トライブログ作成し再度やってみましたが
うまく動作しません。
気づいたことがあります。
コードをコピペし保存完了時は変化ありませんが
ブログに戻り再度HTML編集画面へ行くと
"→"へ変更されております。(おそらく張り付けたもの全て)
挿入場所へのコピペで挿入するだけでは
だめなんでしょうか?
やり方間違ってますでしょうか?
よろしくお願いします。
html編集画面の左の方にある▶をクリックしてみてください。
削除全て表示されるはずです。
コメント欄に投稿させて頂いた文章も表示が変わってしまい
削除うまく説明できていませんでした。すみません。
▶に表示が隠れて見えないわけでなく、書き込んだコードの部分は
表示されてましたが、
ダブルクウォーテーションが記号ではなく
アルファベットの標記になっておりました。
下記のページ見て頂けると助かります。
https://blog-trial-diary.blogspot.com/2020/05/Automatic-table-of-contents-generation-trouble.html
先ほど ふじやん。さんにご指摘頂いた箇所修正し表示することができました。
削除私のブログの設定方法の問題でした。
お手数おかけしました。
また、あいうえお さんも調べて何度もコメント頂き有難うございました。
スケ郎さま、たいへん分かりやすい記事です。参考にさせてください。うまく実装できるか自信はありません。見出しタグを気にせず文書を書いてましたので、目次をイメージして記事を書こうと思います。
返信削除再度コメント失礼します。
返信削除今分かったのですが、
▼レイアウト▼
本文
h2 AAA
本文
h2 BBB
h3 CCC
本文
h3 DDD
本文
h3 EEE
本文
h2 FFF
本文
のようになっていると、
▼目次▼
1. h2 AAA
1.1. h3 CCC
1.2. h3 DDD
1.3. h3 EEE
2. h2 BBB
1.1. h3 CCC
1.2. h3 DDD
1.3. h3 EEE
3.h2 FFF
というように、C,D,Eのh3見出しが2つ存在します。
どう修正すれば良いでしょうか。
簡単に設置でき、機能も非常に高精度&便利で助かりました。素晴らしいプラグインをありがとうございます。
返信削除Bloggerでの目次の入れ方を検索して訪れました。
返信削除詳しいご説明がありすごく助かります。
参考にして設置させていただきます。ありがとうございます。
導入させていただきました。ありがとうございます。
返信削除2点バグ報告と1点要望を挙げさせていただきます。
バグ1:r.style.marginBottom=toc_options.marginTop; こちらの部分で参照してる設定数値がTopの方になって、重複しておりませんでしょうか。
バグ2:目次の飛ぼうとするIDとH2などのタグに付くIDが違ってませんでしょうか。
目次からはtoc_headline_xxというIDへ飛ぼうとするようになってるのですがIDに付くのはtoc_xxになっているようで相違があって飛べませんでした。(素人ながら、javascriptの方で_headlineを削ってIDを付けてもらうようにしたら飛べるようになりました)
要望1:サンプルの目次のように、数字の終わりに”.”を付けることはできませんでしょうか
現状”1 見出し”や”2.2 見出し”となってしまうのですが、”1. 見出し”や”2.2. 見出し”のようにするのは難しいでしょうか。
上記いずれも私の設定するテーマとの競合や、いじってしまったミスによる問題などでしたら申し訳ありませんがお聞き流しください…。
雨森 佐歩吉さん
削除目次プラグイン使って頂き、ありがとうございます。
バグ1:確かに指摘の通り間違っておりました。掲載しているスクリプトを修正しました。
バグ2:おそらく、雨森さんが使用している別のプラグイン等と競合していると思われます。
要望1:ご意見ありがとうございます。最後に「.」が付くように掲載しているスクリプトを修正しました。
話変わりますが、雨森さんのpixivのイラスト見させてもらいました。めちゃ好みです!!
スケ郎さま、あトん、と申します。
返信削除忙しい人向けの目次の提供ありがとうございます。
Bloggerで目次が利用でき助かりました。
あトんさん。
削除目次作成プラグイン使って頂きありがとうございます。
お役に立ててうれしいです。
大変便利な目次プラグインをありがとうございます。
返信削除早速ですが「小見出し」が2か所に表示されます。解決方法をご指導いただければありがたいです。
ブログ➡https://longstay-wine.blogspot.com/2020/06/chcos-destournel-1985.html
はじめまして、そのままコピーしてペーストしたのですが上手くいきません。
返信削除なぜでしょうか
テンプレートや記事のHTMLの作りなどによって表示されないこともあるようです。うまくいかない記事のURLを教えて頂ければ調べます。
削除ありがとうございます。
削除こちらです
https://akaoniwaban.blogspot.com/
はじめまして。プラグインの公開ありがとうございます。
返信削除まさにこんな目次が作りたいと思っていたところでしたので、さっそく使わせていただきました。
ただ、コードをコピーし、テンプレートに貼り付けしたのですが、目次が表示されません。
テンプレートを変更しても同様の状態でした。
テンプレートが悪いのか、挿入箇所が悪いのか、ご指導いただけないでしょうか。
https://yugyojiyu.blogspot.com/2021/03/202133.html