プラグインなしで任意の記事に目次を設置する方法

WordPressでブログをしているので、目次を設置するときはプラグインのTable of Contents Plusを使ってました。

しかし、すべての記事に目次が生成されてしまうのがネックでした。

今回は、プラグインなしでも任意の記事で設置する方法を見つけたのでまとめみました。

Table of Contents Plusは便利だけどすべての記事に反映されてしまう。

WordPressでブログを運営している方で、目次を設置するために使うプラグインといったらTable of Contents Plus

インストールすれば、見出しの数や種類に応じて目次を自動で作ってくれる便利なプラグインです。

ただ、すべての記事に反映されてしまうのが難点でした。

長文の記事には便利でも、短い文章の記事には不要です。

当ブログは、雑記ブログで文字数も内容によって変わったりするので非常に困っていました。

ゆめぴょんさんを参考にさせていただきました。

参考【WordPress】見出しから目次を自動生成。プラグイン不要!コピペでOK – ゆめぴょんの知恵

▲そんな時に、こちらのブログを発見してプラグインなしでも目次を設置できる方法があったので参考にさせていただきました。

ゆめぴょんさん、ありがとうございます、これでTable of Contents Plusを外せます。

自分のブログに合うようにカスタマイズ!!

ほぼ、ゆめぴょんさんの記事で掲載されているようにしました。

ただ色とデザインを当ブログストークに合うように調整しました。

#toc {
  margin: 0 auto;
  width: 100%;
  background: #ffffff;
}
#toc ul {
  border: 0;
  font-size: 9px;
  font-size: 1.0rem;
}

.mokuji_wrap {
position: relative;
border: 2px solid #888;
border-radius: 4px;
padding: 2em 2em 0;
margin: 48px auto;  
}

.mokuji {
  color: #888;
  text-align: center;
}

#toc li {
  line-height: 1.3
}

▲こんな感じにしました!!

後は目次を設置したい記事の任意の箇所に

<div id="toc"></div>

▲を挿入すれば〜

▲このように表示されます。

その度にコードを打つのが面倒な方は、AddQuicktagに登録しておくと便利です。

Table of Contents Plusのように非表示にしたり、最初は目次の文字だけ表示など細かい設定はできず、最初からドンっ!と表示されたままなのでご注意ください。

☞まとめ

こんな人にオススメ
  • WordPressでブログをしている方。
  • 記事ごとに任意で目次を表示させたい方。
  • プラグインを減らしてブログの負担を軽くしたい方。

この機会に、試してみてはいかがでしょうか!?

また、参考にさせていただいたゆめぴょんさんありがとうございます。

以上、「プラグインなしで任意の記事に目次を設置する方法」と題して記事をお送りしました!!