はてなブログで目次をカスタマイズする方法【説明付き】

アフィリエイト初心者

「はてなブログで書いているけれど、目次がちょっとカッコ悪い。カスタマイズしたいけど、やり方わからないし、どうしたらいいの？教えて。」

こんなお悩みにお答えします。

この記事でわかること

はてなブログの目次の作り方
はてなブログで目次をカスタマイズする手順
コピペでもできる目次カスタマイズおすすめ例3選

記事の信頼性

こんにちわ、Jouji(@jouji0720)です。僕は現在webライター4年目で、フリーランスライターで生活しています。

そんな僕が、今回ははてなブログのカスタマイズの仕方についてお話します。この記事を読むと、目次のカスタマイズの仕方を細胞レベルで理解できるようになります。

記事が読まれるかは目次で決まるといっても過言ではありません。ですからどうぞ最後までお読みください。

はてなブログの目次の作り方
はてなブログで目次をカスタマイズする手順
- カスタマイズ時の注意点
- はてなブログの目次のカスタマイズの手順
コピペでもできる目次カスタマイズおすすめ例3選
まとめ|はてなブログで目次をカスタマイズして読者に読まれるようになろう

はてなブログの目次の作り方

はてなブログでの目次の作り方を、お話していきます。作り方は、次の通りです。

見出しを作る
目次ボタンを押す

それぞれ解説します。

見出しを作る

はてなブログでの目次の作り方の1つ目は、見出しを作ることです。見出しタグを使って、見出しを作っていきましょう。

作り方に関しては、はてなブログの見出しカスタマイズ法【シンプルイズベスト】をよみながら、一緒にやってみましょう。

目次ボタンを押す

はてなブログでの目次の作り方の2つ目は、目次ボタンを押すことです。エディターのツールバーにある目次ボタンを押すと、目次ができます。

できた目次のイメージが次の通りです。

ちょっと見た感じが、見にくいです。文字も緑なので、ちかちかします。

はてなブログで目次をカスタマイズする手順

はてなブログで目次をカスタマイズする方法をお話していきます。

カスタマイズ時の注意点

カスタマイズ時の注意点は、次の通りです。

必ずバックアップを取ること
もとからあるCSSコードは、消さないこと
自己責任で、行うこと

もし何かあってもはてなブログは、保証を何もしてくれません。というのもカスタマイズは推奨されていないからです。

バックアップを取るなどして、元に戻せる状況を作って、自己責任で行うようにしましょう。

はてなブログの目次のカスタマイズの手順

はてなブログの目次のカスタマイズの手順は、以下の通りです。

外枠のデザインを変更
目次内の背景色を変更
タイトル文字の挿入
リストマークの変更
目次のリンクの下線の消去
目次の文字色の変更
番外編：アイコンの挿入

それぞれ解説します。

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

はてなブログの目次のカスタマイズの手順の1つ目は、外枠のデザインを変更することです。

囲いがあったら、目次だなってわかりやすくなりますから、やっていきましょう。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents {
border:4px solid #e4c1c0; /* 目次枠線太さと色*/
}

コード解説

外枠を作るときには、borderプロパティを使います。borderプロパティは、線引いたり、線の色や太さの変更にも使えます。

線の種類でよく使うものは、次のものがあります。

solid(1本線)
double(2本線)
dashed(破線)
dotted(点線)

線の太さに関しては、あまり太すぎると強調されすぎるので、3px以内にしておくのがいいです。

線の色に関しては、背景色の色との兼ね合いがあるので、のちに解説します。

目次内の背景色を変更する

はてなブログの目次のカスタマイズの手順の2つ目は、目次内の背景色を変更することです。

