見出し目次を生成するTOCスクリプト

見出し目次を生成するTOCスクリプト

カスタマイズ
2019/02/06 32
vanillaice (Akira)
vanillaice (Akira)
HTML CSS VanillaJS 初心者向け Instruction

以前にもTOCの記事は書いていますが今回jQuery依存なしのvanilla JS(ネイティブJS, pure JS)のご紹介と説明で統一しようと思います。私が今後制作するテンプレートはよほどのことが無い限りjQueryを入れないと思います。それなのにjQueryで紹介というのはやはりマズいもので。

今回は以前書いた内容に加え、より詳細な説明をしたいと思います。特に難しいわけではないのですが、FC2ブログでの導入 に的を絞ると結構コツというか特徴を押さえておかないと上手くいきません。ついでに複数のCSSスタイリングも用意しました。

以降の内容で「TOCを記載, TOCを掲載」と出てきましたらそれは「見出し目次リストを書き出すhtmlの記載」であり、「TOCが記載」されている場所がイコール「見出し目次リストが表示される場所」だと思ってください。

FC2ブログでTOCを利用するには「追記」に記載

これは 絶対条件 と思ってください。これまで何度か 全文タイプテンプレートの難点 について記事を書いています。TOCスクリプトを利用するにも全文の一定条件下ではちょっと都合が悪いんですね。

TOCは記事内の見出しを抽出してリスト化するとともに、各見出しへの ページ内移動 も目的としています。TOCを本文に書いてしまうと結果的に全文を「本文」に書かざるを得なくなります。TOCが「本文」に、見出しが「追記」に、と別れているとトップページで表示されるTOCの内容と個別記事のTOCの内容が変わってしまいます。

