【サンプルあり】Bloggerで目次を自動生成する方法

やっぱり目次はあったほうが、SEO的にも...ね?
この記事ではBloggerで目次を自動生成する方法をご紹介します。

いやてか何番煎じだよって感じですが、数時間前の自分は何を考えてたのか他の人がこういうの作ってくれてるはずだっていうのに気付かなかったんですよね。
でもまあ作っちゃったので一応記事にしときます。
この記事は目次つけるほど長くないのでつけてないんですけどね。

さっそく目次を追加しよう

はい、特に書くこともそんなにないので早速本題です。
まずはメインのコードを記事に追加します。

始めに、目次を追加したい記事の編集画面を開いてHTML表示にしてください。
そして、目次を設置したい場所に
<div id="toc">
<span style="font-size: large;"><b>目次</b></span><br>
</div>
を追加してください。

そして最後に、HTMLコードの末尾に
<script src="https://diawel.github.io/blogger-tocer/script.js"></script>
を追加して更新します。

とりあえずこれで目次が追加されたかと思います。
ただこのままだとめっちゃダサいです。
(気になる方は一度記事を開いてみてください)

ということで、次はデザインの変更です。

デザインを変更しよう

デザインはページごとに設定する必要がありません。
それではまず、Bloggerの管理画面の左側のメニューから「テーマ」を選択して「カスタマイズ」を開いてください。
そして「上級者向け」の一番下にある「CSSを追加」を開きます。
開いたら「カスタムCSSを追加」の欄に
#toc{
  display: inline-block;
  margin: 8px 0;
  padding: 14px;
  box-shadow: 0 1px 2px gray;
}
と入力して「ブログに適用」をクリックします。

とりあえず完成

とりあえずこれで目次を自動生成するっていう目的は達成できたかと思います。
ただ今回は完全に自分用に作ったので、環境によってはうまくいかなかったりするかもしれません。
ただ本当に自分用なので、機能はめちゃくちゃシンプルです。
こんなのに権利とか主張する気は全くないので、必要に応じて自由に改変していただいて結構です。

コメント