見出しを目次化するスクリプト(プラグインなし)【toc】の紹介

投稿 2017年10月20日
48
カスタマイズ
InstructionHTMLCSSjQueryVanillaJSSEOサイト紹介中級者向け

追記 2018.7.13 -----

記事末尾にVanilla JS(jQueryなしネイティブJS)のコードを追加しました。

----- 追記ここまで

ちょっと見切り発車というか、リクエストがありましたので書きますが、私自身導入して間がないですし全ページの修正を済ませたわけではありません(笑)

見出しを目次化するためのJS。一般的に toc と呼ばれます
Table Of Content
目次のことを英語表現ではテーブルオブコンテントと言い、その頭文字を取って toc なので特定プラグインの名称を指すわけではありません。
どんなものかはこのページで実際に入れていますので御覧ください。

toc生成JSのご紹介

まず、これからご紹介するJS内容は私が組んだわけではありません。

jQueryで目次と「目次に戻る」を自動生成(プラグイン無し) | 10251

これまで使っていたWordPressの目次生成プラグイン「Table of Contents Plus」を外しました。 プラグイン無しで記事の見出しから目次を生成したり、「目次に戻る」を自動で表示させ

製作者様ページは上記リンクから。
JS内容についてはとても詳細に説明してくださってますので、仕組みや理論など興味のある方は是非足を運んでみてください。

私の記事としては、一部html構造でエラーになる部分の修正と、スムーススクロールの追加、そして FC2ブログで利用する際の注意点 など3点を軸にまとめようと思います。

テンプレートに貼り付けるJS内容

<!--permanent_area-->
<script>$(function(){var b=1;var c='';var d=0;$('#inner-contents h2,#inner-contents h3,#inner-contents h4',this).each(function(){this.id="chapter-"+b;b++;var a=0;if(this.nodeName.toLowerCase()=='h2'){a=1}else if(this.nodeName.toLowerCase()=='h3'){a=2}else if(this.nodeName.toLowerCase()=='h4'){a=3}while(d<a){c+='<ol class="chapter">';d++}while(d>a){c+="</ol>";d--}c+='<li><a href="#'+this.id+'">'+$(this).html()+'</a>\n'});while(d>0){c+="</ol>";d--}if($('#inner-contents h2')[0]){$('#toc').html(c);$('h2:not("#chapter-1")').before('<div class="back-toc"><a href="#toc">もくじに戻る↑</a></div>')}else{$('#toc').attr('class','no-toc')}$('#toc a,.back-toc a').click(function(){var a=800,href=$(this).attr("href"),target=$(href==="#"||href===""?'html':href),position=target.offset().top;$('html, body').animate({scrollTop:position},a,'swing');return false})});</script>
<!--/permanent_area-->

えとね。私JSをインデント使ったり綺麗に書きませんので、見づれぇわ (;`ー´)o な方は作者様のページへGO
先に述べた3点を意識するなら上記の超わかりづらいコードをどうぞ((((笑)

黄色の部分がスムーススクロールです。
ナビゲーションなどが上部に固定されている場合には修正が必要です(後述)

利用に際しての大前提

要約表示タイプテンプレートの方は何も気にしなくてOKです。
全文表示タイプテンプレートの方は追記での利用のみです。
「本文」と「追記」の切り分けを行っていない方は使えません。
理由は、トップページに見出しが乱立するから です。
見出しの位を見分けて表示を行うわけですから、同ページ内に同じ位が複数点在すれば正しい取得ができません。
ですから、 本文へは記事の導入部分のみを記載し、
追記に「目次」を設置し、
それ以降で実際の見出しを利用する。
という構成になります。

貼り付け位置と確認・修正必須箇所について

上記内容を貼り付けるのは テンプレートのhtmlソース内 です。
</body> の直前に入れてください。
bodyの終了タグ です。開始タグと間違えないよう注意。
html全体ソースの最後方にあります。

緑の部位は 必ずチェック及び必要があれば修正が要ります
雛形には #inner-contents とありますが、これは 記事範囲に与えられているid名 です。
テンプレート毎に異なりますので、自身では何が該当するのか。id名なのかclass名なのかもしっかり確認をし、適宜変更してください。

ちなみに雛形は私のテンプレート Axis での内容ですので、Axisをお使いの方はそのまま使えます。

最初の緑部位
#inner-contents h2,#inner-contents h3,#inner-contents h4
h2, h3, h4 が入ってます。
これも自身の環境毎に違います
記事内で利用できる見出しが h2 からであれば上記の通り、
記事範囲のidまたはclass名 + h2 から昇順で。
h3からならば h3, h4, h5 と書き直します。
他の部位も連動ですので、記事内見出しの位によって各自修正してください。

その他注意点

見出しが付いている記事は、最終見出し以外全てに「目次に戻る」のリンクが表示されます。
ですから使うなら使う、使わないなら使わない、という方向で(笑)
見出し出力用のhtmlを記載しなくても「目次に戻る」だけは出てしまいますので注意してください。
戻るリンクが不要な場合には

$('h2:not("#chapter-1")').before('<div class="back-toc"><a href="#toc">もくじに戻る↑</a></div>')

上記をJS雛形から削除します。

記事に貼り付けるhtml内容

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

私はhtml5新要素の「ナビゲーション」を明示する <nav> というタグを使っていますが、html5以前のバージョンでnav要素は使えません(解釈できません)
html4の方は <div> へ書き換えてください。
終了タグの方も忘れずに。
つか、html5にしたらいいと思うよ (´・ω・`)

