ひげしげノート

おすすめレビュー・ブログ関連・健康関連の雑記ブログです。

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

 

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

 

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

 

補足説明

色を変更したいとき

コードの中にある「#〇〇〇〇〇〇」と書かれた場所が「色」を表しています。

「#(ハッシュマーク)」+「6桁の英数字」です。

「black」や「white」などカラー名に置き換えてもOKです(この時#は不要)。

 

上のコードには次の3つの色が出てきます。

  • #edf5f4 : 枠内の背景色 (コード内に1ヵ所)
  • #7fdbb6 : 枠の色 (同じく4ヵ所)
  • #fff : 文字の色 (同じく1ヵ所)

これを自分の好みの色に変えてみましょう!

 

是非、色の参考にしてほしいサイトがありますので紹介しておきます。

WEB色見本 原色大辞典 - HTMLカラーコード

f:id:higeshige:20190415154728j:plain

 

文字の太さを変更したいとき

「目次」というタイトルと目次内の文字の太さを変更できます。

 

「font-weight」のところを次のものに置き換えると変わります。

  • font-weight: bold;/* 太文字 */
  • font-weight: normal;/* 標準太さ */

この指定がない場合は標準の太さになります。

 

タイトルを変更したいとき

上のコードではタイトルが「目次」になっています。

 

これを「タイトル」や「TITLE」など他の言葉に変更したいときは

「content」のところを次のように置き換えると変わります。

  • content: 'タイトル'/* 導入タイトル */
  • content: 'TITLE'/* 導入タイトル */

 

不要なものは削除しましょう

コードの中にある「/~~~/」の部分は説明書きだけのためにあります。

「/~~~/」で括るとコードとして認識されないのでメモに便利なんです。

要らなくても構わないという人は削除しましょう。

 

最後に

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

 

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

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

 

では!