目次(TOC)のリスト要素で古書っぽい雰囲気を醸した.css

この記事を読むのに必要な時間は約 3 分です。

記事を書く時には本文に引けを取らず「タイトル」や「見出し」も大事です。

見出しについてはライターさんにかなりしつこくお願いして良いものを書いてもらっています。

WPテーマCocoonやWPプラグインのTable of Contents Plusを使うと、見出しから自動的に目次(TOC, Table of Contents)が生成されます。

せっかくライターさんに苦労して見出しを書いていただいているので、デザインを当ててみました。

古い紙風のCSSはこちらの記事から拝借しました。

CSSで作るリストデザイン38選！オシャレな箇条書きを実現

HTML・CSSをコピペするだけでできるオシャレなリストデザイン38選です。オシャレで可愛い箇条書きリストのデザインを調整方法もあわせて紹介しています。html・cssだけで作成しているのでお試しを！

以下、カスタマイズしたCSS（WPテーマ：Cocoon用）

.toc{
 font: 1em 'Mv Boli', 'arial narrow', sans-serif;
 width:100%;
}
.toc ol{
 counter-reset:list;
 list-style-type:none;
 position:relative;
 padding: 1em;
}
.toc ol:after{
 position: absolute;
 right: 1.2em;
 font-size:12px;
 color:#bbb;
}
.toc ol li{
 position:relative;
 padding: 0px 5px 0px 50px;
 margin: 0px 0 0px 0px;
 font-size:15px;
 border-bottom:dashed 1px #ccc;
 color:#333;
}
.toc ol li:first-child{
 margin-top:0;
}
.toc ol li:last-child{
 margin-bottom:20px;
}
.toc ol li:before{
 counter-increment: list;
 content: counter(list) ",";
 position: absolute;
 left: 15px;
 font-size:1.2em;
 top: 50%;
 -moz-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}
.toc a{
 display:block;
 line-height:30px;
}
.toc a:hover{
 text-decoration:none;
 background-color: rgba(100, 100, 100, 0.08);
}
/* H2とサイトバーの色も一緒に変えてある */
.entry-content h2, .widget-title, .toc{
 background:#F2EFE7 !important;
 -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
 -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
 box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}