CSSデザイン

これはもう各自好き勝手にやって頂くということで。
雛形を掲載しておきます。ボーダーや背景の色を変えるだけでも随分印象変わると思います。
上部リストアイコンにfont awesomeを使っていますので、font awesomeへのリンクを導入していないとアイコンが空っぽになります。

/* toc */
#inner-contents ol.chapter {
  margin: 0;
}

#toc {
  margin: 30px auto;
  width: 100%;
  background-color: rgb(249,255,255);
  border: 1px solid rgb(209,215,215);
  line-height: 1.5;
  padding: 3em 40px 0 0;
  position: relative;
}

.no-toc {
  display: none;
}

#toc:before {
  content: "目次";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 3em;
  font-weight: bold;
}

.chapter li a {
  display: block;
  width: 100%;
  border-top: 1px solid rgb(229,235,235);
  color: rgb(51,51,51);
  padding: 5px 0;
  word-break: break-all;
}

.back-toc {
  margin: 1em 0;
}

2行目の #inner-contens は既に述べている通り自身の環境に合わせて変更必須です。

スムーススクロールの衝突を避ける

テンプレートの方にページ内移動用の スムーススクロール JSを導入している場合には衝突します。
それを避けるために、toc用のリンクを除外指定してください。
テンプレート内のどこかに
a[href^="#"]
あるいは a[href^=#]
という箇所があるはずですので、
a[href^="#"]:not(#toc a,.back-toc a) に修正します。
これちゃんとやらないとマウススクロールがギクシャクします。

テンプレートのナビゲーションなどが上部固定(fixed)になっている場合のスムーススクロール操作

前章の衝突回避は テンプレート側のJS操作 ですが、こちらは本ページの toc用雛形JSの操作 です。
雛形の黄色い部分がスムーススクロールに係る内容ですので、以下のような修正をしてください。

var o=50;$('#toc a,.back-toc a').on('click',function(){var t=$(this).attr('href'),e=$('#'==t||''==t?'html':t),p=e.offset().top-o;return $('html,body').animate({scrollTop:p},800,'swing'),!1})

緑の数字はテキトーに入れてあります。ここへは ナビゲーションの縦幅 を入れてください。
ナビゲーションではなくとも上部に固定されている何かがある場合にはその縦幅を入れます。
この処理はスクロール時の頭出しのズレを防ぐ目的です。

見出し目次の利点

Googleは現在、ページ内リンクを積極的に拾おうとしています。

検索結果(スマートフォン)

一番下に見出しの一覧が出てます。横スクロールできるようになっているので、ズラっと出てきます。
上手くすればこんな感じで検索結果に反映される「かも」しれません。
なんちゅーか、SEOって言いますけど、それは自分のためだと思ってる人多すぎ説。
検索結果って閲覧者のためのものだべ (´・ω・`)
検索した人にとって見出しが表示されていれば直接ジャンプできて便利なんじゃないかな、と思います。

絶対表示される、というわけではないですよ。全てはGoogleの腹一つです。
なんとなくのアルゴリズムはこうかな〜と思う(あくまでも推測ですからあまりアテにしないよう)

  • 記事タイトルと同じキーワードが含まれている
  • 必要な見出し数は5以上?

まとめ

導入のサポートに関しては私のテンプレートをご利用の方のみ、とさせてくださいね。
スクリプト製作者様へはありがとうございます

Vanilla JSで使いたい方へ(上級者向け)

テンプレート内にjQueryを導入していない方向け、ページスピードに配慮したい方向けです。
(jQueryコードでご紹介した作者様とは関わりのない内容です)

基本JS

!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);

上記がベースとなる内容で、特に任意修正する箇所はありません。
「目次に戻る」リンクですが、目次無しで見出しを利用したい時でも戻るリンクが表示されてしまい、ちょっと逆に使い勝手が悪いなぁという気がしますので 「目次に戻る」リンクの自動表示を削除しています
また、スムーススクロールの内容も入れていません(後述)

実行コード

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);
}

上記2つのコードの導入に関してはいろんなやり方があります。

  1. 基本コードは外部ファイル化 + 実行コードをhtml内にベタ貼り
  2. 基本コード + 実行コード 共にhtml内にベタ貼り
  3. 基本コード + 実行コード 共に外部ファイル化してasyncを指定

スピードを考慮するなら 3 のasync指定外部ファイル化です。
この方法を取るならばページ内スクロール用JSを追加する必要も生じません。

1, 2 の方法を選択するケースはオプション変更を行う可能性が高い場合です。
実行コード内の「selector」「scope」「overwrite」「prefix」がそれにあたります。
サンプルコードは基本コード内のデフォルト設定と同じにしてあります。

書き換える可能性があるとすれば、「selector」はテンプレートの仕様をよく確認し、記事内で使える見出しレベルがh1からなのかh2からなのかあるいはh3からなのかに応じて変更します(デフォルトはh2)
例えばh1からの使用ならばh2の前にh1を追加、h3からの使用ならばh2を削除、といった具合です。

他に書き換えの可能性がある箇所、必ずチェックしなければいけない項目は「scope」です。
こちらもテンプレート内のtoc設置箇所に与えられているid名またはclass名に変更します。
私のテンプレートの場合ほとんどが #inner-contents か .inner-contents のいずれかですが絶対ではありません。

「prefix」は見出しに自動で与えられる規則性のあるid名です。
デフォルトは chapter で、見出しには chapter-0, chapter-1, chapter-2... と昇順でid名が付加されます。
例えばprefixを toc に変更すると、toc-0, toc-1, toc-2... と上書きが行われます(overwriteが「true」に指定されていることが条件です)

推奨は 3 の方法なので1, 2 の手順は省略して一つのファイルにまとめる方法をこれから記しますが、テンプレート変更した場合にはオプション変更の必要が生じる可能性があります。
その変更が生じた場合 ファイルの再作成 という作業が発生することを事前にお伝えしておきます。

実行コード内で変更すべき箇所をしっかり確認した上で 圧縮 を行い、基本コードの直下に記載。
一つのファイルとして .js 拡張子で保存 → FC2ブログにアップロード。

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

テンプレート内にあるスムーススクロール関連の記述よりも「上」に記載するようにしてください。
「目次へ戻る」のリンクが必要な方は、必要箇所に

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

など、一例ですがhtmlを手打ちで記載してください。辞書登録からの呼び出しが便利です。

toc + 画像遅延読み込み(lazyloading)のスクロール位置ズレ対策については以下のリンク先を参照のこと。

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ

正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。 ...

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

48 COMMENTS

There are no comments yet.

べえ  

Velonica でメニューに隠れる

 こんにちは。面白いですね ^^

 早速使わせていただいたのですが、表記の通りジャンプ先の見出しがナビゲーションバーで隠れる現象が出ます。どのあたりを直したらよいのでしょう?
https://beebaku.blog.fc2.com/blog-entry-2065.html

 また、ナチュログでも導入させていただいたのですが、こちらでも、ナチュログのメニューバーが邪魔をして、見出しが見えなくなります。また、目次に番号が振り当てられません。サポート外だとは思いますが、ヒントをいただけたらありがたいです。
http://campovens.naturum.ne.jp/e2944424.html

2017/10/20 (Fri) 21:31

Akira  

To べえさん

べえさん、こんばんは (●'0'●)/

Velonicaの場合はスムーススクロールに係る内容を以下の手順通り修正してください。
$('#toc a,.back-toc a')を目印に、これを含み</script>のすぐ手前のセミコロンまで(セミコロン含む)を削除、同じ位置に以下の内容を追加。

var o=50;$('#toc a,.back-toc a').on('click',function(){var t=$(this).attr('href'),e=$('#'==t||''==t?'html':t),p=e.offset().top-o;return $('html,body').animate({scrollTop:p},800,'swing'),!1})});

-------
ナチュログの方はご自身で仰る通りサポート外ですのでヒントだけ。
上記コード内の赤い数字はナビゲーションの縦幅です。
番号振り分けやインデントについては対象範囲内に存在するol要素に対するCSSのリセットか直接指定をご確認ください。

-------
毎回「ナビゲーションリンクが下に繰り越さないよう調整してください」というお願いをしていますが、スクロール時の頭出しが狂うことも理由の一つです。
固定ナビの場合には特別な処理が必要です。

よろしくお願いします。

2017/10/20 (Fri) 23:50

べえ  

ありがとうございます。

Velonica は思い通りになりました。ありがとうございます ^^

ナチュログの方はもうちょっと勉強してみます。

2017/10/21 (Sat) 00:20

Akira  

To べえさん

ol.chapter {
padding-left: 40px;
list-style-type: decimal;
}

これでいけるかもしれないし、いけないかもしれません。
上記はol要素の「初期値」ですので、特に何も指定しない限り勝手にそうなります。
マーカーは番号、左側に40pxの空白あり、が初期値。
初期値適用にならないということは、リセットないし記事範囲のアウトラインに存在するol要素に対し何らかの指定があるはずです。

できるかもしれないしできないかもしれない、というのは、指定の仕方によって強制力が変わりますので、該当ページのolについてのCSS情報を確認しなければなんとも言えません。
頑張って ╭( ・ㅂ・)و

2017/10/21 (Sat) 00:36

べえ  

Akiraさんありがとうございます ^^v

一発で動きました。本当にありがとうございます。

2017/10/21 (Sat) 01:28

-  

管理人のみ閲覧できます

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

2017/10/21 (Sat) 21:07

Akira  

To べえさん

こんばんは (●'0'●)/

複雑な指定でなかったようですね。
お疲れ様でした

2017/10/21 (Sat) 21:53

Akira  

To Pianissimo目次スクリプトの件 内緒さん

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

Pianissimoの記事内で利用できる見出しはh3からなんです。
最近のテンプレートは個別記事のタイトルをh1にしているので「h2から」なんですが、Pianissimoの場合は「タイトルがh2、記事内見出しはh3から」という仕様です。
対処としては見出しレベルを変更されるか、個別記事のタイトルをh2からh1に昇格するかです。
タイトル昇格の場合にはPianissimoは個別記事のブログタイトル降格(h1 → div)をしていませんので、h1が重複することになります。
html5のルールではエラーにはなりませんが、バリデートで警告は受けるかもしれません。
他テンプレートと内容を照らし合わせの上変更して頂くのも良いかと思いますが、内容的にはちょっと難しいかもです。
手っ取り早いのは記事内の見出しを修正する方かな、と思います。

2017/10/21 (Sat) 22:25

-  

管理人のみ閲覧できます

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

2017/10/21 (Sat) 22:38

Akira  

To Pianissimo目次スクリプトの件 内緒さん(完了のご報告)

いえいえ。私が不親切でした。
テンプレート説明記事に使える見出しの位を記せば済んだ話しです。
以後留意したいと思います。

いつもありがとうございます

2017/10/21 (Sat) 22:48

黒猫  

おはようございます(^^)

数点聞きたい事があります。記事の内容をそのまま行っても表示されませんでした。

①Colonyの場合は#inner-contentsという部分は書き換えが必要ですか?

②私の場合は個別記事ページは記事タイトルをh1、h2に置き換えています(やり方が正しいまでは分かりませんが)。こうした場合でも記事内で使用出来る見出しはh3からですか?

③h2タグは以前教えていただいた「<h2 style="border-left:10px solid #0000cd; border-bottom:2px solid #0000cd; padding-left:10px; font-weight: bold; font-size: 18px;">見出し</h2>」
このタグを使用しています。
そしてh3は「<h3 style="margin:8px 0; padding: 3px 8px;background:#0000cd; color:#ffffff;">見出し</h3>」を使用しています。
こういう形式でh2やh3を使用した場合でも目次は表示されますか?


表示されない原因は①②③のどれかだとは思っているのですが私にはさっぱり分かりません(>_<)

ご教授願いますm(_ _)m

2017/10/22 (Sun) 07:31

Akira  

To 黒猫さん

お早うございます (●'0'●)/

黒猫さんの構成を拝見すると、個別記事ではブログタイトルを飛ばして(削除して)、h1として記事タイトルを掲載。
そして記事のアウトラインにはh2で再度記事タイトルを掲載(ちょっこれは好ましくないと思いますが)
記事内での見出しはやはり同格のh2から、という形ですね。

黒猫さんの記事の書き方の場合、範囲指定は
.contents
です。
.contentsは本文と追記を包括していますので、#inner-contentsではなく.contentsを指定してください。

本来は
記事全体の見出しがh2になっており、そこから降格していくのが望ましい気がします(つまり記事内容はh3から)が、そこはお任せします。

2017/10/22 (Sun) 10:05

黒猫  

ありがとうございますm(_ _)m

.contentsに変える事によって目次を入れる事が出来ました(^^)
ありがとうございます(^^)

>個別記事ではブログタイトルを飛ばして(削除して)、h1として記事タイトルを掲載。
そして記事のアウトラインにはh2で再度記事タイトルを掲載(ちょっこれは好ましくないと思いますが)

この部分は自分でもあまり良くないとは思っています。ただ正しいやり方がよく分かっていません(>_<)

最近のAkiraさんのテンプレートだと記事タイトルがh1になってたりパンくずリストも付いているので本当はこういった仕様の物を使いたいんですがColonyの構成が気に入っているのでなかなか変えられないんですよね(^_^;

最近取り入れた仕様でColonyみたいなテンプレートがあれば変更したいとは思っています。

頭の片隅にでも入れて頂ければ幸いです(^^)

2017/10/22 (Sun) 13:34

Akira  

To 黒猫さん

見出しの使い方は難しいですよね。
htmlの構文ルールとSEOとではまた少し違いますし。

ところで早く独自ドメインもSSLが適用されると良いですね。
さっき公式覗いたら怒ってる人居た(笑)

2017/10/22 (Sun) 15:58

黒猫  

No title

独自ドメインの場合は本当にSSL化が遅いですね(>_<)
今年中に実装されるか怪しい気がしてきました(・_・;)

あともう1つ聞きたい事があります。

目次の見出し部分をクリックすると見出しの部分まで飛べるのですがちょうど見出しがグローバルナビゲーションで隠れてしまいます。

同じ質問内容が上でもありましたがテンプレートの種類が違うので同じ様にすれば良いのか分からなくて困っています。

ご教授願いますm(_ _)m

2017/10/22 (Sun) 16:30

Akira  

To 黒猫さん

JS内容は同じです。
赤字の数値を46pxに変更してください。
ただし黒猫さんの場合はナビゲーションが本来46pxを維持しなければいけないところ、カスタマイズしたことによってスマホでは46pxを超過します。
(リンクテキストが複数行になってしまうため)
ですからどのみちスマホではズレます。
以前からお伝えしようか迷いましたが、恐らくご自身でわかっていらっしゃるだろうと。
なので伝えていません (´・ω・`)

----- 追記

余談ですが、画像の圧縮はサイズを小さくするのではなく容量のみ削減にした方が良いですよ。
横1000px程度は維持しておかないと、今後出てくるスマホは全て高解像度ディスプレイですし、パソコンも高解像度が増えていきます。
300pxの画像をぼやけることなく表示させるためには原寸で600px必要です。
スマホの最小画面だけ考えるなら横600pxでも良いのですが、iPhoneのplus系は414pxですので単純に倍の828px必要。iPhone8, iPhoneXも414pxです。
パソコンだとさらに厳しいかもしれません。
もちろん画面幅に対し100%以下にするのならばこの限りではありませんが。
なので私はいつも「サイズ縮小」ではなく「容量削減」をおすすめしています。

2017/10/22 (Sun) 22:29

黒猫  

度々すいませんm(_ _)m

画像の幅について勉強になりました(^^)

あとスマホがズレているというのは気づいていませんでした(^-^;
ガラケー民なので(>_<)
この件については後回しにします。

とりあえず上の修正内容を読んだのですがColonyの記述と少し違う様なので分からない部分があります。

混乱を避ける為にコピペします!
(記事通りa[href^="#"]:not(#toc a,.back-toc a)に修正済みです)

<script>$(function(){$(window).scroll(function(){$(this).scrollTop()>200?$('#pagetop').fadeIn('slow'):$('#pagetop').fadeOut('slow'),$(this).scrollTop()>200?$('#pagemiddle,#pagemiddle-sp').fadeIn('slow'):$('#pagemiddle,#pagemiddle-sp').fadeOut('slow'),$(this).scrollTop()>$(document).height()-screen.height?$('#pagebottom').fadeOut('slow'):$('#pagebottom').fadeIn('slow')})}),$(function(){var o=46;$('a[href^="#"]:not(#toc a,.back-toc a)').click(function(){var t=$(this).attr('href'),e=$('#'==t||''==t?'html':t),p=e.offset().top-o;return $('html,body').animate({scrollTop:p},800,'swing'),!1})});</script>

これをどう様に修正すればよいですか?

度々すいません、ご教授願いますm(_ _)m

2017/10/23 (Mon) 07:09

Akira  

To 黒猫さん

あとはこのページ内にあるtoc用JSのスクロール部分の変更だけですよ。
記事の方に追記しますね。

----
追記しました。
コメント欄の内容とは若干違いますので、コメント欄の方は忘れてください。
(コメント欄の方は差し替えの指定箇所をわかりやすく書きましたが、記事内では最終記号の厳密な区別を行っています)

2017/10/23 (Mon) 08:52

黒猫  

ありがとうございます(^^)

あとは数字を調整するだけですね。

スマホのズレに関してはちょっと色々と考えてみます(^^)

この目次の作り方の場合は見出しタグさえ入れておけば過去記事も簡単に入れる事が出来ていいですよね(^^)

とても助かりましたm(_ _)m

2017/10/23 (Mon) 12:52

Akira  

To 黒猫さん

今拝見したら指定が82pxになってますが大丈夫ですかね。
黒猫さんがそれでOKであれば私はもちろん構いません。
ナビの直下にならないよう余白(余幅)を入れたという意味だと解釈しますが一応お伝えしておくと、黒猫さんの場合は要素間・テキスト間を<br>で調整していますので、line-height指定が変更になると再調整の必要が出てきます。
(brはline-heightの影響を受けるため)
その点だけ頭の片隅に置いてくださいね。
お疲れ様でした

2017/10/23 (Mon) 13:57

黒猫  

ありがとうございます(^^)

82にしたのは最初スマホの事を考えてわざと大きくしました。ただ文字数を調整したので今は46に戻しても大丈夫だとは思いますがこの余白は違和感がないのでこのままにしておきます。(気まぐれで修正するかもしれないですが)

brに関しては色々と勉強します(^^)

それと新しい記事でスマホ画面でどう見えるか分かるサイトは2つともブクマしておきました(^^)

何から何までありがとうございましたm(_ _)m

2017/10/23 (Mon) 18:45

Akira  

To 黒猫さん(完了のご報告)

了解ですー。
お疲れ様でした

2017/10/23 (Mon) 22:56

べえ  

Mocha で上手く動きませんでした

ハロウィン用にMochaテンプレートを用意していたのですが、
上手く動きませんでした。

テンプレートの
<div class="inner-contents">を
<div id="inner-contents">
に変更して、

ol.chapter {
padding-left: 40px;
list-style-type: decimal;
}

を入れたら動きました。

2017/10/24 (Tue) 01:09

Akira  

To べえさん

> テンプレートの
<div class="inner-contents">を
<div id="inner-contents">
に変更して〜

これは原則として「やってはいけないこと」です。
Mochaの場合の指定アウトラインは
#inner-contents でなく
.inner-contents です。
こういった場合にはテンプレートの方を変更してしまうのではなく、JSコードの方を変更してください。
idとclassは意味があって使い分けをします。
idはページ内で単一としてしか指定できません。つまり重複不可。
classはページ内に複数設定可能ですが、その意味するところは「他の部位ともデザインを共有する」ことになります。
ですから idからclassへの変更も、その逆も、ページ内容(html)を全て把握した上で行う必要があります。
結論から言うとMochaの場合は変更しても問題は出ませんが、それは「たまたま」そうであっただけ、というのは知っておく必要があります。
問題が出ないといっても .inner-contents として与えている既存装飾は全て失われています。
#inner-contents に変更したのですから .inner-contents への指定は無効です。

-------- 問題点
JSコード内のhの位の指定がずれています。
べえさんの場合は記事内見出しがh3からですので、雛形のh2の部位は全てh3への書き直しが必要です。
その他の部位も雛形からひとつづつ降格させた内容にしなければいけません。
わかりますかね?
雛形で h2 だったところは全て h3 に。
h3 だったところはすべて h4 に。
雛形とは数字がひとつづつずらさないとだめですよ。
この作業ができていないためにhtml構造もエラーですし、ol要素が入れ子状態になっているので全体が右に寄ってますよね。
これは本来左のpaddingで40pxの余白であるところが、入れ子になって実際は80pxの余白になっているためです。

記事はひとつしかチェックしていませんが、全ページで見出しの位がバラバラだと上手く情報の取得ができません。
これはべえさんの問題というよりも、見出しのhタグを利用すればつきまとう問題です。
仮にべえさんが今後「記事タイトルはh1」とうテンプレートに変更された場合(私の最近のものはそうなってます)、記事内で使える見出しが「h2から」に変更となります。
そうなると全書き換えか、過去記事については諦めるかです ^^;

あと、見出しの装飾(dog ear)を移植されていますが、Mochaの背景は「ブラウン」ですので白背景用のCSSをそのまま移植したのでは耳の部分がマッチしません。
コメントが付いているはずですので
(same color of the background とかなんとか。たぶん)
その部分はMochaの記事背景色に変更してくださいね。

よろしくお願いします。

2017/10/24 (Tue) 08:41

-  

管理人のみ閲覧できます

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

2017/10/24 (Tue) 09:09

Akira  

To 目次アイコン変更の件 内緒さん

ありがとうございます

> アイコンじゃなく、例えば 「目次」 というような文字にしたい〜

#toc:before
への指定で
content: "\f0ca";


content: "目次";

に変更。
そして
font: 1em/3em 'FontAwesome';


font: 1em/3em '游ゴシック', 'YuGothic', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo';

に変更してください。
よろしくお願いします (●'0'●)/

------- 追記
ちょっと今気になったのですが。
カスタマイズで記事タイトルをh1としてブログタイトルのあった箇所に挿入していますよね。
そしてh2にブログタイトル。
記事のアウトライン内にもページh1と同じ内容がh2として記載されている。
これSEO上は好ましくないと思います。
重複キーワードコンテンツですね。
なんだろう。最近見かけるけれども流行ってるんだろうか ^^;

h1やh2といった見出しの位重複はhtml上で禁則ではありません(ただしhtml5のみ)
この構成だとブログタイトルと記事タイトルが同格になってますので(アウトラインの性質上)、

* ブログタイトルが「健康日記」の場合の例

・健康の重要性について --- h1
 ・健康日記 --- h2
 ・健康の重要性について --- h2
  ・日々のトレーニング --- h3
  ・食生活 --- h3
   ・緑黄色野菜 --- h4
   ・カロリー制限 --- h4
  ・健康器具 --- h3

こんな感じですよね。
好ましい見出し構成というのは

・健康の重要性について --- h1
 ・日々のトレーニング --- h2
 ・食生活 --- h2
  ・緑黄色野菜 --- h3
  ・カロリー制限 --- h3
 ・健康器具 --- h2

リスクの高いものではありませんが、h1とh2が同じというのは好ましくありませんのでお知らせしておきますね。

2017/10/24 (Tue) 14:57

-  

管理人のみ閲覧できます

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

2017/10/24 (Tue) 18:56

べえ  

修正しました

ありがとうございます。修正しました。

JSの見出しは修正したはずなんですが、カットアンドトライを
している最中におかしくなったようです ^^;; いつまでも、
気が付かない可能性が大でした。
ご指摘ありがとうございました。

VelonicaやMochaはh3からですよね。最近のh2から使える
テンプレートに早めの変更を考えてみます。

2017/10/24 (Tue) 21:52

Akira  

To 目次アイコン変更の件 内緒さん(完了のご報告)

アイコンについては完了したということで、お疲れ様でした。

記事タイトルh1の件は、「アウトラインの構成」にも関わっています。
* アウトライン = 定義のまとまりを示すグループ

これまでだとページ全体にh1としてブログタイトル、その中に独立可能なコンテンツとしてarticle、その中にページ全体から見て1つ下がったh2を記事タイトル。
つまりarticleの中の最上位としてh2ですよね。それがAlternativeのデフォルトです。

そこから少し見方を変えて、articleというのは元々独立しても成り立つコンテンツを意味しますので、記事内容として適切なアウトラインですよね。
そのアウトラインの中で最上位のh1を与えるのはこれもやはり適切です。
その場合、ページ内にarticleがあり、その見出しはh1である、つまり最も重要な意味を持つアウトラインでる、という感じになります。
わかるかな ^^;

ページ全体で見るか、ページ内のarticleにフォーカスするか、の違いです。
後者を取るならば、articleの「外」つまり現状で上部に大きく表示している「記事タイトル(h1)」そのすぐ下の「ブログタイトル(h2)」このふたつは無理に見出しを適用する必要は無いです。
両者共に div にしておけば良いと思いますよ。

<body> -----------------------------
<div>記事タイトル</div>
<div>ブログタイトル</div>

<article> -----------------------
<header>
<h1>記事タイトル</h1>
</header>
<div>記事内容</div>
<footer>フッター情報</footer>
</article> ----------------------

</body> -----------------------------

こういう感じですね。
articleの中にh1がある、というのはわかりやすくかつ妥当だと思います。
絶対とは言いませんが、Google系サービスのページも上記のような構成が多いです。
全部ではないです。一部サービスは

<body> -----------------------------
<h1>サービス名</h1>

<article> -----------------------
<header>
<h2>記事タイトル</h2>
</header>
<div>記事内容</div>
<footer>フッター情報</footer>
</article> ----------------------

</body> -----------------------------

こうですね。つまりAltrenativeのデフォルトと同じ構成。
つか、なんでこうも説明が下手なのか((((笑)
力不足で申し訳ないです ( ̄∀ ̄;)


---- 追記
他の方宛ですが、下のコメントも見て頂くと良いかもしんない。
下のリンク先がまさにこれに関する議論なので、英語ですがお時間あれば目を通してみるのも良いかと思います。

2017/10/25 (Wed) 10:31

Akira  

To べえさん

お疲れ様です。

記事タイトルがh1になっているからといってSEOでものすごい効果を発揮するわけではありませんので、最重要課題ってわけでもないですよ(と私は思う)
Googleは「h1の操作なんてほとんど何の効果もない。昔からそうです。」と明言してます。
でもBingは重要視しているらしい。

https://www.webmasterworld.com/google/4156039.htm

英語なんでアレですけども、
「操作する人間が多いので指針に使わなくなったのさ。」みたいなことが書いてあります。

なんかもうお守り的な感じですよね (´・ω・`)
正しくhtmlを書いて、正しい位置に正しい見出しを使って、SEOを操作していると疑われないようにする、で良いと思います。
ただ「これはダメ」というのは「歯抜け」ですよね。
h1からいきなりh3とか。
そこは気をつけるところかな。たぶん(笑)

------ ここからべえさんの前にコメント頂いた内緒さん宛も含む内容です
結局はアウトライン構成が正しいか、それに沿った見出しの付け方をしているか、というのが大事なんだと思います。
「記事タイトルがh1の方が良い」ではなくて、「記事タイトルをh1にするのに適正なアウトライン構成はどうなのか」こっちの方が重要というか。
なので闇雲に「記事タイトルにはh1」は間違いだと思うんですよね (´・ω・`)
やってしまう方が多いのだけれど。
私も切り替えをしているわけですが、単純に見出しの位を変えているわけではなくて、htmlの構成も変えてるんですよね。
ただこれ私が啓蒙したところでたぶん効力無いと思うので基本的にスルーしてる ^^;
ご質問が届き、理解力が高そうな方にだけ伝えてるというか。
ちょっと失礼な話しだけど(笑)

2017/10/25 (Wed) 10:43

-  

管理人のみ閲覧できます

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

2017/10/25 (Wed) 11:46

-  

管理人のみ閲覧できます

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

2017/10/25 (Wed) 19:57

Akira  

To h1の件 内緒さん

こんにちは (o'ω')ノ

なかなか難しいですよね (´・ω・`)
私も「100%自信を持って」と言えないところがなんとも… ( ̄∀ ̄;)
こちらこそありがとうございます

2017/10/26 (Thu) 09:44

Akira  

To 目次スクリプトが動かない件 内緒さん

こんにちは。お疲れ様です。

> なぜ動かないのかわかりません〜

緑の部位は 必ずチェック及び必要があれば修正が要ります。

と本文中に注意書きをしていますが、この修正をしていないからです。
Mochaの場合は #inner-contents ではなく .inner-contents です。
この部位はどのテンプレートもみな同じであるはずの無い部位ですので、テンプレート毎にしっかり確認しないと動きません。

雛形中に #inner-contents を全て .inner-contents へ書き換えてください。
CSSにも1箇所ありますのでそちらも同様です。
よろしくお願いします。

2017/10/26 (Thu) 09:48

-  

管理人のみ閲覧できます

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

2017/10/26 (Thu) 13:21

Akira  

To h1の件 内緒さん(完了のご報告)

そうですね。その方が構造としてはbetterだと思います。
お疲れ様です

2017/10/26 (Thu) 15:12

-  

管理人のみ閲覧できます

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

2017/10/26 (Thu) 16:02

Akira  

To 目次スクリプトとembedlyの関係 内緒さん

embedlyと併用するのは無理だと思った方が良いですね (´・ω・`)
embeldyの引用タイトルはh1であるだけでなくリンクにもなってます。
除外処理できそうな気がしますが、対象範囲の全見出しを抽出して番号を振るスクリプトですので順序が狂ってしまいます。
除外の場合「特定の文字列を持つ見出しを除外」という感じになりますが、FC2ブログではかなり難しい。
というかできません。各記事に別々のスクリプトを当てるわけにいきませんので。

---------
> F5連打で時々目次にembedlyが含まれなくなる時があります〜

embedlyは非同期読み込みです。スクリプトに async が付いてますよね。
JSというのは並列処理ができませんので、htmlに書いてある順序通りに単一処理を行います。
async とは「順序を護らなくて良い」「都合の良い時に処理すれば良い」「後回しでも良い」という意味ですので、一連の処理の最後に回されることもあれば、中間で処理されることも。
tocJSは内容の取得ですから、embedly処理がtocよりも後回しにされれば取得できません。
tocJSとembedlyを併用するのはその点でも無理があると思います。

対処
① ブログカードをembedlyから他のものに変更
② embedlyの見出しを display: none

追記* ごめんなさい。②の方法は不可です。

このいずれかですね。
よろしくお願いします。

2017/10/27 (Fri) 09:22

凛音  

こんばんは、今回当記事の目次スクリプトを使用したいと思い、導入してみました。
テンプレートは「Colony」をしており、当記事内のJS内容をそのまま貼り付けて使用したところ目次は問題なく表示されました。
ですが目次の上の部分の「目次」の文字が表示されません。
原因は何なのでしょうか?

2018/06/18 (Mon) 21:22
vanillaice (Akira)

Akira  

To 凛音さん

こんにちは。

原因はFont Awesome(アイコン)のバージョンが違うためです。
外部サービスやそのバージョン依存の内容を含めるべきではありませんでした。申し訳ございません。

当記事内にあるようにアイコンの表示を行うには「疑似要素」というCSSを使用する必要がありますが、現行のFont Awesomeの疑似要素利用はおすすめできません。
本記事内のCSS内容を修正しましたのでお手数ですが変更をお願いします。
アイコン表示ではなく「目次」と表記されるようになります。
文言を変更するには
#toc::before の項目の

content: "ここに表示したいテキスト";

上記の通りです。よろしくお願いします。

2018/06/19 (Tue) 13:43

凛音  

To Akiraさん

こんばんは、返信ありがとうございます!

修正されたCSSを使用したところ無事に「目次」と表記されました!

お手数をおかけしました<(_ _)>

2018/06/19 (Tue) 23:42
vanillaice (Akira)

Akira  

To 凛音さん

お返事大変遅くなりました (*_ _)
そしてお手数おかけしました。お疲れ様でした

2018/06/22 (Fri) 15:19

-  

管理人のみ閲覧できます

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

2018/07/10 (Tue) 11:14
vanillaice (Akira)

Akira  

To TOC + Lazyのスクロールずれの件 内緒さん

ありがとうございます (●'0'●)/

そうですね。ちょっと記事にしたいと思います。
ただしおすすめするわけではありません。
人によっては「大変面倒」と感じるかもです。
でも「どうしても」ということであればもうやるしかないかなぁ、と(笑)
少しお時間くださいね。よろしくお願いします。

2018/07/10 (Tue) 12:33

ロビンソン  

お世話になります。
今回の追加分にあった「目次へ戻る」のhtmlを任意で追加できるのは、大変ありがたいです。
tocを使った記事ではコメントやトラックバック関連の<h3 class="another-title">~</h3>の部分にも追加されていたので(tocには表示されなくて戻るリンクだけ)テンプレート内でh4に書き換えていました(笑)

これでデフォルトのままと言うか、余計な書き換えを減らす事が出来ました。

記事内で見出しh3を複数使う事が出来るのもメリットです。
JSはjQuery版から記事に従って「目次へ戻る」の部分を削除しました。

2018/07/13 (Fri) 23:54
vanillaice (Akira)

Akira  

To ロビンソンさん

ロビンソンさん、こんばんは (o'ω')ノ

> コメントやトラックバック関連の<h3 class="another-title">~</h3>の部分にも追加されていた〜

これは通常起こらないことなので、何かを間違えているんだと思います。
ロビンソンさんがお使いのテンプレートは記事内見出しレベルがh2からなのでh2見出しの上に出るように設定する必要がありますよ。h3ではなく。

いずれにしろ戻るリンクを削除されたのであればOKだと思います。
お疲れ様です

2018/07/14 (Sat) 00:59

ロビンソン  

To Akiraさん

>これは通常起こらないことなので、何かを間違えているんだと思います。

やっぱりそうでしたか・・・
tocの記事を拝見して導入した当時は、今のように図々しく何でも聞けなかったので(苦笑)

>お使いのテンプレートは記事内見出しレベルがh2からなのでh2見出しの上に出るように設定する必要がありますよ。h3ではなく。

ありがとうございます、早速テンプレート内のJSと記事内の見出しを修正します。

2018/07/14 (Sat) 08:52
vanillaice (Akira)

Akira  

To ロビンソンさん

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

見出しの件は面倒ですよね。
記事の書き方や方針が変わると変えなくちゃならないし。
そもそも私も「記事タイトルはh1」を最初からそうしていれば良かったと後悔しきりです。申し訳ない ( ̄∀ ̄;)

2018/07/15 (Sun) 03:19