Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。

はてなブログで目次を表示するようにしました

はてなブログの設定変更履歴メモ第一弾。

ブログの記事内に目次を入れる方法です。ということで、この下にも目次を入れてみます。

目次の入れ方(公式より)

staff.hatenablog.com

記事中に以下を書けば良いとのこと。

[:contents]

記事中のヘッダータグである <h2>, <h3> などを拾ってきて目次にしてくれます。

目次のデザインは独自CSSでカスタマイズ

[:contents] だと、普通の <ul>, <li> で表示されるだけで、装飾はありません。 そこで、みなさん独自にCSSの追加などをなされているようです。

独自CSSの追記場所は、はてなブログの管理画面から以下のようにしてたどります。うーん、深ケー。

[ダッシュボード] > 左サイドバーの[デザイン] > 左サイドバーのレンチアイコン > 左サイドバーの[デザインCSS]

実際に使ったCSS

独自CSSの追加

http://bunoshi.hateblo.jp/entry/2015/10/17/102648

こちらのサイトさんで紹介されております。 CSSもそのまま乗っかっているので、丸っと使わせていただきました。 ありがたや~。

CSSは追々カスタマイズすると思うんですが、上記サイト様のデザインが気に入っているのでしばらくこのままになりそうです。

他にも、 jQuery の SmoothScroll を使う方法を紹介しているサイトもあったりと、みなさん色々工夫されているようです。 まあ、個人的にはそこまで要らないかなー、と思ってここまでやったところで終了としております。

2021/01/14 追記

紹介していたサイトさんのブログがお亡くなりになっておりました。。。なので、今現在のこのブログの CSS を掲載します。加えて、設置方法ももう少し説明を加えます。

設置方法

以下の画像のようにダッシュボードから、CSSを編集できる欄(=「デザインCSS」欄)までたどります。

[ダッシュボード] > 左サイドバーの[デザイン]

ダッシュボード → デザイン
ダッシュボード → デザイン

左サイドバーのレンチアイコン > 左サイドバーの[デザインCSS]

デザインCSSの編集
デザインCSSの編集

CSSの編集

そしたら「デザインCSS」の中身を編集します。以下のCSSを追記する(元々の記載があった場合は消さない)と、うちのブログと同じような表示になります。

/* table-of-contents */
.table-of-contents {
  border: 1px solid #e4e4e4;
  padding: 20px 10px 20px 40px;
  border-radius: 5px;
  font-size: 90%;
}
.table-of-contents:before{
  content: "目次";
  font-size: 120%;
}
.table-of-contents li{
  list-style-type: decimal;
}