いくら目次をかこっていても、目次の背景色と本文の背景色が一緒だったらわかりにくいからです。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents {
border:3px solid #e4c1c0; /* 目次枠線太さと色*/
background:#fff3b8;}

コードの解説

背景色は、backgroundプロパティを使用します。

backgroundプロパティは、背景に関する指定をまとめて行う際に使用するプロパティです。

色の変更の時には使うことが多いプロパティですので、覚えておきましょう。

タイトル文字を入れてカスタマイズする

はてなブログの目次のカスタマイズの手順の3つ目は、タイトル文字を入れてカスタマイズすることです。

タイトルを入れることによって、読者にわかりやすくなります。そのために、目次と入れていきましょう。

先ほど作ったCSSコードに加えて、新しくコードを作ります。

.entry-content .table-of-contents::before{
display:block;
content:"目次";/*目次以外にもcontentsや好きな言葉を入れられます*/
font-size:18px;/*目次の文字の大きさ*/
color:#e4c1c0;/*文字色。基本は外枠の色と合わせるとかっこいいかも…*/
font-weight:bold;/*目次の文字の太さ*/
text-align:left；/*左寄せ*/
border-bottom:2px dotted #e4c1c0;/*目次内の境界線の太さと色・点線*/
}

コードの解説

目次という題名のために、先に入れたいと思って先に書いてしまいがちですが、先のCSSに入れてしまいがちですが、違います。

目次の直前にいれることから、::beforeプロパティを使います。直前の文字などを入れるときに使うプロパティです。

色に関してですが、基本は外枠の色と合わせると統一感がでますので、おすすめです。

リストマークの変更をする

はてなブログの目次のカスタマイズの手順の4つ目は、リストマークの変更です。というのもリストマークの変更をするかどうかで、見やすさがめちゃめちゃ変わるんです。

どうせ見るなら、目次も見やすいほうがいいです。リストマークを変更していきます。先ほどのコードに新しく以下のコードを追加していきましょう。

.entry-content .table-of-contents li{
list-style-type:decimal;/*数字*/
}
.entry-content .table-of-contents li ul li{
list-style-type:decimal; /* 中見出し:数字*/
font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
list-style-type:square; /* 小見出し：数字 */
font-weight: normal; /* 文字標準 */
}

コードの解説

list-style-typeプロパティを使っています。リストの先頭に表示するマーカー文字の種類を指定するときに使います。

よく使うのは、次のものがあります。

disc(黒丸)
circle(白丸)
square(黒四角)
decimal(算用数字)

目次のリンクの下線を消す

はてなブログの目次のカスタマイズの手順の5つ目は、目次のリンクの下線を消すことです。

というのも、リンクがあるとどうしても、初心者っぽい見た目になるからです。消しておいたほうが、格好いいです。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents li a{
text-decoration:none;/*リンク下線はなし*/
}
.entry-content .table-of-contents li ul li a{
text-decoration:none;/*リンク下線はなし*/
}
.entry-content .table-of-contents li ul li ul li a{
text-decoration:none;/*リンク下線はなし*/
}

コードの解説

ここで気を付けたいのが、目次の中の文字ということで.table-of-contents aプロパティを使わないことです。

文中のリンクの下線が消えてしまい、目次中にある見出しの下線は、消えませんので、注意が必要です。

目次の文字の色を変更する

はてなブログの目次のカスタマイズの手順の6つ目は、目次の文字の色を変えることです。

文字がそのままの状態では、緑色です。読者にとっては目がちかちかして見にくいです。そのために変更していきましょう

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents{
color:#e4c1c0;
}

コードの解説

このコードは、一番最初に作ったCSSに入れてもらえばいいです。というのも、使うプロパティが同じだからです。プロパティが同じものをまとめておいた方が後で見るときにも、見やすくなります。

CSSコードなどのカスタマイズをするときには、コードの行数はまとめた方が楽になります。ですからなるべくまとめておきましょう。

番外編：アイコンを入れる

番外編で、アイコンを入れる方法をご紹介します。よく、目次の横にアイコンが入っているのを見かけますが、その方法です。

これがあると目立つので、わかりやすくなります。

カスタマイズコードは次の通りです。

.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
display: block;
font-size: 120%;
position: absolute;
line-height: 40px;
top: 12px;
left: 12px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;
background: #72b0ed;
}

コードの解説

この時に気を付けるべきは、つかえるアイコンかどうかを確認しておくことです。というのもはてなブログのアイコンは、使えないこともあったりするからです。

また、読み込みをするのでページが重くなる可能性もありますが、目立つという点で、のせてみました。

