2017-11-09

はてなブログに「目次記法」があることにいまさら気付いた

WordPress で作られたブログには、よく「目次」のリンクがあり、コレが便利だなーと思っていたのだけど、はてなブログにも「目次記法」というモノがあり、コレで目次を自動生成してくれることを最近知った。

よく見たら記事編集画面のツールバーに生成ボタンあるじゃん…。

公式の解説記事

「はてなブログ開発ブログ」に、この目次記法の紹介記事があった。

参考：記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ

目次のインデントも可能

目次は見出しのレベルに応じて自動的にインデントされる。

自分のブログだと Markdown 記法を使っていて、トップレベルの見出しは「#」、つまり h1 要素で作成している。そして先程の「目次のインデントも可能」という見出しは「## = h2 要素」で作成した。コレも目次記法の中では正しくインデントされているであろう。

目次記法の配置方法

目次方法を配置するには、以下のように書くだけ。

[:contents]

これで、ul.table-of-contents が生成され、見出しに応じたリストが生成される。

目次記法のデザイン

通常だと、単なる ul 要素でレイアウトされ、「目次」みたいな見出しも付かない。逆に「目次」という文字を見出しレベルで書いてしまうと、コレも目次記法のリストの中に書かれてしまう。

そこで、CSS でデザインを整えつつ、「目次」という小見出しを入れてみようと思う。

/* 目次記法 */
.table-of-contents {
  display: inline-block;
  margin: 1em 0 !important;
  padding: 1em 1.5em 1em 2em !important;
  border: 1px solid #ccc;
  background: #f3f3f3;
}

/* 目次記法の小見出しを作る */
.table-of-contents:before {
  display: block;
  content: "目次";
  margin-bottom: 1em;
  font-weight: bold;
  text-align: center;
}

このサイトで付けている CSS はこんな感じ。ul.table-of-contents に display: inline-block を付けて、border が幅いっぱいに付かないようにしてやると、WordPress でもよく見る目次記法っぽくなる。

あとは :before 擬似要素で「目次」というテキストを入れてやれば OK。

以上

JavaScript を組み合わせれば目次リストの開閉もできそうだが、とりあえず今はいいかな。