えと。この理屈わかりますよね (´・ェ・`)
テンプレートの仕様にもよりますが、通常の全文タイプは「追記」をトップページに表示しません。あるいは敢えて「追記」をトップページにも表示してある場合のほとんどは初期設定 display: none でのクリック展開型になっていると思います。前者の「追記」が無い場合には「追記」内の見出しは抽出されず、後者の展開型は見出しが展開要素の中にあるとTOCのページ内移動が行き場を失ってしまいます。従って全部を「本文」に書かざるを得なくなる、という理屈です。

つまり TOCはトップページでは表示しない のが原則。トップに表示しないためには「追記」に記す、と。そゆこと。全文タイプテンプレートで「追記」を利用しない方や「追記」を展開型にしている方は実はSEO面でもいろいろと不利なんですYO (((ง'ω')و三 ง'ω')ڡ≡

加えてこれまで何度も記事にしているように、各記事の全内容がトップで表示されるとユーザビリティを損ないますのでおすすめできない。従って以下の内容に当てはまる方はご利用頂けません。

  • 全文タイプテンプレートを利用しており、「追記」を利用していない
  • 全文タイプテンプレートを利用しており「追記」も使っているが「本文」でも見出しを使っている

要約タイプテンプレートをご利用の方はTOCを「本文」に記載してもセーフではありますが、全文タイプに変更した時に泣くことになるか諦めることになりますのでやはり「追記」への掲載を絶対条件にした方が良いですね。

見出しは「追記」で利用する

TOCを「追記」に記載するのですから当然見出しは全て「追記」の中でなければいけません。仮にTOCよりも前に見出しが存在した場合には Cannot read property 'appendChild' of null というエラーでリストは生成できませんので注意(要素を追加する際に目印になる要素が先行取得出来ない時にこのエラーになります)
つまり TOCよりも前に見出しを使ってはいけない ということです。

場合によってはTOC不要で見出しを使いたい場合があるかと思います。その場合には「この見出しとこの見出しはTOCに」「この見出しはTOCに含めない」ではなく、ページ単位(記事単位)で「TOCを使うか使わないか」の両極の選択を行うようにしてください。TOCが要らない場合にはTOC書き出し用のhtmlを記載しない、TOCが要る時はhtmlを各見出しよりも先に書く。それだけです。

導入手順

ここからは実際の導入手順です。

【TOCスクリプト】

!function(e){"use strict";var t=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e},n=function(e,t){var n=[],r=document.querySelectorAll(t);return Array.prototype.forEach.call(r,function(t){var r=t.querySelectorAll(e);n=n.concat(Array.prototype.slice.call(r))}),n},r=function(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1},o=function(e,t){for(;t--;)e=e.appendChild(document.createElement("ol")),t&&(e=e.appendChild(document.createElement("li")));return e},c=function(e,t){for(;t--;)e=e.parentElement;return e},i=function(e,t){return function(n,r,o){var c=n.textContent,i=t+"-"+o;r.textContent=c;var a=e?i:n.id||i;a=encodeURIComponent(a),n.id=a,r.href="#"+a}},a=function(e){var t=e.selector,a=e.scope,u=document.createElement("ol"),l=u,f=null,d=i(e.overwrite,e.prefix);return n(t,a).reduce(function(e,t,n){var i=r(t.tagName),a=i-e;a>0&&(l=o(f,a)),a<0&&(l=c(l,2*-a)),l=l||u;var p=document.createElement("li"),m=document.createElement("a");return d(t,m,n),l.appendChild(p).appendChild(m),f=p,i},r(t)),u},u=function(e){var n={selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"chapter"};e=t(n,e);var r=e.selector;if("string"!=typeof r)throw new TypeError("selector must be a string");if(!r.match(/^(?:h[1-6],?\s*)+$/g))throw new TypeError("selector must contains only h1-6");var o=location.hash;return o&&setTimeout(function(){var e=document.getElementById(o.slice(1));e&&e.scrollIntoView()},0),a(e)};"function"==typeof define&&define.amd?define(function(){return u}):e.initTOC=u}(window);

TOC本体、リストを生成するためのJSです。async指定を推奨しますので、外部ファイル化を行いたい方はこれ以降の内容も含める必要があるため後述します。テンプレートhtmlへ直貼りする方は以下のような形で記載してください。
圧縮済なのでソース内に改行を含めないようにしてください。
自身の可読性のために適当に改行を入れてしまう方が多いのですが、改行にはルールがあります。詳細な説明は省きますがとりあえず今回は行わないようにしてください。

<!--permanent_area-->
<script>ここに上記内容をペースト</script>
<!--/permanent_area-->

テンプレート記載位置は </body> の直前でOKです。body開始タグではなくbody終了タグの方ですのでお間違いなく。

【デフォルト設定上書き用スクリプト】

var container = document.querySelector('#toc');
var toc = initTOC({
    selector: 'h2, h3, h4, h5, h6',
    scope: '#inner-contents',
    overwrite: true,
    prefix: 'chapter'
});
if(container) {
    container.appendChild(toc);(window);
}

id名やclass名など不確定要素については上書き(overwrite)できるようにしてあります。つまり 上書き内容 = 確認必須内容 です。各個人によって指定すべき値が異なります。

selecor の指定

記事内で利用する最上位の見出しから最下位の見出しを指定してください。最上位はテンプレート「記事部分」内で利用可能な見出しを要確認。

scope の指定

追記を包含する要素のid名またはclass名を確認して指定。<%topentry_more> で検索し、それを挟む要素のidまたはclass属性の値を記す。

例1) id属性

<!--more-->
<div id="postscript">
  <%topentry_more>
</div>
<!--/more-->
scope: '#postscript',

例2) class属性

<!--more-->
<div class="contents">
  <%topentry_more>
</div>
<!--/more-->
scope: '.contents',

例3) id, classいずれの属性も無い場合

<!--more-->
<%topentry_more>
<!--/more-->

この場合にはdiv要素を追加(囲う)するか、<%topentry_body><%topentry_more>双方を 包含している要素についているidまたはclass名を指定。

例2-1) div要素の追加( + クラス属性を付与)

<!--more-->
<div class="tsuiki">
  <%topentry_more>
</div>
<!--/more-->
scope: '.tsuiki',

例2-2) 本文, 追記双方を包含する要素のidまたはclass名

<div id="inner-contents">
  <%topentry_body>
  <!--more-->
  <%topentry_more>
  <!--/more-->
</div>
scope: '#inner-contents',

prefix の指定

各見出しにはid名が付与されます。そのid名をデフォルトでは chapter-数字 に設定していますが、chapter-数字 が既存の名称であった場合には変更してください(末尾の「ハイフン + 数字」は共通、変更不可です)

TOC本体スクリプトをテンプレートに直書きした方はその直下に記載

TOC本体スクリプトを外部化したい方はこの章の内容も含めてファイル化してください。できれば上書き用コードも圧縮します。

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

Minify JS and CSS online, or include the minifier in your project for on-the-fly compression.

TOC本体JS内容
上書き用JS内容

本体コードの末尾で一度改行OKです。そして .js 拡張子で保存 → FC2サーバーへアップロード。

<script src="ここにJSファイルアドレス" async></script>

テンプレート記載位置は </body> 直前です。

外部化した場合にはテンプレート変更時に上書き内容を再度確認し、相違があれば新たにファイルを作成しなければいけません。単純に移設してしまわないよう注意。ファイル新規作成がめんどうな場合でそれでも本体を外部ファイル化しておきたい場合には

<script src="ここにTOC本体ファイルアドレス"></script>
<script>
ここに上書き用JSをインラインで記載
</script>

「インラインで記載」というのは外部ファイル化せずにJSコードを直書きすることです。本体は外部ファイル、上書き内容はインライン、という形。ただし async(非同期読み込み)の指定はできません のでページの表示スピードに多少影響が出ます。

【TOC書き出し用html】

<nav id="toc"></nav>

記事を書く際に「追記」に記載。特に変更などが生じない内容なので「もくじ」などで辞書登録しておくと簡単に呼び出せて便利です。このhtmlを記載すればTOCが表示され、記載しなければTOCは表示されません。

【「見出しリストに戻る」用html】

自動出力すると「TOCを表示したくない + 見出しを使いたい」という条件下でも戻るリンクだけが表示されてしまいますのでTOC本体スクリプトからは除外してあります。使いたい箇所に以下の内容を記載してください。「もどる」などで辞書登録しておくと良いでしょう。

<div class="back-toc" style="font-weight: bold;"><a href="#toc">目次へ戻る&uarr;</a></div>

【デフォルトCSS】

/* toc */
#toc {
  position: relative;
  width: 100%;
  margin: 30px auto;/* 30pxは先行要素と後続要素との距離 */
  padding: 3em 40px 0 0;
  border: 1px solid rgb(209,215,215);/* 全体を囲うボーダー */
  background: rgb(249,255,255);/* 全体背景色 */
  line-height: 1.5;/* 行間設定(注意 単位なしで記載) */
}

#toc::before {
  content: "目次";/* toc上部タイトル */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

#toc a {
  display: block;
  width: 100%;
  padding: 5px 0;
  border-top: 1px solid rgb(229,235,235);/* 各リンク上部のボーダー */
  color: rgb(51,51,51);/* リンク色 */
  word-break: break-all;
  text-decoration: none;
}

/* 戻るリンクの指定 */
.back-toc {
  margin: 1em 0;
}

テンプレートスタイルシートの末尾に記載。

その他のCSSスタイリング

デフォルトのCSS内容と差し替えてください。同時記載ではなく差し替えです。

四角

/* toc 四角 */
#toc {
  position: relative;
  width: 100%;
  margin: 30px auto;/* 30pxは先行要素と後続要素との距離 */
  padding: 3em 1em 0;
  border: 1px solid rgb(200,200,200);/* ボーダー指定 */
  line-height: 1.5;/* 行間設定(注意 単位なしで記載) */
}

#toc::before {
  content: "目次";/* toc上部タイトル */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

#toc ol {
  list-style: none;
  counter-reset: li;
  margin-left: 2.5em;
  padding: 0;
}

#toc a {
  display: block;
  position: relative;
  width: 100%;
  padding: 5px 0;
  color: rgb(51,51,51);
  word-break: break-all;
  text-decoration: none;
}

#toc a::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -2.5em;
  top: 50%;
  margin-top: -1em;
  height: 2em;
  width: 2em;
  background: rgb(122,65,113);/* 最上級見出しの背景色 */
  color: white;
  font-weight: bold;
  line-height: 2em;
  text-align: center;
}

#toc ol ol a::before {
  background: rgb(188,100,164);/* 二位見出しの背景色 */
}

#toc ol ol ol a::before {
  background: rgb(196,163,191);/* 三位見出しの背景色 */
}

/* 戻るリンクの指定 */
.back-toc {
  margin: 1em 0;
}

円形にしたい場合は #toc a::beforeborder-radius: 50%; を追加。
3段階の位までスタイリングしてあります。

四角吹き出し

/* toc 四角吹き出し */
#toc {
  position: relative;
  width: 100%;
  margin: 30px auto;/* 30pxは先行要素と後続要素との距離 */
  padding: 3em 1em 0;
  border: 1px solid rgb(200,200,200);/* ボーダー指定 */
  line-height: 1.5;/* 行間設定(注意 単位なしで記載) */
}

#toc::before {
  content: "目次";/* toc上部タイトル */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

#toc ol {
  list-style: none;
  counter-reset: li;
  margin-left: 2.7em;
  padding: 0;
}

#toc a {
  display: block;
  position: relative;
  width: 100%;
  padding: 5px 0;
  color: rgb(51,51,51);
  word-break: break-all;
  text-decoration: none;
}

#toc a::before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -2.7em;
  top: 50%;
  margin-top: -1em;
  height: 2em;
  width: 2em;
  background: rgb(122,65,113);/* 最上級見出しの背景色 */
  color: white;
  font-weight: bold;
  line-height: 2em;
  text-align: center;
}

#toc ol ol a::before {
  background: rgb(188,100,164);/* 二位見出しの背景色 */
}

#toc ol ol ol a::before {
  background: rgb(196,163,191);/* 三位見出しの背景色 */
}

#toc a::after {
  content: "";
  position: absolute;
  left: -.7em;
  top: 50%;
  border: .3em solid transparent;
  border-left-color: rgb(122,65,113);/* 最上級見出し吹き出し角背景色 */
  margin-top: -.3em;
}

#toc ol ol a::after {
  border-left-color: rgb(188,100,164);/* 二位見出し吹き出し角背景色 */
}

#toc ol ol ol a::after {
  border-left-color: rgb(196,163,191);/* 三位見出し吹き出し角背景色 */
}

/* 戻るリンクの指定 */
.back-toc {
  margin: 1em 0;
}

3段階の位までスタイリングしてあります。

リンクに背景色

/* toc リンク背景色 */
#toc {
  position: relative;
  width: 100%;
  margin: 30px auto;/* 30pxは先行要素と後続要素との距離 */
  padding: 3em 40px 0 0;
  border: 1px solid rgb(200,200,200);/* ボーダー指定 */
  line-height: 1.5;/* 行間設定(注意 単位なしで記載) */
}

#toc::before {
  content: "目次";/* toc上部タイトル */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

#toc ol ol,
#toc ol ol ol {
  margin: 0;
}

#toc a {
  display: inline-block;
  margin: .4em 0;
  padding: 5px 0;
  background: rgb(238,238,255);/* 最上位見出しリンク背景色 */
  color: rgb(51,51,51);/* リンク色 */
  word-break: break-all;
  text-decoration: none;
}

#toc ol ol a {
  background: rgb(238,255,238);/* 二位見出しリンク背景色 */
}

#toc ol ol ol a {
  background: rgb(255,255,221);/* 三位見出しリンク背景色 */
}

/* 戻るリンクの指定 */
.back-toc {
  margin: 1em 0;
}

3段階の位までスタイリングしてあります。

リンクにドット背景

/* toc リンクドット背景 */
#toc {
  position: relative;
  width: 100%;
  margin: 30px auto;/* 30pxは先行要素と後続要素との距離 */
  padding: 3em 40px 0 0;
  border: 1px solid rgb(200,200,200);/* ボーダー指定 */
  line-height: 1.5;/* 行間設定(注意 単位なしで記載) */
}

#toc::before {
  content: "目次";/* toc上部タイトル */
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

#toc ol ol,
#toc ol ol ol {
  margin: 0;
}

#toc a {
  display: inline-block;
  margin: .4em 0;
  padding: 5px 0;
  background-color: rgb(238,238,255);/* 最上位見出しリンク背景色 */
  background-image: radial-gradient(rgb(208,208,225) 10%, transparent 20%), radial-gradient(rgb(208,208,225) 10%, transparent 20%);/* 最上位見出しドット色 */
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  color: rgb(51,51,51);/* リンク色 */
  word-break: break-all;
  text-decoration: none;
}

#toc ol ol a {
  background-color: rgb(238,255,238);/* 二位見出しリンク背景色 */
  background-image: radial-gradient(rgb(208,225,208) 10%, transparent 20%), radial-gradient(rgb(208,225,208) 10%, transparent 20%);/* 二位見出しドット色 */
}

#toc ol ol ol a {
  background-color: rgb(255,255,221);/* 三位見出しリンク背景色 */
  background-image: radial-gradient(rgb(225,225,191) 10%, transparent 20%), radial-gradient(rgb(225,225,191) 10%, transparent 20%);/* 三位見出しドット色 */
}

/* 戻るリンクの指定 */
.back-toc {
  margin: 1em 0;
}

3段階の位までスタイリングしてあります。

CSSデザインはそれこそ山程あります。数字に装飾を加える場合には counter-increment プロパティを利用するのが手っ取り早い方法なので、その雛形としてお使いください。

まとめ

TOCがあると固い印象を与えてしまいがちですがデザイン次第で柔らかくなります。GoogleはTOCを積極的に拾おうとしていますのでチャレンジしてみてください。

 32

There are no comments yet.
toc

1.
1.1
1.1.1
みたいに表示させたいです…

2019/02/20 (Wed) 16:34
toc

cssでできました。

2019/02/20 (Wed) 16:56
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/05/27 (Mon) 17:45
vanillaice (Akira)
Akira
To TOCの件 内緒さん

こんにちは ('0')/

> なぜか、中身が目次内に表示されなくて〜

<nav id="toc"></nav>

は記事編集画面に直接記載をしてください。TOCのscript実行よりもこのDOMが「先」に存在しないと書き出しができません。
そしてできれば見出しを含め、目次用nav要素も「追記」に記されると良いと思います。全文タイプテンプレートに変更したくともできなくなる可能性があるからです(トップページで障害が出ます)
よろしくお願いします。

2019/05/27 (Mon) 18:15
Janedoe1471
To Akiraさん

素早いお返事、非常にありがたいです。
tocの位置をscriptの上に移動したら、できました。
今後、デザインを変えるとしても、全文タイプは選びませんし、雰囲気を変えたくなったら、今のテンプレを改造して変えるだけですので、私の場合は、これでOKです。
ものぐさで、忘れっぽいので、記事投稿のたびに、tocタグを追記に貼るという作業が、面倒なので、私には、このほうが向いています。
ありがとうございました。

2019/05/27 (Mon) 18:26
vanillaice (Akira)
Akira
To Janedoe1471さん

修正できたということで安心しました。また、運営方針の件についても了解しました。
お疲れ様でした :)

2019/05/28 (Tue) 01:41
立花家蛇足
また勉強しに来ました

創作モノの長文を書くこともあるので、これは是非取り入れたいです。
少しっつやってみようと思います。

2019/09/03 (Tue) 22:14
vanillaice (Akira)
Akira
To 立花家蛇足さん

こんばんは (o'ω')ノ

はい。お試しください。立花家蛇足さんの場合は
scope: '.inner-contents'
です :)

2019/09/03 (Tue) 22:24
立花家蛇足
恥ずかしながら

できませんでした。
【TOCスクリプト】を
<!--permanent_area-->
<script>【TOCスクリプト】</script>
<!--/permanent_area-->
にペーストしてテンプレートの「HTML編集」で</body>直前に貼り付けました。
そして、【デフォルト設定上書き用スクリプト】をその直下(</body>直前)にペーストしました。
次に【CSSスタイリング】(あたくしは四角にしました)をCSSスタイルシート編集で末尾に追加しました。

そして、記事で【TOC書き出し用html】(<nav id="toc"></nav>)を追記のHTML表示に加えたのですが、目次が表示しませんでした。

何が足りないのか? サッパリです。
なんともトンチンカンで申し訳ありませんが、お教え願えないでしょうか。
よろしくお願いいたします。。

蛇足 拝

2019/09/07 (Sat) 15:14
vanillaice (Akira)
Akira
To 立花家蛇足さん

こんばんは。

<nav id="toc"></nav> が記載されているページを発見できませんので、JSとhtmlの状態確認はできません。
今のところわかっているのはoverwrite用のJS(var container = 〜省略)は

<script>
ここにoverwrite用JS内容
<script>

赤字のようにscript要素になるようscript開始タグと終了タグで挟むようにしてください。
この作業を行った上で、記事内「追記」での<nav id="toc"></nav>記載を試してくださいね。よろしくお願いします。

-----
ひとつヒントとして、FC2に限らずweb一般知識で雛形コードが記載されているとき
「html(あるいは markup)」「CSS」「JavaScript(あるいは JS)」といったように言語名が記されています。
その中で「JavaScript」と明示があるものは通常

$(function() {
$('body').on('contextmenu',function(e) {
return false;
});
});

こういう感じで書いてあります。で、これは前後の<script>と</script>が省略されています。
なぜかと言うと

<script>
$(function() {
$('body').on('contextmenu',function(e) {
return false;
});
});
</script>

こうしてscriptタグがついている場合それはscript要素となり、「html」の方に分類されるようになるからです。
つまりJSコードというのは

・外部ファイル化する(.jsで保存) = この場合ファイルの中身にscriptタグは付けません。付けるとエラー。
・インラインで記載する(インラインとはhtmlファイル内に直接記載することです) = この場合はscriptタグが必要です。

今回は外部化する or インライン
どちらもできるようにしてあるのでscriptタグを省いています。

htmlファイルに記載する内容は全てhtmlタグで囲まれている状態(html要素)でないと単なる文字列となってしまい、そのまま「文字」として描画されてしまいます。今立花家蛇足さんのページでもフッター付近にコードがそのまま表示されていますよね。
ですからhtmlファイル内にJSを記載(インライン)する際には必ず<script>と</script>で挟むようにしてください。
今後もいろんな指南ページでこういった場面に遭遇することがあると思いますので、この機会に覚えておかれると良いですね :)

2019/09/07 (Sat) 22:13
立花家蛇足
To Akiraさん

早速のご教示ありがとうございます。

テンプレートを元に戻してましたので、失礼いたしました。
これからこそこそやってみます。

取り急ぎお礼まで
蛇足 拝

2019/09/07 (Sat) 22:30
vanillaice (Akira)
Akira
To 立花家蛇足さん

はい。頑張ってください。

外部ファイル化のasync指定を推奨しますが強制ではありません(笑)
async(非同期)扱いしておく方がページスピードに影響が出ません。

外部ファイルメリット
・ページスピード最適化(asyncが指定できる場合のみ)
外部ファイルデメリット
・テンプレート変更時に修正(新規ファイル作成)が必要になることがある(記事の親セレクタが同じとは限らないため)

インラインメリット
・内容の変更が容易
インラインデメリット
・ページ表示スピードに影響する

2019/09/07 (Sat) 22:38
ぼん
上手く行かなかったのですが原因がわからず…。

こんにちは。
Akira様のテンプレートを使用させていただいています。

かなり項目の多い記事を作成したので、目次がほしいと思い
検索した結果、こちらページに行き着きました。

そして、立花家蛇足様の質問へのご回答も参考にし、

>できませんでした。
>【TOCスクリプト】を
><!--permanent_area-->
><script>【TOCスクリプト】</script>
><!--/permanent_area-->
>にペーストしてテンプレートの「HTML編集」で</body>直前に貼り付けました。
>そして、【デフォルト設定上書き用スクリプト】をその直下(</body>直前)にペーストしました。

ここまで同じです。

>次に【CSSスタイリング】(あたくしは四角にしました)をCSSスタイルシート編集で末尾に追加しました。

→これは私はいじっていません。


>そして、記事で【TOC書き出し用html】(<nav id="toc"></nav>)を追記のHTML表示に加えたのですが、目次が表示しませんでした。

以上まで同じで、<script></script>も付けました。
しかし、うまく目次が表示できません。

間違いがないか色々変えてみましたが、
これ以上自分ではどこがおかしいのかわからず、質問させていただいた次第です。

ご教授いただければ幸いです。

以下が該当ページです。
https://acchan39.blog.fc2.com/blog-entry-32.html

よろしくお願いいたします。

2019/09/13 (Fri) 17:48
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/09/14 (Sat) 06:08
vanillaice (Akira)
Akira
To ぼんさん

おはようございます ('0')/

まず テンプレートのhtmlに記載した TOCのスクリプトはこれで合ってます。そのまま触らないようにしてください。
表示されない原因を説明します。

-----
【CSSが記載されていない】

スタイルシートに希望するデザインの内容を追加してください。

-----
【見出しを含む文章内容は「追記」に記してください】

見出しの<hx>を利用するのは「追記」です。「本文」には書かないようにしてください。今は全ての文章を「本文」に記載しており、なおかつ
<nav id="toc"></nav>
この書き出し用のhtmlだけが「追記」に存在している状態です。上記のnav要素は見出しを書く「前(先)」に記す必要があります。
というわけで内容をコピペで本文から追記へ移動。

「本文」「追記」の文章分け・文章量については以下の記事を御覧ください。

参考記事: 全文タイプテンプレートは上級者向けに作っているのだよ(ボソ)
https://vanillaice000.blog.fc2.com/blog-entry-940.html

該当記事では私なら
「こんにちは。
〜省略〜
桜井あつしでございます」

これ以降は「追記」にします。私ならば、です。参考までにこのページの構成のスクショを掲載しておきます。
https://file.blog.fc2.com/vanillaice000/cap5/captoc----1200.png

-----
【見出しの順序を守るようにしてください】

現状では
   h5 - 長野市議会〜候補者一覧〜(画像)
h2 - 長野市議会〜立候補者一覧〜
 h3 - 桜井〜
  h4 - 桜井〜政策のポイント〜
 h3 - 小泉〜
  h4 - 小泉〜製作のポイント〜
   h5 - くらし〜
.
.
 h3 - はこやま〜
  h5 - 地域の問題を〜

というように序列が正しくありません。
まず「画像を見出しにしない」ようにしてください。画像は見出しに適しませんし、TOCは画像の抽出は行いません。
そして3からいきなり5なども正しくありませんので目次が狂います。

位が降順のときは順序を乱さない、昇順の場合はOKと考えてください。

例)
×
h2 → h4


h2 → h3

例2)

h2 → h3 → h4 → h3 → h4 → h2

この3点を修正すれば表示されるはずです。よろしくお願いします。

----- 別件
ページ上部に固定されている「FC2検索バー」は非表示をおすすめします。非表示にしても特に代償を求められることはありません。
これを表示しているとタブレットで画面を超過して画面操作性が著しく低下します。
設定ページ
https://admin.blog.fc2.com/control.php?mode=setting&process=2#head_bar

2019/09/14 (Sat) 07:24
vanillaice (Akira)
Akira
To TOCの件 内緒さん

おはようございます。

そうですね。省いています。これは質問があれば対応しようかな(笑)

----- 追記
直しましたー!
いつもご指摘・ご協力ありがとうございます :)

2019/09/14 (Sat) 07:26
ぼん
完了報告です

早速のお返事ありがとうございます。
まだまだ勉強中でちんぷんかんぷんな私にこんなにも細かく丁寧に教えてくださり恐縮です。
結論から申しますと、教えていただいた通りに実践し、ちゃんと目次が表示されました。

https://acchan39.blog.fc2.com/blog-entry-32.html

まずCSSの件ですが、デフォルトのままにするならCSSには何も書き込まなくて良いと勘違いしてしまっていました。
よく考えればそんなことないのにお恥ずかしいです。

それから、本文と追記の分け方についても、
とても丁寧に、スクショや参考記事もご紹介いただき、
大変良く理解できました。(多分…)

そして見出しの件ですが、完全に見落としていました。

FC2の編集画面で「見出し1」「見出し2」など選んでいるといつの間にか
ずれてクリックしてしまい見出しがおかしくなってしまうことがあり、
画像にまで見出しが付くというおかしなことになっていました…。

確認不足でした。

以上教えていただいたことをその通りに変更してみましたら、
無事に思ったような目次が表示され、各項目に飛びやすくなりました。

本当にありがとうございます。


そして、別件として教えていただいた、FC2の検索バーの非表示について。

タブレットで画面を超過して操作性が悪くなるとは知りませんでした。
わざわざ教えていただき感謝いたします。
早速非表示にしたところ、とてもスッキリして満足しております。


本当に分かっていない事が多くてご迷惑おかけしております。

Akira様のテンプレート、本当にお気に入りでこの先も使っていくので
また質問させていただくこともあるかと思いますが、
どうぞよろしくお願いいたします。

2019/09/14 (Sat) 11:16
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2019/09/14 (Sat) 19:06
vanillaice (Akira)
Akira
To ぼんさん

こんにちは ('0')/

404 not found(記事消失)で確認できませんが、お出来になったということで良かったです(笑)
はい。また何かありましたらお気軽にどうぞ。
お疲れ様でした :)

2019/09/15 (Sun) 16:54
vanillaice (Akira)
Akira
To TOCの件 内緒さん②

こんにちは。

検証してもらえるとすごく助かります。今回結構手抜き感を自分でも感じました ←
修正して気分的にすっきりしました(笑)
いつもありがとうございます ('0')/

2019/09/15 (Sun) 17:12
立花家蛇足
なんとかなりました(*^^)v

お陰様で目次を生成することができました。
まだまだ、したいこと、覚えることなど山積みですが一歩っつ(東京弁です)進んでいきます。

お礼まで
蛇足 拝

2019/09/17 (Tue) 21:32
vanillaice (Akira)
Akira
To 立花家蛇足さん

こんにちは ('0')/

出来たということで安心しました。ただここで注意点があります。

ナビゲーションそのものを削除されてしまいましたので
・スクロールの頭出しが狂う
・サイト内検索用モーダルとカテゴリリスト用モーダルのhtmlが無駄

この2点です。モーダルの方は「モーダル」で検索すれば該当htmlがすぐにわかりますので削除すればOKです。モーダル関連CSSはもう下手に触らない方が良いと思いますのでそのままで。

スクロールの頭出しについてはJS内容を変更するしかありません。
moveTo_45.js
で検索し、これはJSファイル名なんですが、この部位を
moveTo.js
に変更することで解消されます。

ただしこれは「たまたま」です。たまたま私が頭出し調整のJSファイルを持っていたのでファイル名変更だけで済みますが、本来はファイル内容をご自分で修正して頂く形になります。
よろしくお願いします。

あと今気づいたんですが、コメント欄でのTOCのJSソースコードの全文公開はお控え願えませんでしょうか。
よろしくご配慮をお願いします。

2019/09/18 (Wed) 10:15
立花家蛇足
To Akiraさん

ありがとうございます。
まだまだチンプンカンですがご指摘の件、直してみました。
今後ともよろしくお願いいたします。

蛇足 拝

2019/09/18 (Wed) 11:28
vanillaice (Akira)
Akira
To 立花家蛇足さん

頭出しの件・コード公開を辞めて頂きたい点は修正確認できませんでした。
あと全体的に動作がおかしくなってしまいましたね。
TOCのJSも不要なページで読み込みが行われています。

もう既に私の手を離れていますので(他の方に指南を受けられたご様子なので)、ご自身で修正をお願いします。

2019/09/18 (Wed) 11:45
立花家蛇足
To Akiraさん

どうやらあたくしは大変失礼なことをしていたようです。
お詫びいたします。

蛇足 拝

2019/09/18 (Wed) 14:16
vanillaice (Akira)
Akira
To 立花家蛇足さん

悪気があってされたことではないと認識しています。
なので「お願い」をしました。

ソースコードは作家の文章と同じだと思って頂ければ作者が意図しないページで全公開されることは好ましくない、という点をご理解頂けるのではないかと思います。

どうぞ必要以上に気に病まれませんようお願いします。Yahoo!には公式機能に「転載」がありましたし、「コピー文化(気軽なコピー&ペースト)」な面がありましたので、こういう懸念は以前からありました。なのでそんなに驚きもしていませんし、まして怒ってもいません(笑)
私は怒ったら暴言ののちガン無視するタイプなんで。

-----
ひどく重く受け取られたようですね。指南した方ががっかりされませんでしょうか。
私としては当たり前のことを当たり前にお願いしただけだったのですが。なんだか残念です。
* 返信は不要です。

2019/09/18 (Wed) 14:22
立花家蛇足
To Akiraさん

作家の比喩でよっく分かりました(東京弁です)。
勉強して出直してまいります。

蛇足 拝

2019/09/18 (Wed) 14:31
bon

Akiraさん
こんにちは。質問が頻繁で大変恐れ入りますが、よろしくお願い致します。

見出しにトライしてみました。
こちらの記事
https://bon3te.fc2.net/blog-entry-5.html
を書いた当時も、Akiraさんの当記事は読みましたが、私にはまだ難しく理解できなかったので、FC2ブログ公式チャンネルの
「ブログに目次をつけてみよう」
https://fc2blogstaff.blog.fc2.com/blog-entry-159.html
を参考にしました。

でもやっぱりAkiraさんの目次がやりたいと思い、何度も読み返しながら挑戦してみました。あれかな、これかなとprefix:を変更してみてもうまくいきませんでしたので、ご質問にあがりました。
見た感じはあと少しという感じで(実際は違うのかもしれませんが)、悔しいです。正しくできていない部分を教えて下さい。いつもお手数をお掛けして心苦しく思っておりますが、よろしくお願い致します。

2020/04/11 (Sat) 12:35
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/
TOCの件について

まず拝見したページ(entry-5.html)の内容は公式ちゃんねるで紹介されているものですよね。こちらは htmlによる手書き生成 で、私のものは JSによる自動生成 なので混ぜて利用することはできません。

公式の方の指南はしませんので、私の方の導入補助説明だけです。なのでどちらを利用するのかはっきり決めて、それぞれの作業チャートを忠実に守る ようにしてください。
以降は私の方を導入するとして、記事内容の補足説明です(別ウィンドウで https://vanillaice000.blog.fc2.com/blog-entry-826.html を開いた状態で比較しながら読んでもらうと良いと思います, 別「タブ」でなく別「ウィンドウ」です)

【作業の前に考慮すべきこと】
・今後「追記」を使えるかどうか --- 理由は記事を熟読のこと。現在は「本文」に見出しが書かれており、OGPの記事概要に見出しリストが抽出されてしまっています。ちょっとこの件改めて記事にしようと思います。
・追記を利用するならば簡易モードをOFFに(ONだと追記が使えません)
・追記を利用する、という決断をした場合には見出しを全て追記に移動させる(カット&ペースト)

追記を使えない・使いたくない、という結論になった場合は私の方のTOCは使わない方が良いと思います。理由は記事内容を熟読。「全文タイプを今後も絶対に使わない」そして「本文200文字以内に絶対TOCを記載しない」と言い切れるならば利用可能です。理由は以下同文(笑)

【作業の前に削除すべきもの】
・記事内の手書きhtmlリスト(<div style="text-align〜〜省略〜〜</div>) --- 公式ちゃんねるのTOC内容
・追加したJS --- 私のTOC内容

-----
まず「何故「追記」への記載を推奨するのか」をしっかり読んでください。ここを理解できないと使いこなせません。

「導入手順」の章にあるスクリプト内容は テンプレートhtmlにそのままコピペすることはできません。
何故かというと、「htmlのソースに記載できるのはhtml要素のみ」だからです。例えば
!function(e){"use strict"〜省略〜e.initTOC=u}(window);
これは「JSコード」です。htmlソース内に記載するには「html要素」にしなければいけません。
<script>!function(e){"use strict"〜省略〜e.initTOC=u}(window);</script>

冒頭のscript開始タグ、末尾のscript終了タグが付くことによってhtml要素になります。
何故記事内容のコードがhtmlになっていないかというと、外部ファイル化を推奨している ためです。外部ファイルに仕上げる場合は逆に前後の<script>と</script>を削除して.js拡張子保存しなければいけません。
わかるかな ^^;

TOCの内容を外部ファイル化せずテンプレートhtml内に直書きする(インラインスクリプト, インラインJSと言います)場合は

<script>[/色]JSコード</script>

という形です。外部ファイル化する場合は、そのファイルの中身は

JSコード

という形です。scriptタグは付けません(付けてはいけません)
そしてこのファイルをテンプレートhtmlに記載するときに

[斜体][斜体]<script src="JSファイル"></script>


となるわけです。

bonさんがここで決めなければいけないのは
1. 全てを外部ファイル化する
2. 基本コードだけを外部ファイル化 + 個人設定(上書き用スクリプト)をインライン化
3. 全てをインライン化

この3択です。推奨は1の全外部ファイル化です。理由は「async指定ができるから」です。asyncというのは「準備が整ったら実行」という意味で、この指定を行うことでhtmlの描画準備(DOM構築)の邪魔をしません。結果表示スピードへの悪影響も最小限です。そして外部ファイル化したものは「キャッシュが効く」というのもメリットのひとつです。

インラインで書いたJSというのは「キャッシュが効かない」のがデメリット。htmlというのは原則キャッシュは効きません。html内の「ファイル化されたもの」はキャッシュが効きます。そしてインラインJSはasyncの指定ができません。

【1】1を選択した場合の最終形(テンプレートhtmlに記載する形)

<script src="JSファイル" async></script>

【2】2を選択した場合の最終形

<script src="基本JSファイル"></script>
<script>上書きJSコード</script>

【3】3を選択した場合

<script>基本JSコード</script>
<script>上書きJSコード</script>

こうなります。1を選ぶのが推奨。2を選ぶ理屈としては「テンプレートを変更したときに上書き内容が変わる可能性を考慮」です。全てを外部ファイル化した場合はscopeなど変更内容が有ればファイル自体を再作成&再アップロードする必要があります。
3を選ぶ理屈は「メンテナンスを楽にしたい」ですかね。頻繁に内容を変更する可能性がある場合です(まず無いと思います)

ここまでが説明です。

ちょっと意地悪をして後回しにしました。
以下を開いてコピペで.JS保存。

https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/user-toc2020-4-11.js

その後テンプレートhtmlの</body>の直前に

<!--permanent_area-->
<script src="JSファイル" async></script>
<!--/permanent_area-->

を記載。「最初から見せろや (;`ー´)o」と思うかもですが、理解することで応用が効くようになるからです。例えば誰かの提供する「xxxができるJS」
を使いたいと思ったとき、その雛形コードが
function〜〜〜
と書かれていればこれはhtmlではなくJSなので<script>と</script>で囲わないと使えないのでコピペだけでは完了しない。
<script>function〜〜〜</script>
と書かれていればこれはhtmlのscript要素なのでコピペだけで完了、とすぐにわかるようになります。また、ファイル化するかインライン化するかの選択も理屈がわかれば自分で決められますよね。

