見出しのカスタマイズの次は目次もカスタマイズ！
ミニマリズムそのままの目次だとかなりシンプルなので、もう少しデザインがあったほうがいいなと思いやってみました。
目次をカスタマイズ
ミニマリズムのデフォルトの目次
デザインを選ぶ
「はてなブログ」で使えるCSSを紹介している記事からCSSをコピーします。
そうでない場合、セレクタの部分をはてなブログのものに書き換えないといけないので大変だと思います。
CSSをコピペする
参考サイトのCSSをコピー、
はてなブログの
「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」
に張り付ける。
色を変える
コピペしたコードの色を書き換える。
カスタマイズした目次のデザイン
今回、私はフジブロさんが紹介している目次カスタマイズのCSSをもとに、自分の好みに少し変更してつくりました。
試行錯誤の末、このようなデザインになりました。
カスタマイズした目次のCSS
/*目次*/
.entry-content .table-of-contents {
position: relative;
margin: 2em 0;
padding: 4em 1.2em 1em;
background: #fcfcfc;/*目次の背景色*/
border-top: 6px solid #757cab;/*わくの上側の線*/
font-size: 130%;/*リスト（数字と点）のサイズ*/
color: #606060;/*リスト（数字と点）の色*/
box-shadow: 0 1px 5px 2px #e9e9e9;/*わくの影、色*/
}
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: absolute;
top: 20px;
left: 70px;
margin: 0;
text-align: start;
color: black;
border: none;
font-size: 110%;
color: #757cab;/*"目次"の字の色*/
}
.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
display: block;
font-size: 120%;
position: absolute;
line-height: 43px;
top: 12px;
left: 20px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;/*アイコンフォントの色*/
background: #757cab;/*アイコンフォント背景の丸の色*/
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
line-height: 1.6em;
font-weight: normal;
font-size: 90%;/*大見出しの文字サイズ*/
list-style-type: decimal;/*リスト数字*/
}
.entry-content .table-of-contents li ul {
margin: .5em 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
font-weight: normal;
font-size: 90%;/*中見出しの文字サイズ*/
list-style-type: disc;/*リスト点*/
}
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;/*小見出しの文字サイズ*/
list-style-type: circle;/*リスト円*/
}
.entry-content .table-of-contents a {
color: #606060;/*見出しの文字色*/
line-height: 1.6em;
text-decoration: none;
}
.entry-content .table-of-contents a:hover {
color: #acacac;/*マウスオーバーしたときの色*/
}
/*小見出しを表示しない*/
.table-of-contents ul ul{
display: none;
}
備忘録：目次のCSS
セレクタごとに調べたことをメモしていきます。
セレクタ { プロパティ: 値; }
目次の外わく
.entry-content .table-of-contents {
position: relative;
margin: 4em 0;/*外側（上下）の余白*/
padding: 4em 1.2em 1em;/*わくの内側の余白*/
background: #f9fcff;/*背景色*/
border-top: 6px solid #757cab;/*わくの上の線*/
font-size: 130%;/*リスト（数字と点）のサイズ*/
color: #606060;/*リスト（数字と点）の色*/
box-shadow: 0 1px 5px 2px #e9e9e9;/*わくの影*/
}目次の外側（上下）に余白をつくりたい
余白がないと目次とアイキャッチ、目次と文章がくっついて表示されてしまいます。
これは気になる。
適度に余白があったほうがよいと思いました。
要素の外側の余白の調整をしたいので使うのは「margin」、オレンジの部分。
余白は上下のみで、左右にはいらないのでゼロにしました。
→「margin: 4em 0;/*外側（上下 左右）の余白*/」
「目次」の文字の部分
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: absolute;
top: 20px;/*文字の位置*/
left: 70px;/*文字の位置*/
margin: 0;/*余白*/
text-align: start;
border: none;/*線*/
font-size: 110%;/*文字の大きさ*/
color: #757cab;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}「content: "目次";」の部分は「目次」「もくじ」「CONTENTS」から漢字の目次にしました。
アイコン部分を少し大きくして位置も微調整したので、「目次」の位置も微調整しました。
目次のアイコン部分
.entry-content .table-of-contents::after {
content: "\f039";/*アイコンフォント*/
font-family: blogicon;
position: absolute;
display: block;
font-size: 120%;/*アイコンの大きさ*/
line-height: 43px;/*アイコンの位置（縦方向）*/
text-align: center;/*丸の中のアイコンの位置（横方向）*/
vertical-align: bottom;
color: #fff;/*アイコンの色*/
top: 12px;/*丸の位置*/
left: 20px;/*丸の位置*/
width: 40px;/*丸の横幅*/
height: 40px;/*丸の縦幅*/
border-radius: 50%;/*丸のカーブ*/
background: #757cab;/*丸の色*/
}「 」←このリストのアイコンははてなブログで使えるアイコンフォントで、目次のCSSを参考にしたフジブロさんのブログに詳しく説明があります。
この目次マークの部分は丸とアイコンフォントが重なるように別々に位置を指定しています。
アイコンフォントと丸をそれぞれ少し大きくしたらずれてしまったので、微調整しました。
「.entry-content .table-of-contents li」
オレンジ色の部分が「margin」の部分
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
line-height: 1.6em;
font-size: 90%;/*大見出しの文字サイズ*/
font-weight: normal;/*大見出しの文字の太さ*/
list-style-type: decimal;/*大見出しの前に数字*/
}「.entry-content .table-of-contents li ul」
.entry-content .table-of-contents li ul {
margin: .5em 0 1em .5em;
padding: 0;
}「.entry-content .table-of-contents li ul li」
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
font-size: 90%;/*中見出しの文字サイズ*/
font-weight: normal;/*中見出しの文字の太さ*/
list-style-type: disc;/*中見出しの前に点*/
}「.entry-content .table-of-contents li ul li ul li」
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;/*小見出しの文字サイズ*/
list-style-type: circle;/*小見出しの前に円*/
}
文字間の余白を少しづつ調整しました。
小見出しは目次に反映されないようにしましたが、もし気が変わったときのために消さないで残しました。
タイトル前のリストは大見出しの前は数字、中見出しの前は点にしました。
- list-style-type: decimal; /*見出しの前に数字*/
- list-style-type: circle; /*見出しの前に円*/
- list-style-type: disc; /*見出しの前に点*/
- list-style-type: square; /*見出しの前に四角*/
この「li」と「ul」で指定される部分はわけがわかりません。
色付きの図と照らし合わせながら、どこがどこなのかにらめっこしていました。
目次のリンクになっている部分
もともとのCSSではタイトルに下線が引いてありましたが、ごちゃごちゃしているようにみえるので下線なしにしました。
.entry-content .table-of-contents a {
color: #606060;/*見出しの文字色*/
line-height: 1.6em;/*行の高さ*/
text-decoration: none;/*下線なし*/
}下線ありのコードはこちら
→「text-decoration: underline;/*下線あり*/」
リンクになっている部分をマウスオーバーしたとき色を変える
「aタグ」に「:hover」を足す。
マウスオーバーしたときに文字が少し薄い色になるようにしました。
.entry-content .table-of-contents a:hover {
color: #a0a0a0;/*マウスオーバーしたときの文字色*/
}小見出しを表示しない
目次が縦に長くなりすぎないようにするため、目次が見づらくならないために目次には小見出しを表示しないようにしました。
.table-of-contents ul ul{
display: none;
}
備忘録：今回は未採用だったCSS
見出しの下線の長さ
下線の長さ
.entry-content .table-of-contents a {
color: #72b0ed;/*大・中・小見出しの文字色*/
display: block;
border-bottom: solid 2px #72b0ed;/*大・中・小見出しの下の線*/
}「display: block;」がない場合は線の長さは文字の長さと同じになる。
中見出し、小見出しの文字の色と下線の色と種類を変える
.entry-content .table-of-contents ul li a {
color: #5a598c;/*中・小見出しの文字色*/
border-bottom: dashed 1px #5a598c;/*中・小見出しの下の線（破線）*/
}下線を大見出しの下だけにしたい場合は中・小見出しの線を消す。
→「dashed 1px #5a598c」の部分を「none」にする。
- border: solid; /*線*/
- border: doubled; /*2重線*/
- border: dashed; /*破線*/
- border: dotted; /*点線*/
色の違いで受ける印象も違う
はじめはくっきりした色でつくりました。（左の目次）
この記事のようにあれこれ説明するブログにはいいのですが、私が普段書いているような日常の暮らしのことを日記のようにかくブログには存在感が強すぎて似つかわしくないと思いました。
なので、ふんわりした印象になるように今の色の組み合わせに落ち着きました。（右の目次）
ついでに目次の文字サイズを少し小さく（120％ → 110%）、
「.entry-content .table-of-contents::before { font-size: 110%;/*文字の大きさ*/ }」
大見出しの文字の太さを太字（bold）から普通の太さ（normal）に変更しています。
「.entry-content .table-of-contents li { font-weight: normal;/*大見出しの文字の太さ*/ }」
左の目次に使った色
- 上のラインの色・目次の文字の色・アイコンフォントの色・リストの色・見出しの色（紺）：#364f6b
- 背景色（薄水色）：#f9fcff
終わりに
目次のCSSはわからない部分がたくさんあったので調べるのに時間がかかりました。
時間がかかった割には出来上がった目次はとてもシンプルなデザインで、苦労して完成したようには見えなくてちょっと悲しい。
まだカスタマイズしたいところはあるので頑張るぞ！
※このブログはCSSのことを何も知らなかった私がネットで情報をかき集めて書いています。
説明が間違っていることもあるかもしれませんのでご容赦ください。
記事完成後に文字の大きさや色など微調整している部分もあり、ブログにのせたCSSと私のブログの現状のデザインが異なる部分もあります。
