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

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

webツール
2019/02/06
69
vanillaice (Akira)
vanillaice (Akira)
HTMLCSSVanillaJS初心者向け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を各見出しよりも先に書く。それだけです。

導入手順

ここからは実際の導入手順です。必須Javascriptは2つあります。

【TOCスクリプト】--- 必須script①

!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終了タグの方ですのでお間違いなく。

【デフォルト設定上書き用スクリプト】--- 必須script②

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.

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を積極的に拾おうとしていますのでチャレンジしてみてください。

おまけ --- 2021年8月27日 追記

TOCの管理について。テンプレート変更などで移植作業が生じた際に、書き漏らしがあるようなので、以下のような記載方法をおすすめします。

<!-- TOC ここから, 移植必須 -->
内容
<!-- TOC ここまで, 移植必須 -->

内容に関しては、全て直書きの場合 及び 外部ファイルと上書きを別にする場合 は script要素が2つ(本体 + 上書き) で、全て外部ファイル化してまとめる場合は script要素が1つ です。

緑部位は コメントアウト と言い、管理用の目印として利用できます。<----> に挟まれたものが コメント で、コメントは自身がわかりやすい文言にしておけばOKです。

ただし 記号部分を絶対に変更しないこと、コメント内容にハイフンを利用しないこと が条件です。

例) コメント内ハイフン

<!---------------------- コメント ---------------------->
<!-- コメント ---------------------- コメント -->

例) 記号の変更

<!!--コメント--!!>
<///コメント///>

あとはhtmlに直接コメントを書くのもダメです。必ず <----> で囲います。

コメントアウトは本記事のTOCに関わらずhtml全般で利用できます。テンプレートhtmlに何かを任意で追加する際など、目印に付けておくと管理が楽になります。ただしくれぐれもルールに則って記載を行ってくださいね。

Related post

Comments  69

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

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

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

cssでできました。

-
2019/05/27 (Mon) 17:45

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/05/27 (Mon) 18:15

To TOCの件 内緒さん

こんにちは ('0')/

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

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

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

Janedoe1471
2019/05/27 (Mon) 18:26

To Akiraさん

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

vanillaice (Akira)
Akira
2019/05/28 (Tue) 01:41

To Janedoe1471さん

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

立花家蛇足
2019/09/03 (Tue) 22:14

また勉強しに来ました

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

vanillaice (Akira)
Akira
2019/09/03 (Tue) 22:24

To 立花家蛇足さん

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

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

立花家蛇足
2019/09/07 (Sat) 15:14

恥ずかしながら

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

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

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

蛇足 拝

vanillaice (Akira)
Akira
2019/09/07 (Sat) 22:13

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:30

To Akiraさん

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

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

取り急ぎお礼まで
蛇足 拝

vanillaice (Akira)
Akira
2019/09/07 (Sat) 22:38

To 立花家蛇足さん

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

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

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

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

ぼん
2019/09/13 (Fri) 17:48

上手く行かなかったのですが原因がわからず…。

こんにちは。
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/14 (Sat) 06:08

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/14 (Sat) 07:24

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

vanillaice (Akira)
Akira
2019/09/14 (Sat) 07:26

To TOCの件 内緒さん

おはようございます。

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

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

ぼん
2019/09/14 (Sat) 11:16

完了報告です

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

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

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

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

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

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

確認不足でした。

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

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


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

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


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

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

-
2019/09/14 (Sat) 19:06

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2019/09/15 (Sun) 16:54

To ぼんさん

こんにちは ('0')/

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

vanillaice (Akira)
Akira
2019/09/15 (Sun) 17:12

To TOCの件 内緒さん②

こんにちは。

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

立花家蛇足
2019/09/17 (Tue) 21:32

なんとかなりました(*^^)v

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

お礼まで
蛇足 拝

vanillaice (Akira)
Akira
2019/09/18 (Wed) 10:15

To 立花家蛇足さん

