ひげしげノート

おすすめレビュー・格安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修正:「番号付きリストに変更」で記事以外のサイドバー内も番号付きに変わる不具合を修正。

 

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

 

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

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

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

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

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

 

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

 

補足説明

色を変更したいとき

 

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

「#(ハッシュマーク)」+「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

 

では!