コピペでもできる目次カスタマイズおすすめ例3選

コピペでも作れるはてなブログのカスタマイズ例は、次の通りです。

超シンプルタイプ
シンプル+知的タイプ
目次タイトルの横にフォントアイコンを入れたタイプ

それぞれ解説します。

超シンプルなタイプ

コピペでもできる目次カスタマイズおすすめ例の1つ目は、超シンプルタイプです。

シンプルなので使い勝手がよく、必要なものだけが表示できるために見やすいタイプです。

先ほど説明したタイプとよく似ています。こちらは少ないコードで作れるために、動きが重くないところも、おすすめのポイントです。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents {
margin: 0;
padding: .7em 1.2em 1.2em;
background: #f6f6f7;
font-size: 100%;
border: solid 1px #5a598c;
}
.entry-content .table-of-contents::before {
content: "目次";
position: static;
display: block;
text-align: center;
margin: 0 0 .8rem;
padding: 0 0 .4rem;
border-bottom: 1px dashed #9aa0c1;
font-size: 120%;
}
.table-of-contents ul {
padding-left: 10px;
}
.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 li {
margin: .2em 0 0 1em;
}
.table-of-contents li a {
text-decoration: underline;
line-height: 1.6em;
color: #3f3f3f;
}

シンプル+知的タイプ

コピペでもできる目次カスタマイズおすすめ例の2つ目は、シンプル+知的タイプです。

このタイプは、ノートの出し入れができるルーズリーフ的な見た目です。知的なイメージが出るので、アフィリエイトの勉強もはかどりそうです。

シンプルながらも知的なイメージを出したいときには、おすすめです。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents {
display: inline-block;
padding: 0 1em 1em;
background: #ffffff14;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 8px dotted #e1e1e2;
box-shadow:0px 0px 0 7px #ffffff,1px 0px 0 7px #959595d4,2px 0px 0 7px #fff,3px 0px 0 7px #898989de,4px 0px 0 7px #fff,5px 0px 0 7px #858585de, 4px 0px 10px 9px #b8b8b896;
}
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: static;
margin: .3em 0 .4em;
padding: 0;
border-bottom: 2px solid #ddd;
font-size: 1rem;
font-weight: normal;
text-align: start;
}
.entry-content .table-of-contents li {
list-style-type: decimal;
margin: 0 0 0 1em;
font-size: 1.1em;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
list-style-type: decimal;
color: #8d8d8d;
font-size: .9em;
}
.entry-content .table-of-contents a {
color: #5a5a5a;
text-decoration: none;
position: relative;
display: block;
line-height: 2em;
background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradie  (180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 95%, #666 100%);background-size: 8px 100%,100% 2em;
}

目次の横にフォントを入れたタイプ

コピペでもできる目次カスタマイズおすすめ例の3つ目は、目次の横にフォントを入れたタイプです。

このタイプは、現在僕も改造して使っています。コードは多くなりますが、CSSコードの技術がつくので初心者には挑戦してほしい、おすすめデザインです。

カスタマイズコードは、次の通りです。

.entry-content .table-of-contents {
position: relative;
margin: 0;
padding: 4em 1.2em 1em;
background: #fff;
font-size: 100%;
border-top: solid 5px #72b0ed;
border-right: 0;
border-bottom: 0;
border-left: 0;
color: #72b0ed;
box-shadow: 0 1px 5px 2px #e9e9e9;
}
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: absolute;
top: 18px;
left: 60px;
margin: 0;
text-align: start;
color: #72b0ed;
border: none;
font-size: 120%;
font-weight: bold;
}
.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
display: block;
font-size: 120%;
position: absolute;
line-height: 40px;
top: 12px;
left: 12px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;
background: #72b0ed;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
list-style-type: decimal;
line-height: 1.6em;
font-weight: bold;
}
.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: none;
font-weight: normal;
font-size: 100%;
}
.entry-content .table-of-contents li ul li::before {
content: "\f006";
font-family: blogicon;
margin-right: .5em;
color: #72b0ed;
}
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;
}
.entry-content .table-of-contents a {
color: #72b0ed;
line-height: 1.6em;
text-decoration: underline;
}