こんにちは ('0')/

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

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

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

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

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

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

立花家蛇足
2019/09/18 (Wed) 11:28

To Akiraさん

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

蛇足 拝

vanillaice (Akira)
Akira
2019/09/18 (Wed) 11:45

To 立花家蛇足さん

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

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

立花家蛇足
2019/09/18 (Wed) 14:16

To Akiraさん

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

蛇足 拝

vanillaice (Akira)
Akira
2019/09/18 (Wed) 14:22

To 立花家蛇足さん

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

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

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

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

立花家蛇足
2019/09/18 (Wed) 14:31

To Akiraさん

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

蛇足 拝

bon
2020/04/11 (Sat) 12:35

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

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

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

vanillaice (Akira)
Akira
2020/04/11 (Sat) 14:33

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の方にスムーススクロールを追加する必要が生じます。先にお伝えしておきますね。

bon
2020/04/11 (Sat) 15:21

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
わかりやすく解説下さりありがとうございました。

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

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

vanillaice (Akira)
Akira
2020/04/11 (Sat) 15:46

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の記事はちゃんとそうなっていますから蛇足だと思いますのでお返事は不要です(もちろん質問などありましたらどうぞ) :)

bon
2020/04/11 (Sat) 16:09

To Akiraさん

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

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

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

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

-
2020/07/14 (Tue) 10:59

管理人のみ閲覧できます

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

-
2020/07/15 (Wed) 14:48

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/07/18 (Sat) 20:45

To TOCの件内緒さん

> もしご迷惑でしたらすぐに削除いたします〜

いえ。全く問題ありません。どうぞそのままご利用くださいね :)

-
2020/07/19 (Sun) 07:16

管理人のみ閲覧できます

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

-
2020/07/19 (Sun) 07:26

管理人のみ閲覧できます

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

-
2020/07/19 (Sun) 08:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/07/19 (Sun) 18:20

To 独自ドメインの件

こんばんは。
* samesite属性の件

そうだったんですね。今web全体でいろいろと変更が生じていて確かに大変な時期ではあります ^^;
あと担当者の「当たり外れ」があるんです(笑)
一つ言えるのは、担当になった方はちゃんと報告者のブログを訪問し、案件に関する内容が記されていないかチェックしているようです。なので複雑な事象の場合は担当者にも「ヒント」になりうる内容を書き留めたり、関連しそうなページへのリンクを設けるなどしておくと良いかもしれません。

ただ相手も人間なので過剰に責めるような内容だったり、猜疑心をぶつけたりするのは避けたいですね。その点は内緒さんは大丈夫だと思います。こういうのは人間性が出る(笑)

