［はてなブログ］の「目次」の見た目を変える！CSSをコピぺでカスタマイズ!

2020 11/09

2020.11.09 2021.04.21

URL Copied!

What’s up?　Lucyです。はてなブログで「見出し」「目次」の表示の仕方、その設定方法の疑問が解決しました！

コードを貼り付ける場所の確認

はてなブログにログインをし、アカウント右側にあるをクリックして「デザイン」を選択します。

はてなブログにログインし、デザインを選択する — はてなブログにログインをし、アカウント右側にあるをクリックして「デザイン」を選択

画面が切り替わったら、カスタマイズ（工具のアイコン）→デザインCSSの順に選択してください。

デザインCSSの枠をクリックすると、コードが書き込める状態になります。ここの一番下の行にカーソルを置き、コードを貼り付けてください。

書きこむ場所はデザインCSSの一番した — デザインCSSの枠の中にコードを入力していきます

これから、はてなブログで作業をしていきますが、「変更を保存する」を押すとボタンを押した途端にサイト情報が更新されてしまいます。もともとのhtmlやcssの記述がある場合は、念のためバックアップを取っておいてください。また、元から入っているCSSコードは消さないでください

はてなブログは、無料版だと3個までのブログを開設できます。はてなブログProでは10個までのブログを開設可能です。カスタマイズ練習用のブログを開設し、「公開設定」を「自分のみ」にすれば、カスタマイズのCSSの確認用のブログを作ることができます。練習用のブログであれば、万が一CSSの書き方を間違えても、「どこを間違えたのか？」「こうやって書きこむと、どうなるのかな？」とCSSへの理解度も深まると思います。私も練習用のブログを作ってカスタマイズのCSSを確認しています。

目次のカスタマイズ

余白の調整について

枠内の余白はpadding:の数値で調整ができます。例えば、「padding: 15px 10px 15px 35px;」となっていれば、「上右下左」の余白の数値となっています。余白を調整したい時は、どこの余白を調整するのか確認後、その場所を示すこれらの数字を変更してみてください

色について

各CSSで　#f7f7f7　と、＃から始まる番号は、色の番号です。同じ数字が6ケタの時は３ケタに省略が可能で、3ケタで表記できます。例：「＃000」

原色大辞典

WEB色見本原色大辞典 – HTMLカラーコード色の名前とカラーコードが一目でわかるWEB色見本

線の種類について

目次を囲っている線の種類、太さ、色を指定することができます。主な線の種類は、実線(solid)、ドット線(dotted)、破線(dashed)、二重線(double)などがあります。

下の「目次デザイン変更（基本パターン）CSSコードでは、5行目の　border: の部分となります。

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

デザインCSSの一番下に下記のコードを追加してください。

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

追加をしたら、忘れずに「変更を保存する」をクリックしてください」。

デザインCSSに書きこんだら、必ず変更を保存するをクリックする — 忘れずに「変更を保存する」をクリックしてください

すると、「目次」という文字が表示されました！

目次という言葉が付いて、外枠が設定されました — 「目次」という言葉が付いて、外枠はドット線になっています！（ちょっと薄くて分かりにくいですが。。）

Lucy

「目次」を「この記事の目次」と表示させたい！

そんな時は、9行目：content: “目次”　の”目次“部分を好きな言葉に書き換えて下さい。

「目次」「この記事の目次」だったり「table of contents」など表記の仕方はいろいとありますね！

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

はてなブログのテーマによっては、テンプレートのデザインと追加したCSSデザインが影響して、CSSを書き換えても見た目が変更できない事があるかもしれません。私は初めて「目次」の見た目のカスタマイズを行った際に、うまく目次のデザインが変更できませんでした。その為、下記のサイトを参考に、それぞれの見た目を変更したいクラスを1つづつ　.entry-content　を記入して指定してみることにしました。

上のCSSでいうと、2行目～6行目は「目次の枠」（目次の背景色だったり、目次の余白設定など）を指定するコードです。（だと思ってます。。）

8行目～12行目は「目次」という文字をどんなように表示させるか（文字の大きさ、文字の色等）を指定するコードです。（だと思ってます。。）

Lucy

※超初心者の為、理解が違っていたらごめんなさい。

SANGOカスタマイズガイド