ここまでがスクリプトの導入です。
あとはCSSのスタイリングを選んでスタイルシート末尾に記載、そしてTOCを出したい記事の追記に

<nav id="toc"></nav>

を記載。これは定形ですから「もくじ」などで辞書登録してください。
手順をしっかり守ればこれで表示されるはずです。

* 注意
テンプレートを変更した場合にスムーススクロールが効かなくなることがあります。最近の私のテンプレートではTOCを導入してもスムーススクロールが効くようにスムーススクロール側のJSを操作しています。
その処理が無い場合にはTOCの方にスムーススクロールを追加する必要が生じます。先にお伝えしておきますね。

2020/04/11 (Sat) 14:33
bon
To Akiraさん

こんにちは。早速のお返事ありがとうございます。
私の質問が不明瞭だったかと思います。Akiraさん見出しのテスト記事はこちらです。
https://bon3te.fc2.net/blog-entry-14.html

簡易モードOFFで、新投稿画面の追記に記載しています。

Akiraさんに今日、目次の質問をする前は
3. 全てをインライン化
にして、</body>前にずらずらっと記載しておりました。
理由は、外部ファイル化がわからなかったからです(;^_^A

この状態で質問した時点では、目次の枠と「目次」というタイトルのみが表示されていました。

しかし、質問してお返事をいただき、外部ファイル化=ファビコンの時にした「メモ帳に保存してアップロード」というのがわかりました。
ご親切に保存すれば良いだけの状態でご提示くださったので、それをメモ帳に保存、アップロードしたファイル名を記載して、</body>前に張り付けして確認したところ、見事に目次が生成?されていました。(T_T)うれしいです。

entry-5.htmlの目次(公式ちゃんねるのもの)は、Akiraさんの目次を習得してから公式ちゃんねる目次を削除、修正(追記へ移す)するつもりだったのでそのまま示したため、Akiraさんに誤解させてしまったかもしれません。ごめんなさい。公式ちゃんねるの目次を用いて、それを直してくださいという意図は毛頭ございませんでした。
おかげさまで、公式ちゃんねるの目次を削除し、目次以降をすべて追記に移して内容を修正したところ、こちらも目次が働いてくれました。
https://bon3te.fc2.net/blog-entry-5.html
わかりやすく解説下さりありがとうございました。

今後は、目次を使いたい記事は追記へ記載、目次を用いない記事は本文に記載、としていこうと思いますが、それで解釈に間違いがないでしょうか。

日参して質問している状態で、お時間を割いていただいてすみません。
コメントプラグインとタグの件もありがとうございました(^^)

2020/04/11 (Sat) 15:21
vanillaice (Akira)
Akira
To bonさん(完了のご報告)

> 全てをインライン化にして、</body>前にずらずらっと記載しておりました。〜

そうですね。ただしscriptタグが付いていないために単なる「文字列」の記載になっていました。これは当然バリデートエラーですし、JSとしても機能しません。
インラインの場合はscriptタグが必要だ、という点が重要です。

> 目次を使いたい記事は追記へ記載、目次を用いない記事は本文に記載、としていこうと思いますが、それで解釈に間違いがないでしょうか。〜

私の個人的な意見としては見出しの有無に関わらず「本文は記事の紹介」「追記の記事の詳細」という使い方をおすすめしています。

参考記事: FC2ブログの「追記」の意義と有効活用の考察
https://vanillaice000.blog.fc2.com/blog-entry-786.html

もちろんbonさんのおっしゃる使い方でもご自身が混乱したりうっかりが無ければ良いと思います。
追記の使い方は考え方や方針によりますので強制するようなことはしません。bonさんご自身でお決めくださいね。
お疲れ様でした :)