運営上層部の方も「ブログ離れ」「FC2ブログの使いにくさ」を認識していて、それについて少しだけお話する機会があり、今その件で奔走中 ( ̄∀ ̄;)
また詳細をお伝えできる日が来ると思いますが、今マジでもう大変で泣きそうなんですよー (´・ω・`)
放り投げるわけにいかないのでなんとか頑張ってます。実は以前に内緒さんが私の行動に関して的確な「予想」をされたのでびっくりしたんです(笑)

いろんな憶測が生じてもいけませんので、こういった重要案件や重要システム変更については私は関わっていない、という点だけお伝えしておこうと思います。ただシステムに携わっているスタッフさんは相当苦労されていることを身を以て知ったもので、ちょっと庇ってみたり(笑)

-
2020/07/19 (Sun) 19:15

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/07/19 (Sun) 22:51

To 諸々の件 内緒さん

お気遣いありがとうございます。
師匠と言って頂くほど優れた人間ではないので恐縮です ^^;

自由が高いと自己責任の比率も増えるのでバランスがなかなか難しいですよね。それでも個人的にFC2ブログはやりがいのあるブログサービスではないかと思います。がんばったらそれなりに自分に返ってくるとか、そういう点を含め。

いつもありがとうございます。励みになります :)

-
2020/07/20 (Mon) 08:26

管理人のみ閲覧できます

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

-
2020/09/27 (Sun) 14:34

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/09/28 (Mon) 22:07

To TOCの件 内緒さん

こんばんは。

お役に立てましたら幸いです :)
「24」の日本版があるんですね。私は日本のドラマほとんど見たことが無いんですが、日本版「Dexter」ができたら見てみたいと思います(笑)
さすがに無理かな ^^;

-
2020/09/29 (Tue) 12:58

管理人のみ閲覧できます

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

-
2020/10/02 (Fri) 12:53

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/03 (Sat) 01:11

To Dexter 内緒さん

こんばんは。
早速ご購入されたんですね。シーズン8まであるので先にお伝えすれば良かった ^^;

いやもう私などはカタカナと数字のひらがな化全般が苦手 ( ̄∀ ̄;)

お恥ずかしい話なんだけども、実は私はアナログの時計をなかなか読めなかったんですよね。たぶん12歳ぐらいまで。
あと日本ってmilitary time(軍隊や空港の20時とか24時とか)使いますよね。これも私すごく混乱するんですよ。
時計はもうフツー読めますが、あとは算数の足し算に「5」「7」「8」が出てくるとわからなくなっちゃうんです。7+5や8+5がすっと出てこない。もう苦手とわかってるのだから12と13って覚えておけば良いのに、そうしてるのに迷ってしまう。なんでかわからない(笑)

dyscalculia(算数できない障害?)じゃないかと両親は昔心配してて、実際に若干その傾向があると思う (´・ω・`)

気が向いたらで良いのでDexterのレビューお待ちしています(笑)

-
2020/10/03 (Sat) 08:28

管理人のみ閲覧できます

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

-
2020/10/07 (Wed) 13:14

管理人のみ閲覧できます

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

vanillaice (Akira)
Akira
2020/10/07 (Wed) 23:41

To 内緒さん

こんばんは ('0')/

私も気づいておりまして。
内緒さんのおっしゃるとおりで、テストやランキングの目的はズバリ「順位を知ること」なのですから、知りたくない、はてはメンタルやられるとまで嫌ならばちゃんと準備されている「参加しない」を選択すべきだと思います。
この心理私全く理解できませんので、この意見については「重視していません」と伝えました。意地悪でなく「知りたくないならなぜわざわざ参加を?」と不思議に感じます(笑)
色々事情があるんだろうけど、やっぱり理解に苦しむ ^^;

例えばアメブロなんかはブログへのランキング表示が義務付けられていますよね。本当は個人的にはFC2もそのぐらいやっても良いと思っています。
閲覧者の手助けとして大いに役立つと思うんですよ。
今見たブログがおもしろくてランキングが10位なのだとしたら、じゃあ1位のブログはもっと自分の好みだろうか、もっとおもしろいだろうか、とクリックを誘発しますよね。それが全体アクセスに貢献するわけで。それにはポータルもきちんと機能していないといけないわけで、そのあたりもFC2は弱いと思っています。