【CSS】見出しやリストのカスタマイズ時にトップページにまで反映されてしまう時の対処法見出しやリスト（箇条書き）などをCSSでカスタマイズしようとすると、記事内だけではなくトップページにまで反映されてしまう場合があります。目次原因対処法：子孫セレク…

外枠のデザインを変更する

試しに下記の点を変更し、目次のデザインを変更してみたいと思います。

5行目の　border:dotted　のdotted部分をdouble に変更します。
5行目の　1px #777　を5pxに　色は#c71585 に変更します。
6行目の　background:#f7f7f7;の #f7f7f7 部分を　#e6e6fa　に変更します
9行目の　content: “目次“　を　この記事の目次　に変更します。

上の指示を表示したデザインCSSのコードはこちら。

/*目次のデザイン変更*/      
.entry-content .table-of-contents {
    padding: 10px 15px 10px 25px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:double 5px #c71585;  /* 線の種類と色 */
    background:#e6e6fa;  /* 背景 */
}
.entry-content .table-of-contents:before {
    content: "この記事の目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */    
    color:#4b0082;  /* 文字の色 */
    font-color:#8b0000;  /* 目次の中の見出し文字の色 */
}

上記をはてなブログ⇒デザインカスタマイズ⇒デザインCSSに書きこみ、変更を保存すると、こんな感じに目次のデザインが変更されました！

お試しで変更した目次 — 分かりやすい色で試した為、全体のデザインがイマイチなのはご了承ください(笑)

Lucy

なるほど！変更したいCSSのコードを書き換えれば、目次の外枠デザインが変更できるのね！

外枠を角丸にする

border-radius: 8px;/* 数字が大きいほど丸くなる */

上記のCSSを、この記事の一番最初にある目次のデザイン変更　（基本パターン）の6行目の次の行に挿入してください。

border-radiusを追加することで外枠の角を丸くすることが出来ます。数字の部分を大きくすると、より丸みが大きくなります。

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

リストのマークを記号にする

はてなブログのテーマによっては、もともとの設定でリストのマークが数字だったり、記号だったりと、それぞれのテーマで目次のデザインの初期設定が違います。

.entry-content .table-of-contents li {
    list-style-type: disc; /* マークの種類 */

上記のCSSを、この記事の一番最初にある目次のデザイン変更　（基本パターン）の13行目の次の行に挿入してください。

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

リストのマークについて

list-style-type は見出しの前のマークの種類を表しています。 decimel は数字、disc　は　●(黒丸）、circle　は　○(白丸）、square　は　■（黒い四角）、などがあります。

リストのマークが不要の場合は　none　と書くことで消すことができます

下記のサイトはたくさんのリストのマークがあり、とても参考になります！

サルワカ | サルでも分かる図解説明マガジン

【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える

リストのマークを部分的に変更する

リストのマークを部分的にかえます — それぞれの見出しのリストのマークを変更してみました！

大見出しは大文字のアルファベットに、中見出しは大文字のローマ数字に、小見出しは■黒い四角のマークへ変更してみました。

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

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

目次の左側にブログアイコンを追加して表示させる — 「目次」の左側に、ブログアイコンを追加で表示してみました

/*目次のデザイン変更、目次に太いライン*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    background: #fff; /* 背景の色 */
    font-size: 100%; /* 文字サイズ */
    border-top: solid 40px #85c083; /* 枠上の線の種類と太さと色 */
    border-right: solid 3px #85c083; /* 枠右の線の種類と太さと色 */
    border-bottom: solid 3px #85c083; /* 枠下の線の種類と太さと色 */
    border-left: solid 3px #85c083; /* 枠左の線の種類と太さと色 */
    border-radius: 4px;
}
/*「目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  目次"; /* 「目次」の隣のアイコンを指定 */
　　content: "目次";
    position: absolute;
    top: -33px; /*上からの位置調整*/
    left: 20px; /*左からの位置調整*/
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    color: #fff;
    border: none;
    font-size: 120%;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1em;
    list-style-type: decimal;
    line-height: 1.6em;
}
.entry-content .table-of-contents li ul {
    margin: 0 0 1em .5em;
    padding: 0;
}
.entry-content .table-of-contents li ul li {
    margin: .2em 0 0 1em;
    list-style-type: disc;
}
.entry-content .table-of-contents li ul li ul li {
    list-style-type: circle;
}
.table-of-contents li a {
    line-height: 1.6em;
}
.entry-content .table-of-contents a {
    color: #454545;
    text-decoration: underline;
}