【はてなブログをカスタマイズ】Brooklynの目次デザインを変更する方法

f:id:higeshige:20190125181124j:plain

今回ははてなブログのテーマBrooklynを使っていて「目次」のデザインを変えてみたいという方に向けたカスタマイズ方法をご紹介します！

↓この目次のようになります。

目次を変更する理由
Brooklynの目次カスタマイズ方法
最後に

目次を変更する理由

Brooklynのデフォルトの「目次」が少し物足りないと思っていたので、今回見た目にもわかりやすい表示になるように変更を加えることにしました。

僕の勝手な思い込みですが導入部にある「目次」はこれからはじまる記事の意気込みのようなものが伝わる部分でもあって、わくわく感が欲しかったというのも変更することにした理由です。

Brooklynの目次カスタマイズ方法

目次のカスタマイズはCSSを一度追加してしまえば終わりです。そのあとは、目次を設置したい場所でツールバーにある「目次」をクリックするだけ。

f:id:higeshige:20181227234839j:plain

コードの設置場所

コードの設置場所は管理画面の次の場所です。

「デザイン」→「カスタマイズ」→「デザインCSS」

追加するコード

下記のコードをそのままコピペでもOKですが、タイトルや色など自分の好みに合わせて自由に変更してください。

/* ==目次カスタマイズ== */
.entry-content .table-of-contents {
 position: relative;/* 相対位置 */
 font-weight: bold;/* 文字太さ */
 background: #edf5f4 !important;/*背景色（優先）*/
 padding: 0.5em 0.5em 0.5em 2em;/*ボックス内の余白*/
 border-top: 40px solid #7fdbb6;/* 枠の太さ色(上 */
 border-right: 3px solid #7fdbb6;/* 枠の太さ色(右 */
 border-bottom: 3px solid #7fdbb6;/* 枠の太さ色(下 */
 border-left: 3px solid #7fdbb6;/* 枠の太さ色(左 */
 line-height: 2.0em; /*文の行高*/
}

/* 導入タイトルの設定 */
.entry-content .table-of-contents:before {
 display: block;/* 要素を定義 */
 content: '目次';/* 導入タイトル */
 color: #fff;/* タイトルの文字色 */
 font-weight: bold;/* タイトルの文字太さ */
 font-size: 120%;/* タイトルの文字サイズ */
 position: absolute;/* 絶対位置 */
 top: -35px;
 left: 40px;
}

/* リスト先頭を算用数字に変更（箇条書きにする場合は削除） */
.table-of-contents ul,.table-of-contents li {
 list-style-type: decimal/* 算用数字 */
}

/* リンクの下線無し（下線つけたままにする場合は削除） */
.table-of-contents a {
 text-decoration:none/* リンクの下線無し */
 }

※2018.12.30修正：「番号付きリストに変更」で記事以外のサイドバー内も番号付きに変わる不具合を修正。

また後半に記載してある「番号付きリストに変更」と「リンクの下線無し」のコードは不要な方は削除してください。

リスト先頭の表示は下記のものと差し替えて変えることができます。

list-style-type: decimal; /* 算用数字 */　←上に記載してあるコード

list-style-type:disc; /* 黒丸 */

list-style-type:circle; /* 白丸 */

list-style-type:square; /* 黒四角 */

ここは好みですので色々試してみると良いと思います。