FC2では義務表示は無理なのでせめて「登録したのだからデータをすぐに参照できる」という形にしておきたいと思います。データを賢く利用できるかどうかはユーザー次第だからなぁ。それに見えても見えなくても順位は事実データなのだから現実は何も変わらないわけだし (´・ω・`)

いつもお気遣いありがとうございます :)

-
2020/10/08 (Thu) 06:14

管理人のみ閲覧できます

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

-
2020/11/03 (Tue) 15:23

管理人のみ閲覧できます

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

road2myhome
2021/03/02 (Tue) 15:14

いつも参考にさせて頂いてます

こんにちは。
3年ぶりにブログ再開をしまして、Akira様のテンプレートを使用させて頂いてます。ありがとうございます。

また、いろいろなテクニックも参考にさせて頂き取り入れております。
今回は、目次の作成ですが、成功しました。ブログの質が向上したように感じており満足しております。

昨日、ファビコンを設定しましたがまだ表示がされていないので、
もう暫く待つ必要があるのかと思っております。

今後とも、楽しみにしております。

vanillaice (Akira)
Akira
2021/03/03 (Wed) 13:09

To road2myhomeさん

こんにちは ('0')/

ご丁寧にありがとうございます。お役に立てたのならば幸いです :)

* ファビコンは今時間が取れないもので、のちほど検証しておきます。設置内容に問題があればコメント返信機能でお知らせしますね。反映に要する時間は約1ヶ月ぐらいが目安かな、と思います。

road2myhome
2021/03/04 (Thu) 13:46

To Akiraさん

Akira様

お返事ありがとうございます。光栄です。
ファビコンは、ブログカードの方には反映ができたようですが、
ブラウザ左上のファビコンは FC2のユニコーンのままです。

約1ヶ月ぐらいということで、気長に待ってみます。ありがとうございます。

vanillaice (Akira)
Akira
2021/03/04 (Thu) 21:28

To road2myhomeさん

お返事遅くなりました (*_ _)

まず結論から言うと、htmlの「head要素」と呼ばれる部位にミスがあり、そのためファビコンも認識されていない、という状況で比較的大きなエラーです。
エラーの原因は「全角スペースの利用」です。
修正についてはテキストエディターをお持ちの場合はそちらに内容を移植して行うのが一番良いのですが、ブラウザ上で作業することを想定して説明をしますね。

<meta name="description"
で検索するとhtml内に3箇所出てきます。この3箇所全ての「行」を見るようにして、
<meta〜
の直前、つまり

ココ<meta〜

ココ の部位にカーソルを入れてdeleteキーを押下します。その際に通常は「2回」のdeleteを行うことで行の文頭になり、インデントが無くなります。
それが1度のdeleteで文頭になった場合、それは「全角スペースが利用されている」ことの証です。通常のhtmlソースのインデントは半角スペース2か4つ、私の場合は2つなので、2度のdeleteが必要なはず。

テンプレートのheadは非常に複雑なので、3箇所全てに同じ作業を行ってください。delete時にどこが全角スペースだったのかわかりますけれど、改めてインデントをつける必要はありません。文頭になるようにしてください(付け直してはいけない、という意味ではないので、つける場合は注意して必ず半角スペースを利用してください)

-------
ブログカードのファビコン表示はGoogleにページ認識されていることが大前提なのでタイムラグが生じますが、ブラウザのタブは即時反映のはずなので現時点で出てこない、ということはエラーを疑います。そしてファビコンはhead内で設定しますので、恐らくheadだろうという予測が立てられます。
あとheadのエラーで気づきやすいのは、今road2myhomeさんのブログをご覧いただくと、ページの最上部に「隙間」が出来ています。

本来のHaven
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210304_1.png

road2myhomeさん
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/sc20210304_2.png

ブラウザブックマークバーとの境を見てくださいね。
これは、日本語の「全角スペース」というのはhtml上では「見えない文字」として扱われますので、htmlコード内では使用不可なんですね。<head> から </head> の間に挟まれた内容というのは通常目に見えないものを扱いますが、全角スペースは「文字」なので、その見えない一文字がページの最上部に存在しており、目視上は「隙間」になります。これが仮にスペースではなく「あ」というひらがなであれば、隙間のところに「あ」と表示されます。

これはどのテンプレートを利用しても同じなので、不可解なページ上部の隙間を見つけた場合はheadの記述ミスを疑ってください。Havenの場合は隙間が生じても違和感のないヘッダーデザインですから気づくにくかったですよね ^^;

参考記事: htmlの絶対的NGそれは「全角の利用」
https://vanillaice000.blog.fc2.com/blog-entry-775.html

taro
2021/06/13 (Sun) 01:54

外部ファイル化して導入したいのですがjs拡張子で圧縮することが出来ません

こんばんは。
日々akira様のサイトを拝見させていただきとても勉強になります。

私も当記事を参考に目次を導入しようと思い手順をおってみたのですが、始めの外部ファイルで躓いてしまいました。
どうかご指南よろしくおねがいいたします。

テンプレートはakira様のFrancescaを利用させていただいております。

まず、導入手順の【【デフォルト設定上書き用スクリプト】のselecorの指定をh2~h6まで指定、次にscopeの指定として<%topentry_more>で検索したところ<div id=postscript><%topentry_more></div>となっておりましたのでscope: '#postscript',に書き換えました。prefix の指定は手を付けていません。

最後にwww.minifier.orgで【TOCスクリプト】を貼り付け、末尾を一度改行し上記のように変更した【デフォルト設定上書き用スクリプト】を貼り付けました。

Select Languageはjsにチェックを入れ実行したところ「Something, somewhere, somehow failed! Did you post a link to an unreachable script?」と表示され圧縮することが出来ませんでした。

私の理解不足で恐縮ですがどうかご教授いただければ嬉しいです。ご返信お待ちしております。

vanillaice (Akira)
vanillaice (Akira)
2021/06/13 (Sun) 22:01

To taroさん

こんばんは ('0')/

toc本体のscriptは既に圧縮済なので、taroさんが圧縮するのはscopeを修正した上書き用scriptのみです。既に圧縮した内容を含めてしまったのでエラーになったのだろうと思います。

1. 作成ファイルにまず本体scriptをコピー&ペースト
2. 圧縮した上書き用scriptを 1 の作成ファイルにペースト(その際1度行替えしても良い)
3. 作成ファイルを .js 拡張子で保存

この流れです。一度お試しください :)

taro
2021/06/14 (Mon) 17:55

To Akiraさん

こんばんは。

ご返信ありがとうございます。akira様のご指導の通りに行いましたところ無事ファイルを作成することができ、目次も表示されるようになりました。

原因は私の認識不足にありました。

正)
1. 作成ファイルにまず本体scriptをコピー&ペースト
2. 圧縮した上書き用scriptを 1 の作成ファイルにペースト(その際1度行替えしても良い)
3. 作成ファイルを .js 拡張子で保存

誤)
1.圧縮サイトに本体scriptと変更した上書き用scriptをコピーペースト
2.1をまとめて圧縮してjsファイルとして保存(サイト内でファイルが作成されると考えていた)
3.jsファイルを導入

目次を導入できたおかげで記事も見やすく、外部ファイル化によりスピード改善にも繋がりとても感謝しております。

質問に質問を重ねて恐縮ですが、もし差し支えなければ教えていただきたいことがあります。

akira様の当記事の目次をクリックすると該当見出しまで「ヌルヌル」と滑らかにスクロールしてとても心地よいカスタマイズだと感動しているのですが、この機能の名称は何と呼ぶのでしょうか?私のブログでの目次をクリックしたところ「パッパッ」と瞬間移動のような挙動でしたので、どこかエラーが出ているのかそれともカスタマイズの違いなのかをご教授いただければ幸いです。

長くなりましたが改めて感謝申し上げます。お忙しいところありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2021/06/16 (Wed) 15:06

To taroさん

こんにちは ('0')/

まずその前に、head要素内にクリティカルエラーがありますのでそちらを修正してください。
msapplication-config
で検索し以下の内容の

<meta name="msapplication-config" content=該当URL"/>

この content の属性値を囲うダブルクォーテーションが抜けています。正しくは以下の通り。

<meta name="msapplication-config" content="該当URL"/>

-----
スムーススクロールなんですが、taroさんの場合は「FC2アクセス解析」を入れていますよね。この解析ツールは全てのa要素に対するクリックを取得する仕組みで、ページの「遷移」ではなくページ内「位置移動」も取得してしまいます。その影響で、そもそもスムースに移動するはずのものがガクガクとした挙動になってしまいます。

taroさんの最新記事で上下のスクロール(右下にある上下ボタン)を何度かクリックしましたので、アクセス解析でご確認ください。同じページから同じページへの遷移として記録されているはずです。
FC2解析はページ内移動の仕組み・ルールが改正される(html改正)以前からあるツールなので、そろそろ調整してもらえると良いんですけどね (´・ω・`)

