自分が思う目次デザインそのままのCSSはなく、いくつか紹介されているデザインのCSSからこうしたいと思う部分を切り貼りして目次をカスタマイズしました。
一つ一つのコードが何を示すのか調べながらだったので大変でした。
目次をカスタマイズ
ミニマリズムのデフォルトの目次
デザインを選ぶ
「はてなブログ」で使えるCSSを紹介している記事からCSSをコピーします。
そうでない場合、セレクタの部分をはてなブログのものに書き換えないといけないので大変だと思います。
CSSをコピペする
参考サイトのCSSをコピー、
「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」
に張り付ける。
色を変える
コピペしたコードの色を書き換える。
今回、私はフジブロさんが紹介している目次カスタマイズのCSSを切ったりはったりしたのと、それにプラスしてこうしたいと思ったデザインを検索してつくりました。
試行錯誤の末、このようなデザインになりました。
備忘録：目次のCSS
目次の外わく
目次の外枠は上側だけ線を引き（border-top）、
右・左・下には影をつけました（box-shadow）。
数字の大きさを微妙に大きくしました。
ほんとは半角から全角にかえたかったんですがやり方がわからず撃沈しました。
.entry-content .table-of-contents { position: relative; margin: 4em 0;/*外側（上下）の余白*/ padding: 4em 1.2em 1em;/*わくの内側の余白*/#f9fcff
background:;/*背景色*/ border-top: 6px solid #364f6b;/*わくの上*/ font-size: 130%;/*リスト（数字と点）のサイズ*/ color:#364f6b;/*リスト（数字と点）の色*/ box-shadow: 0 1px 5px 2px #e9e9e9;/*わくの影*/ }
目次を線で囲い、角を丸くしたい場合は「border-radius」を使う
border: 6px solid #364f6b;/*わく*/
border-radius: 3px;/*枠の角の丸み*/
目次の外側（上下）に余白をつくりたい
もともとの目次のCSSは外側の余白はゼロになっていました（margin: 0;）。
なので、目次の下側に文章を書くと、目次と文章の距離が近くて気になります。
ちなみに上側は少し余白があるのは文字の下側に余白が設定されているからのようです。
「margin: 0;」→「margin: 4em 0;」に変更
「目次」の部分
「content: "目次";」の部分は「目次」「もくじ」「CONTENTS」と書き換え可。
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: absolute;
top: 20px;/*目次の字の位置*/
left: 70px;/*目次の字の位置*/
margin: 0;
text-align: start;
border: none;
font-size: 120%;/*目次の字の大きさ*/
color: #364f6b;/*目次の字の色*/
font-weight: bold;/*目次の字の太さ*/
}目次のアイコン部分
アイコンが必要なければこの部分は丸ごと削除。
アイコンの大きさ、丸の位置、「目次」の位置も微調整しました。
.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
position: absolute;
display: block;
font-size: 120%;/*アイコンの大きさ*/
line-height: 43px;/*アイコンの位置（縦方向）*/
top: 12px;/*丸の位置*/
left: 20px;/*丸の位置*/
width: 40px;/*丸の横幅*/
height: 40px;/*丸の縦幅*/
text-align: center;/*丸の中のアイコンの位置（横方向）*/
vertical-align: bottom;
border-radius: 50%;/*丸のカーブ*/
color: #fff;/*アイコンの色*/
background: #364f6b;/*丸の色*/
}li
：「大見出し＋中身出し＋小見出し」
オレンジ色の部分が「margin」
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
line-height: 1.6em;
font-size: 90%;/*大見出しの文字サイズ*/
font-weight: bold;/*大見出しの文字の太さ*/
list-style-type: decimal;/*大見出しの前に数字*/
}li ul
：リスト部分を含む「中見出し＋小見出し」、リスト部分を含む「小見出し」
.entry-content .table-of-contents li ul {
margin: .5em 0 1em .5em;
padding: 0;
}li ul li
：中見出し以下の部分（＋小見出し）
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
list-style-type: none;
font-size: 90%;/*中見出しの文字サイズ*/
font-weight: normal;/*中見出しの文字の太さ*/
list-style-type: disc;/*中見出しの前に点*/
}li ul li ul li
：小見出し
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;/*小見出しの文字サイズ*/
list-style-type: circle;/*小見出しの前に円*/
}この「li」と「ul」であらわされる部分がよくわからなくて困ります。
色付きの図と照らし合わせながら、どこがどこかにらめっこしていました。
目次のリンクになっている部分
リンクになっている文字は「a」がつく。
マウスオーバーしたときと行の高さと同じにしておく。
.entry-content .table-of-contents li a {
line-height: 1.6em;/*行の高さ*/
}目次のリンクになっている部分をマウスオーバーしたとき色を変える
「aタグ」に「:hover」を足す。
.entry-content .table-of-contents a:hover {
line-height: 1.6em;/*行の高さ*/
color: #a0a0a0;/*マウスオーバーしたときの文字色*/
}小見出しを表示しない
目次が縦に長くなりすぎないようにするため。
.table-of-contents ul ul{
display: none;
}見出し下線を消す
文字がリンクになっているときにひいていることの多い線
ミニマリズムのデフォルトのデザインには下線はないようです。
コピペしたCSSから下線を引く部分のコードを削除しました。
下線があるコード
.entry-content .table-of-contents a {
text-decoration: underline;/*下線あり*/
}下線を消す
消したい場合は「underline」の部分を「none」にする。
私は「text-decoration: underline;」を削除して下線を消しました。
.entry-content .table-of-contents a {
text-decoration: none;/*下線を表示しない*/
}文字の色を変える / 段落の下に下線をひく
見出しの文字の色と下線
.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」にする。
「list-style-type」と「線」の種類
list-style-typeの種類
- list-style-type: decimal; /*見出しの前に数字*/
- list-style-type: circle; /*見出しの前に円*/
- list-style-type: disc; /*見出しの前に点*/
- list-style-type: square; /*見出しの前に四角*/
線の種類
- border: solid; /*線*/
- border: doubled; /*2重線*/
- border: dashed; /*破線*/
- border: dotted; /*点線*/
私がカスタマイズした目次のCSS
色の部分は変更するときにわかりやすいように赤くしました。
/*目次*/
.entry-content .table-of-contents {
position: relative;
margin: 4em 0;
padding: 4em 1.2em 1em;
background: #f9fcff;/*目次の背景色*/
border-top: 6px solid #364f6b;/*わくの上側の線*/
font-size: 130%;/*リスト（数字と点）のサイズ*/
color: #364f6b;/*リスト（数字と点）の色*/
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: 120%;
color: #364f6b;/*"目次"の字の色*/
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: 20px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;/*アイコンフォントの色*/
background: #364f6b;/*アイコンフォント背景の丸の色*/
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
line-height: 1.6em;
font-weight: bold;
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;
list-style-type: none;
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 li a {
line-height: 1.6em;
}
.entry-content .table-of-contents a:hover {
line-height: 1.6em;
color: #a0a0a0;/*マウスオーバーしたときの色*/
}
.entry-content .table-of-contents a {
color: #364f6b;/*大・中・小見出しの文字色*/
}
.entry-content .table-of-contents ul li a {
color: #537294;/*中・小見出しの文字色*/
}
/*小見出しを表示しない*/
.table-of-contents ul ul{
display: none;
}終わりに
カスタマイズを始めたときはCSSを見てもアルファベットと数字の羅列にしか見えず、なんのことかさっぱりでした。
一つ一つコードを調べてメモしていくと、だんだんわかるというか、はじめたときよりも読めるようになったように思います。
目次のCSSはわからない部分がたくさんあったので調べるのに時間がかかりました。
時間がかかった割には出来上がった目次はとてもシンプルなデザインで、あまりそうは見えなくてちょっと悔しい。
まだまだカスタマイズしたいところはあるので頑張るぞ！
