はてなブログ「目次」の見た目をCSSで変える（コピペOK）

2019 2/15

2019.02.15

URL Copied!

はてなブログで「目次」を作ったときのデザインを変えるCSSを紹介しています。
リスト（箇条書き）のマークを大見出しと、中見出しで別々のマークにする方法もあります。
※2019.3.29に「目次の部分を目立たせるCSS」を追加しました。

CSSの貼り付け場所と基本事項
「目次」という言葉を追加して外枠をつける
外枠を角丸にする
リストマークを数字にする
リストマークを部分的に変える
「目次」の部分を目立たせる
はてなブログ目次CSS
- はてなブログの方へオススメ

CSSの貼り付け場所と基本事項

【PC（レスポンシブの場合）】は「カスタマイズ」→「デザインCSS」（記事上でもOK）

【スマホ】を別にしてる人は「記事」→「記事上」に<style>　～ </style>で囲んで入れる

注意事項

最初から書かれているCSSは消さないでください。
必ずテキストエディタ（メモ帳）などにバックアップを取りましょう。
カスタマイズは基本的に自己責任でお願いします。
一通りチェックしてますがテーマによっては余白の調整が必要です。

色について

各CSSで「#f7f7f7」などとしているのはカラーコードです。
同じ数字が6桁の時は省略して3桁にできるので「#000」としています。
自分のブログに合わせて調整出来ます。

参考ページ：WEB色見本原色大辞典 – HTMLカラーコード

余白について

枠内の余白はpadding:の数値で調整します。
例えば「padding: 15px 10px 15px 35px;」となっている場合は「上右下左」の数値です。左の余白を調整したければ35pxの数値を大きくします。

線の種類について

border:で線の種類、太さ、色を指定します。
線の種類は主に実線(solid)、ドット線(dotted)、破線(dashed)、二重線(double)があります。

「目次」という言葉を追加して外枠をつける

目次と分かりやすいようにします。

「こんにちは」で始まる
- はてなブログで調べた
- 挨拶と名前を書く
  - 何人でしょうか
  - 30人かな
ブログの書き出しパターン
- 時期的なことに触れる
- 質問を投げかける
記事のまとめ

CSS

/*目次のデザイン変更*/      
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */    
    color:#000;  /* 文字の色 */
}

content“目次”は他の言葉に変更可能です。

/**/で囲んだところはメモとして残せるので上記のように書いておくと便利です。

外枠を角丸にする

外枠に色をつけて角丸にするCSS。

「こんにちは」で始まる
- はてなブログで調べた
- 挨拶と名前を書く
  - 何人でしょうか
  - 30人かな
ブログの書き出しパターン
- 時期的なことに触れる
- 質問を投げかける
記事のまとめ

CSS

/*目次のデザイン変更*/       
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白（上右下左） */
    font-size: 100%;  /* 文字サイズ */
    border:solid 2px #7DB4EC;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
    border-radius:8px;/* 数字が大きいほど丸くなる */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */    
    color:#000;  /* 文字の色 */
}

border-radiusの数字が大きいほど角が丸くなります。

リストマークを数字にする

数字など他のものに変えます

「こんにちは」で始まる
- はてなブログで調べた
- 挨拶と名前を書く
  - 何人でしょうか
  - 30人かな
ブログの書き出しパターン
- 時期的なことに触れる
- 質問を投げかける
記事のまとめ

CSS

/*目次のデザイン変更*/
.table-of-contents {
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */    
    color:#000;  /* 文字の色 */
}
.table-of-contents li{
list-style-type:decimal;  /* マークの種類 */
}

list-style-typeでマークの種類を変えます。（四角）square、（小文字アルファベット）lower-latinなど様々なマークがあります。

参考ページ：【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える – サルワカ

リストマークを部分的に変える

大見出しのリストは数字と太字に、中見出しは●に、小見出しは英小文字にしました。

「こんにちは」で始まる
- はてなブログで調べた
- 挨拶と名前を書く
  - 何人でしょうか
  - 30人かな
ブログの書き出しパターン
- 時期的なことに触れる
- 質問を投げかける
記事のまとめ

CSS

/*目次のデザイン変更*/
.table-of-contents {
    margin-left: 0;
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字サイズ */
    border:dotted 1px #777; /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */
    color:#000;  /* 文字の色 */
}
/*大見出し*/
.table-of-contents li{
    font-weight:bold; /* 通常はnormal */
    list-style-type:decimal;   /* マークの種類 */
}
/*中見出し*/
.table-of-contents li ul li{
    margin-left:20px;
    font-weight:normal;    
    list-style-type:disc;
}
/*小見出し*/
.table-of-contents li ul li ul li{
    list-style-type:lower-latin;
}

何もしなければ全部に同じ効果がかかりますが、中見出し、小見出しのCSSを追加したことでマーク以外の要素も個別で変更できます。

「目次」の部分を目立たせる

「目次」のタイトル周りを目立たせたい場合のCSS。webフォント（アイコン）もつけました。

CSS

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #90caf3; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字（マーク色変更） */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  この記事の目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 0px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}