あと、Francescaではページ移動のJSを「任意スクロールが発生してから」発火するよう設定しています。なので、例えばファーストビュー内(ページを表示した際にスクロールしなくとも画面内に収まっている範囲)にTOCがあるとして、そのままスクロール無しでクリックが行われると発火前ですからいきなりジャンプします。例え数ミリでもスクロールが行われた後にクリックされた場合はスムースに移動します。この仕様は

・スクロールに絡むJSはページを読み込む際に同時に取得する必要が無いため(ページ表示スピードを低下させないための処理)
・後付で追加された何らかの要素に対してもスムーススクロールを有効化させるため

の処置で、今回の場合TOCは後者の「後付」になり、通常ならばTOC内容に新規でスムーススクロール用JSが必要になるんですが、「スクロールが発生するまで発火させない」という処置によってTOCもスムーススクロールが自動で有効(というか対象)になります。
(これは「何故スクロールが発生するまでスムース動作が有効にならないのか、の説明です」)

というわけで、カクカクしてしまうのはFC2解析の仕様によるものです。こればかりはどうしようもないのですみません (´・ω・`)
一度アクセス解析を無効化して動作をご確認くださいね。その際は先程お伝えした「スクロール発生前・後」の仕組みもご理解ください。よろしくお願いします。

taro
2021/06/16 (Wed) 20:40

To Akiraさん

こんばんは。

ご返信ありがとうございます。厚かましいお願いを快くお受けいただいたこと、改めて感謝申し上げます。

> まずその前に、head要素内にクリティカルエラーがありますのでそちらを修正してください。

ご指摘いただいた箇所を修正いたしました。ありがとうございます。

> スムーススクロールなんですが、taroさんの場合は「FC2アクセス解析」を入れていますよね。この解析ツールは全てのa要素に対するクリックを取得する仕組みで、ページの「遷移」ではなくページ内「位置移動」も取得してしまいます。その影響で、そもそもスムースに移動するはずのものがガクガクとした挙動になってしまいます。

akira様の素晴らしいカスタマイズを「FC2アクセス解析」によって干渉させてしまったことに大変恥ずかしく勉強不足だと痛感いたしました。早速<body>内から解析用HTMLタグを削除し、アクセス解析サービスも解除したところ私ブログにもスムーススクロールが効くようになりました。

> ・スクロールに絡むJSはページを読み込む際に同時に取得する必要が無いため(ページ表示スピードを低下させないための処理)
・後付で追加された何らかの要素に対してもスムーススクロールを有効化させるため

スピード改善だけでなく今後の要素付与に対してのフォローまで考えられていることに脱帽いたしました。読者目線だけでなくブロガー目線まで配慮されているおかげでもあり、だからこそ私も楽しく記事を書けております。ありがとうございます。

拙い知識から良かれと思い導入した「fc2ブログ解析」が返って不便なことになってしまい、カスタマイズする前に相性にも目を向けるべきだなと実感しました。akira様のコメントを今一度読み直して今後の糧になるよう励みたいと思います。

これからも勉強させていただきます。この度は誠にありがとうございました。

vanillaice (Akira)
vanillaice (Akira)
2021/06/16 (Wed) 22:20

To taroさん(完了のご報告)

taroさんのページでスムースに移動することを確認できました。
昔のページ内移動というのは rel属性 というのを用いていたんですが、現在のweb標準では href属性を利用します。このhref属性は外部(別のページ)へ遷移する場合と同じものなんですね。外部の場合は href="https://〜" (遷移先アドレスが記される)で、ページ内の場合は href="#id名" (到達点の要素のidが記される) といった違いがありますが、属性は同じ href です。
FC2解析は仕様が古いので rel の除外しか行われないので困りましたね ^^;
ハッシュ(#)を除外対象にすれば良い話なんですけどね (´・ω・`)

