ひげしげノート

格安SIMやブログカスタマイズ、健康の実体験型雑記ブログ!

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

f:id:higeshige:20190125181124j:plain

今回ははてなブログのテーマ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修正:「番号付きリストに変更」で記事以外のサイドバー内も番号付きに変わる不具合を修正。

 

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

 

僕の場合は、番号がついていると上から順番に目で追って見てくれそうというただの期待と箇条書きよりもより整理されているように感じたからです。リンクの下線を消したのはすっきりさせたかったからです。これらは好みですので色々試してみてください。

 

最後に

目次のデザインを変えるだけでページの印象がガラッと変わった気がします。(明るくなった。)デザインも大事だなあと勉強になりました。

 

さて今回この目次変更をするにあたって次のブログを参考にさせて頂きました。いろいろなデザインの目次があるので自分にあったものが見つかると思います。

はてなブログの目次のデザインカスタマイズ集 - Hatena Blog Theme Custom

 

では!