----- 追記
テスト記事はあくまでもテストだから「本文」なしになっていると解釈していますが、念の為の追記です。
本文はOGP(SNSシェア, ブログカード, 一部RSSサービス に関連します)の概要文の役割も持っていますので、「TOCを利用する記事は全ての内容を「追記」に記す」という意味であれば推奨しません。
OGP対象になる文章(記事の紹介や誘導になる文章)は「本文」に記載するようにしてくださいね。書かないと概要文「なし」になってしまいます。entry-5.htmlの記事はちゃんとそうなっていますから蛇足だと思いますのでお返事は不要です(もちろん質問などありましたらどうぞ) :)

2020/04/11 (Sat) 15:46
bon
To Akiraさん

はい、
3. 全てをインライン化
を採ったつもりでしたが、scriptで囲っていなかったのでそれはhtmlになっていなかったのですね。お返事を何度も読みました。詳しく解説して下さり、ありがとうございました。

追記の扱いについて
ご紹介いただいた記事は以前に読んでいましたが、全文タイプテンプレートの方向けと思っていました(Akiraさんの意図するところが読めていない…すみません)。Akiraさんが推奨される
本文=概要、追記=本文
というふうに、私も変えようと思います。
私の旧のブログは以前全文タイプだったので、「続きはこちらから」としてクリックで開くようにして追記を使っていました。同じようにすればよいのですね(^^)
承知いたしました。

何から何まで、いつも本当にありがとうございます!

【追記を拝読して】
提示くださった追記に関するブログ記事も再度読みまして、よく理解できました(つもりです!)。
目次テストの記事は何も考えず全部追記に記していましたが、これから記事を書く際には序文は本文へ、以降を追記へ、ということを徹底したいと思います。
ご丁寧に追加で補足下さりありがとうございます(^^)

2020/04/11 (Sat) 16:09

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