こちらこそお手数おかけしました。お疲れ様でした :)

-
2021/06/17 (Thu) 12:20

管理人のみ閲覧できます

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

K.I
2021/08/27 (Fri) 19:18

設定できず困っています

Akira様、いつも素敵なテンプレートをありがとうございます。

Hymn→Empty street のテンプレへお引越ししたのですが、2年ぶりにブログのテンプレをいじっているため目次(TOC)の設定が出来なくなってしまいました。

設定内容としては、

①HTMLのbody終了タグ直前に下記を追加しました。
<!--permanent_area-->
<script>TOCスクリプトをコピペ</script>
<!--/permanent_area-->

② テンプレートスタイルシートの末尾に「デフォルトCSS」の内容をコピペして追加しました。

③本文に最低限の要約文言、追記に詳細を記載しました。追加の中に、<nav id="toc"></nav>のTOC目次タグと、<h2 class="balloon"></h2>の見出しタグを入れております。


上記のコメントも参照させていただき試行錯誤してみたのですが、うまく設定できず、お手隙の際で大丈夫ですのでどこが間違っているのか教えていただけましたら幸いです。

▼設定記事
https://oyakoryugakumalta.blog.fc2.com/blog-entry-121.html

https://oyakoryugakumalta.blog.fc2.com/blog-entry-120.html


