ブログに目次を付けました

ブログを始めて３ヶ月、始めたときには目次なんて全く考えてなかったのに、他のブログを拝見していると目次が羨ましくて欲しくなりました。

けっこう簡単に付くみたい

調べてみると、目次を付けるプラグインを無料で公開してくれてる方がいて、皆さんもこのプラグインにお世話になっているみたい。

プラグインを導入

凄いものを作った上に、導入方法まで優しく説明してくれてる。😆
こうゆう凄い人っているんですね。

すぐに出来ました

試しに記事を作ってみたら目次が出来てる。
すごい！！

目次が出来た

変更したところ

色は青っぽくてSmartにピッタリ。
このままでもいいんだけど、少しだけ変更したいところがあります。

目次を中央に置きたい

スマホで見ると気にならないけど、パソコンで見ると中央に置きたくなる。

<style type='text/css'>
     .b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:3em;margin-left:auto;margin-right:auto;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}

目次を中央に

余白がおかしい

テンプレートを直したら余白も調整できたので元に戻しました。

目次は最初の見出しの前に入るのですが、序文との余白が開きすぎます。
TopとBottomのmarginを設定できるようですが、うまくいきません。

上記の「 marginTop: "20px", marginBottom: "20px" 」を削除して、CSSで直接指定したところ、思いどおりの余白になりました。

<style type='text/css'>
     .b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:3em;margin-left:auto;margin-right:auto;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}

目次の順序が狂ってる

目次を付けて今までの記事を見返すと、順番が狂ってるのが何件かあります。

解決方法が書いてあった

他の人でも起きてるみたい。
作ってくれた方のホームページに、コメントのやり取りがあって解決方法を知ることが出来ました。
やっぱり調べるって大切だ。

<div>！？

<div>タグが変なところにあると順番を認識してくれないみたいです。
試しにやってみました、右の目次はズレてますよね。

右側は順序が狂ってる

どっちでも、記事本文は正しく表示されるので、全く気づきません。

<div>タグで変なグループ化になってしまうからのようです。
これ以降はHTMLビューで、<div>タグや<p>タグを気にするようになりました。

本当に知らないことばかりだ😵
これで、目次は完成です。