iPhone12ProのサファリとChromeの両方で確認しましたが、「目次」の一行しか反映されず、肝心の見出しの一覧リストが出てこない状況です。

よろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/08/27 (Fri) 20:15

To K.Iさん

こんばんは ('0')/

原因は必須script2つのうちの1つが未記載のためです。
もう少しわかりやすいように記事を修正(追記)しましたのでご覧くださいね。
・ 導入手順
・ おまけ
の2項目をチェックしてください。

よろしくお願いします :)
(empty-street の scopeは #inner-contens なので、雛形の書き直しは必要ありません)

K.I
2021/08/27 (Fri) 21:05

出来ました!!(^^)

Akira様、こんなに早々にお返事いただいて感謝いたします。ありがとうございます!

scriptが1つ丸々抜けていたのですね。
読解力が弱く失礼いたしました。分かりやすく記事を追加いただいてありがとうございます。

また、コメントアウトについても参考になりました。
ちょこちょこと思い立った時に書き足してしまったカスタマイズのせいで、テンプレの移管がかなり大変だったので今後は何か書き加える際は毎回コメントアウトを入れることで管理強化したいと思います。勉強になりました。

重ねてのご質問で恐縮なのですが、コメントアウトはHTMLだけでなく、CSSのほうにも同様のルールのもとで追記しても良いのでしょうか??

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

vanillaice (Akira)
vanillaice (Akira)
2021/08/28 (Sat) 16:58

To K.Iさん

こんにちは ('0')/
まずは上手く行ったということで安心しました。お疲れ様でした :)

コメントアウトの件を記事にしましたのでご一読くださいね。よろしくお願いします。
参考記事: コメントアウトを活用しよう
https://vanillaice000.blog.fc2.com/blog-entry-1080.html

K.I
2021/08/29 (Sun) 01:54

To Akiraさん

早々にありがとうございます!!( ; ; )
記事までアップしていただいて、いつも通り大変分かりやすかったです。この方法でテンプレカスタマイズ時の管理が強化できそうです。
ユーザー想いのAkiraさん、流石です。いつもありがとうございます!!

vanillaice (Akira)
vanillaice (Akira)
2021/08/30 (Mon) 00:38

To K.Iさん(終了のご報告)

こんばんは ('0')/

お役に立てましたら幸いです :)